@import url("https://fonts.googleapis.com/css2?family=Yomogi&display=swap");
* { box-sizing: border-box; }

:root {
  --green: #1f6b43;
  --deep: #143d2a;
  --shadow: 0 28px 80px rgba(36, 80, 47, .18);
}

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family:
    "M PLUS Rounded 1c",
    "Zen Maru Gothic",
    "Kosugi Maru",
    "Hiragino Maru Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
  color: var(--deep);
  background:
    radial-gradient(circle at 76% 18%, rgba(255,255,255,.94), transparent 24%),
    radial-gradient(circle at 16% 82%, rgba(245,201,86,.28), transparent 28%),
    linear-gradient(135deg, #e2f3d7 0%, #fff4d6 100%);
}

.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.map-wrap {
  width: min(96vw, 980px);
  height: min(96svh, 980px);
  position: relative;
}

.map-area {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: rotate(-2deg);
}

.map-area::before {
  content: "";
  position: absolute;
  width: 84%;
  height: 84%;
  border-radius: 42% 58% 48% 52%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.9), transparent 24%),
    linear-gradient(145deg, rgba(255,251,221,.86), rgba(202,229,164,.52));
  box-shadow: 0 28px 80px rgba(53, 89, 43, .14);
}

.japan-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    sepia(.16)
    saturate(1.5)
    hue-rotate(10deg)
    brightness(1.04)
    contrast(.92)
    drop-shadow(0 18px 18px rgba(37, 84, 42, .18));
  opacity: .95;
}

.route-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

.walk-route {
  fill: none;
  stroke: rgba(31, 107, 67, .40);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 2 26;
}

.footprints {
  fill: rgba(255, 255, 255, .86);
  filter: drop-shadow(0 2px 2px rgba(40,80,40,.15));
}

.tardigrade {
  position: absolute;
  z-index: 8;
  width: clamp(68px, 11vw, 118px);
  aspect-ratio: 1.55 / 1;
  left: 34%;
  top: 73.5%;
  transform-origin: center;
}

.walker {
  animation:
    walkOnMap 5.2s cubic-bezier(.48, 0, .18, 1) .35s both,
    bob .55s ease-in-out infinite alternate;
}

.tardi {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 48% 52% 46% 54%;
  background: linear-gradient(90deg, #e8f0c6, #a5ca6d 55%, #6f9f56);
  box-shadow:
    inset 10px 0 0 rgba(255,255,255,.34),
    0 16px 24px rgba(31, 75, 34, .25);
}

.seg {
  position: absolute;
  top: 12%;
  bottom: 12%;
  width: 20%;
  border-right: 4px solid rgba(50, 91, 45, .22);
  border-radius: 50%;
}

.s1 { left: 22%; }
.s2 { left: 44%; }
.s3 { left: 66%; }

.leg {
  position: absolute;
  bottom: -18%;
  width: 18%;
  height: 34%;
  border-radius: 0 0 999px 999px;
  background: #86b664;
}

.l1 { left: 13%; animation: step .48s infinite alternate; }
.l2 { left: 37%; animation: step .48s infinite alternate-reverse; }
.l3 { left: 61%; animation: step .48s infinite alternate; }
.l4 { left: 84%; animation: step .48s infinite alternate-reverse; }

.eye {
  position: absolute;
  right: 12%;
  width: 7%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #27351e;
  opacity: 0;
  animation: faceIn .1s linear 5.35s forwards;
}

.e1 { top: 33%; }
.e2 { top: 56%; }

.speech {
  position: absolute;
  z-index: 10;
  left: 69%;
  top: 36%;
  width: clamp(160px, 18vw, 260px);
  aspect-ratio: 4 / 3;
  display: block;
  padding: 0;
  background: url("./assets/hero/speech-bubble-v200.png") center / contain no-repeat;
  color: var(--green);
  font-weight: 700;
  font-family: "Yomogi", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-size: clamp(18px, 2.8vw, 30px);
  line-height: 1.18;
  text-align: center;
  box-shadow: none;
  border: 0;
  opacity: 0;
  transform: translateY(14px) scale(.94);
  animation: fadeUp .8s ease 5.35s forwards;
}


.speech-text {
  position: absolute;
  left: 52%;
  top: 45%;
  display: block;
  width: 68%;
  text-align: center;
  letter-spacing: -0.02em;
  transform: translate(-50%, -50%);
}

.speech-line {
  display: block;
  white-space: nowrap;
}

.title-card {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -48%);
  width: min(90vw, 690px);
  padding: clamp(16px, 2.8vw, 28px) clamp(18px, 3vw, 30px) clamp(18px, 3vw, 26px);
  text-align: center;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,253,245,.86), rgba(255,253,245,.58));
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: var(--shadow);
  opacity: 0;
  animation: fadeTitle 1s ease 6.05s forwards;
}

.project-name {
  margin: 0 0 4px;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1 {
  margin: .02em 0 .02em;
  color: var(--green);
  font-size: clamp(38px, 8.8vw, 98px);
  line-height: .95;
  letter-spacing: .03em;
  white-space: nowrap;
}

.subtitle {
  margin: 0 0 20px;
  color: #315331;
  font-size: clamp(17px, 3vw, 26px);
  font-weight: 800;
}

.actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 138px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration: none;
  font-size: 15px;
}

.primary {
  background: var(--green);
  color: white;
  box-shadow: 0 14px 28px rgba(31, 107, 67, .24);
}

.secondary {
  background: rgba(255,255,255,.75);
  color: var(--green);
  border: 1px solid rgba(31,107,67,.18);
}

.credit {
  position: fixed;
  z-index: 20;
  left: 12px;
  bottom: 10px;
  font-size: 11px;
  color: rgba(20,61,42,.58);
  background: rgba(255,253,245,.66);
  padding: 6px 9px;
  border-radius: 999px;
}

@keyframes walkOnMap {
  0%   { left: 34%; top: 73.5%; transform: translate(-50%, -50%) rotate(-32deg) scale(.95); }
  50%  { left: 52%; top: 62%;   transform: translate(-50%, -50%) rotate(-26deg) scale(1.02); }
  100% { left: 64.5%; top: 46.5%; transform: translate(-50%, -50%) rotate(8deg) scale(1.08); }
}

@keyframes bob {
  from { margin-top: 0; }
  to   { margin-top: -10px; }
}

@keyframes step {
  from { transform: translateY(0) rotate(-10deg); }
  to   { transform: translateY(7px) rotate(9deg); }
}

@keyframes faceIn {
  to { opacity: 1; }
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fadeTitle {
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@media (max-width: 760px) {
  .map-wrap {
    width: 118vw;
    height: 96svh;
  }

  .title-card {
    width: min(92vw, 500px);
    top: 72%;
    padding: 16px 16px 18px;
  }

  h1 {
    font-size: clamp(34px, 14vw, 62px);
    letter-spacing: .02em;
  }

  .subtitle {
    font-size: clamp(15px, 5vw, 22px);
    margin-bottom: 16px;
  }

  .speech {
    left: auto;
    right: 7%;
    top: 35%;
    font-size: clamp(21px, 7vw, 34px);
  }

  .button {
    min-width: 130px;
    padding: 11px 18px;
    font-size: 14px;
  }

  .credit {
    max-width: calc(100% - 24px);
    border-radius: 12px;
  }
}

/* ===== v0.8 below-the-fold home sections ===== */
.home-sections {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 72px 0 96px;
  display: grid;
  gap: 18px;
}

.intro-card,
.stat,
.ranking-panel,
.sample-panel,
.news-panel {
  background: rgba(255, 253, 245, .88);
  border: 1px solid rgba(31, 107, 67, .14);
  border-radius: 30px;
  box-shadow: var(--shadow);
}

.intro-card {
  padding: clamp(24px, 4vw, 42px);
}

.intro-card h2,
.ranking-panel h2,
.sample-panel h2,
.news-panel h2 {
  margin: .18em 0 .38em;
  color: var(--green);
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.15;
}

.intro-card p {
  margin: 0;
  max-width: 760px;
  line-height: 1.9;
  color: #405540;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.stat {
  padding: 22px;
}

.stat span {
  display: block;
  color: #4a744f;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
}

.stat strong {
  display: block;
  margin: 6px 0 2px;
  color: var(--green);
  font-size: clamp(34px, 6vw, 54px);
  line-height: 1;
}

.stat small,
.small-note {
  color: rgba(20, 61, 42, .62);
}

.ranking-panel,
.sample-panel,
.news-panel {
  padding: clamp(22px, 3.6vw, 34px);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.rank-arrows {
  display: flex;
  gap: 8px;
}

.rank-arrows button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(31, 107, 67, .18);
  background: rgba(255,255,255,.82);
  color: var(--green);
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}

#rankingList {
  margin: 16px 0 8px;
  padding-left: 24px;
  font-size: 18px;
}

#rankingList li {
  padding: 10px 0;
  border-bottom: 1px dashed rgba(31, 107, 67, .18);
}

#rankingList li:last-child {
  border-bottom: 0;
}

#rankingList small {
  color: rgba(20, 61, 42, .62);
}

.sample-count {
  min-width: 54px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #e8f4df;
  color: var(--green);
  font-weight: 900;
}

.sample-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.sample-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(31, 107, 67, .12);
}

.sample-card b {
  color: var(--green);
}

.sample-card span {
  color: rgba(20, 61, 42, .68);
  font-size: 14px;
}

.sample-card .status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  align-self: end;
  width: 100%;
  min-height: 24px;
  padding: 6px 10px;
  border-radius: 999px;
  box-sizing: border-box;
  line-height: 1;
  background: #f4edcc;
  color: #5b552b;
  font-weight: 900;
  font-size: 12px;
}

.sample-card .status.found {
  background: #dff0d4;
  color: var(--green);
}

.news-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.news-item {
  display: grid;
  grid-template-columns: 120px 90px 1fr;
  gap: 12px;
  align-items: center;
  padding: 15px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(31, 107, 67, .12);
}

.news-item time {
  color: rgba(20, 61, 42, .62);
  font-weight: 800;
}

.news-item .tag {
  text-align: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e8f4df;
  color: var(--green);
  font-weight: 900;
}

@media (max-width: 760px) {
  .home-sections {
    width: min(100% - 24px, 540px);
    padding-top: 54px;
  }

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

  .panel-head {
    align-items: center;
  }

  .sample-card {
    grid-template-columns: 1fr;
  }

  .news-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ===== v0.9 visual adjustment ===== */
.intro-card {
  position: relative;
  overflow: hidden;
}

.intro-card::after {
  content: "Citizen Science";
  position: absolute;
  right: clamp(20px, 4vw, 42px);
  bottom: 18px;
  color: rgba(31, 107, 67, .08);
  font-size: clamp(34px, 8vw, 88px);
  font-weight: 900;
  letter-spacing: .02em;
  pointer-events: none;
}

.stats-grid {
  margin-top: 4px;
}

.stat {
  background: linear-gradient(145deg, rgba(255,253,245,.98), rgba(234,246,220,.92));
}

.stat strong {
  margin-bottom: 0;
}

.ranking-panel {
  position: relative;
  overflow: hidden;
  color: #18402b;
  background:
    radial-gradient(circle at 92% 12%, rgba(255,255,255,.72), transparent 24%),
    linear-gradient(135deg, #ffe18a 0%, #f7c85a 34%, #79b85c 100%);
  border: 0;
}

.ranking-panel::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 2px dashed rgba(255,255,255,.48);
  border-radius: 24px;
  pointer-events: none;
}

.ranking-panel .kicker,
.ranking-panel h2 {
  color: #153b27;
}

.ranking-panel .panel-head,
.ranking-panel ol,
.ranking-panel .small-note {
  position: relative;
  z-index: 1;
}

.rank-arrows button {
  background: rgba(255,255,255,.82);
  color: #18402b;
  border: 0;
  box-shadow: 0 10px 24px rgba(73, 88, 35, .18);
}

#rankingList {
  display: grid;
  gap: 10px;
  padding-left: 0;
  list-style: none;
}

#rankingList li {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 12px;
  border-bottom: 0;
  padding: 12px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 20px rgba(69, 85, 35, .10);
}

#rankingList li::before {
  content: counter(list-item);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #18402b;
  color: white;
  font-weight: 900;
}

#rankingList strong {
  color: #143d2a;
}

.more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--green);
  color: white;
  font-weight: 900;
  white-space: nowrap;
}

.section-note {
  margin: -4px 0 14px;
  color: rgba(20, 61, 42, .62);
}

.sample-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sample-card {
  grid-template-columns: 1fr;
}

.sample-card:nth-child(n+11) {
  display: none;
}

.news-list {
  margin-top: 12px;
}

.news-item {
  position: relative;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}

.news-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(36, 80, 47, .12);
}

.news-item::after {
  content: "＋";
  justify-self: end;
  color: var(--green);
  font-weight: 900;
}

.news-item.open::after {
  content: "−";
}

.news-detail {
  grid-column: 1 / -1;
  display: none;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(232,244,223,.62);
  color: #405540;
  line-height: 1.8;
}

.news-item.open .news-detail {
  display: block;
}

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

  .ranking-panel::before {
    inset: 10px;
  }

  #rankingList li {
    grid-template-columns: 36px 1fr;
  }

  #rankingList li::before {
    width: 32px;
    height: 32px;
  }
}

/* ===== v0.10 refinements ===== */
.intro-card h2 br {
  display: block;
}

.rank-number {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #18402b;
  color: white;
  font-weight: 900;
}

#rankingList li::before {
  content: none;
}

.news-more {
  width: fit-content;
  margin-top: 16px;
}

.sample-card .hidden-in-public,
.records-card .hidden-in-public {
  display: none !important;
}

/* ===== v0.11 quick link cards ===== */
.quick-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.quick-link {
  position: relative;
  min-height: 132px;
  padding: 24px 24px 22px;
  border-radius: 30px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid rgba(31, 107, 67, .14);
  box-shadow: var(--shadow);
  background: rgba(255,253,245,.9);
  transition: transform .16s ease, box-shadow .16s ease;
}

.quick-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 70px rgba(36, 80, 47, .22);
}

.quick-link::after {
  content: "→";
  position: absolute;
  right: 22px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  color: var(--green);
  font-weight: 900;
  font-size: 20px;
}

.quick-link span {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  color: rgba(20, 61, 42, .62);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.quick-link strong {
  display: block;
  color: var(--green);
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
}

.quick-link small {
  display: block;
  margin-top: 8px;
  color: rgba(20, 61, 42, .68);
  font-weight: 800;
}

.map-link {
  background:
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.74), transparent 24%),
    linear-gradient(135deg, #e7f5dd, #b9dfa1);
}

.records-link {
  background:
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.74), transparent 24%),
    linear-gradient(135deg, #fff3c8, #f2c94c);
}

.zukan-link {
  background:
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.74), transparent 24%),
    linear-gradient(135deg, #f5efe0, #d7c3a0);
}

@media (max-width: 760px) {
  .quick-links {
    grid-template-columns: 1fr;
  }

  .quick-link {
    min-height: 112px;
  }
}

/* ===== v0.12 stat link cards ===== */
.stat-links .quick-link {
  min-height: 142px;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.stat-links .quick-link span {
  margin-bottom: 8px;
  color: rgba(20, 61, 42, .72);
  font-size: 13px;
  letter-spacing: .12em;
}

.stat-links .quick-link strong {
  font-size: clamp(44px, 7vw, 72px);
  line-height: .95;
  letter-spacing: .02em;
}

.stat-links .quick-link small {
  margin-top: 14px;
  font-size: 14px;
  color: rgba(20, 61, 42, .78);
}

.stat-links .quick-link::after {
  right: 18px;
  bottom: 18px;
}

@media (max-width: 760px) {
  .stat-links .quick-link {
    min-height: 120px;
  }

  .stat-links .quick-link strong {
    font-size: clamp(40px, 13vw, 58px);
  }
}

/* ===== v0.15 species links ===== */
.species-link {
  color: var(--green);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.participation-card {
  margin: 0 0 18px;
  padding: 24px;
  border-radius: 30px;
  background: rgba(255,253,245,.92);
  border: 1px solid rgba(31,107,67,.14);
  box-shadow: var(--shadow);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  align-items: center;
}
.participation-card h2 { margin: .1em 0 .25em; color: var(--green); font-size: clamp(26px, 4vw, 44px); }
.participation-card p { color: #405540; line-height: 1.85; }
@media(max-width: 760px) { .participation-card { display: grid; } }

.participation-card .button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.participation-card .button-row a { white-space: nowrap; }
@media(max-width: 760px) { .participation-card .button-row { justify-content: flex-start; } }


.tardigrade-card h2 {
  margin: .1em 0 .25em;
  color: var(--green);
  font-size: clamp(30px, 4.5vw, 50px);
}
.tardigrade-card p {
  color: #405540;
  line-height: 1.85;
}
.tardigrade-card .button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.tardigrade-card .button-row a {
  white-space: nowrap;
}
@media(max-width: 760px) {
  .tardigrade-card {
    display: grid;
  }
  .tardigrade-card .button-row {
    justify-content: flex-start;
  }
}

.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: var(--green);
  border: 1px solid rgba(31,107,67,.18);
  font-weight: 900;
  text-decoration: none;
}

.hero-actions, .hero-buttons, .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.hero-actions a, .hero-buttons a, .cta-row a {
  text-decoration: none;
}
@media(max-width: 640px) {
  .hero-actions, .hero-buttons, .cta-row {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.tardigrade-card {
  margin: 0 0 18px;
  padding: 24px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(255,253,245,.96), rgba(237,247,223,.96));
  border: 1px solid rgba(31,107,67,.14);
  box-shadow: var(--shadow);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  align-items: center;
}
.tardigrade-card h2 {
  margin: .1em 0 .25em;
  color: var(--green);
  font-size: clamp(30px, 4.5vw, 50px);
}
.tardigrade-card p {
  color: #405540;
  line-height: 1.85;
}
.tardigrade-card .button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.tardigrade-card .button-row a {
  white-space: nowrap;
  text-decoration: none;
}
@media(max-width: 760px) {
  .tardigrade-card {
    display: grid;
  }
  .tardigrade-card .button-row {
    justify-content: flex-start;
  }
}

.hero-tardigrade-link {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}
.hero-tardigrade-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border-radius: 999px;
  background: #edf7df;
  color: var(--green);
  border: 1px solid rgba(31,107,67,.18);
  font-weight: 900;
  text-decoration: none;
}
.hero-tardigrade-link a:hover {
  transform: translateY(-1px);
}
.tardigrade-card a,
.participation-card a {
  text-decoration: none;
}
.tardigrade-card .ghost-button,
.participation-card .ghost-button,
.tardigrade-card .primary-button,
.participation-card .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* kumamuchizu_33: top hero balance */
.hero-card,
.hero-title-card,
.hero-panel,
.title-card {
  background: rgba(255, 253, 245, 0.78) !important;
  backdrop-filter: blur(4px);
}
.hero-card {
  max-width: min(920px, calc(100% - 32px));
  padding-top: clamp(24px, 4vw, 44px) !important;
  padding-bottom: clamp(24px, 4vw, 44px) !important;
}
.hero-tardigrade-link {
  margin-top: 10px;
}
.hero-tardigrade-link a {
  padding: 9px 16px;
  background: rgba(237,247,223,.82);
}
.site-footer {
  width: min(1080px, calc(100% - 28px));
  margin: 34px auto 0;
  padding: 18px 4px 4px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  color: rgba(20,61,42,.68);
}
.footer-links,
.footer-sns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(31,107,67,.12);
  color: var(--green);
  font-weight: 900;
  text-decoration: none;
  font-size: 13px;
}
.sns-dot {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(31,107,67,.12);
  color: var(--green);
  font-weight: 900;
  font-size: 12px;
}
@media(max-width: 700px) {
  .site-footer {
    display: grid;
    justify-content: start;
  }
}

/* kumamuchizu_34: consistent rounded buttons */
.primary-button,
.ghost-button,
.secondary,
.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration: none !important;
  box-sizing: border-box;
  line-height: 1.2;
}
.primary-button,
.primary {
  background: var(--green);
  color: #fff;
  border: 1px solid var(--green);
}
.ghost-button,
.secondary {
  background: rgba(255,255,255,.78);
  color: var(--green);
  border: 1px solid rgba(31,107,67,.18);
}
.button-row,
.join-button-grid {
  align-items: center;
}
.join-button-grid a,
.participation-card .button-row a,
.tardigrade-card .button-row a {
  text-decoration: none !important;
}

/* footer is part of the normal document flow, below the main content */
.site-footer {
  position: static !important;
  width: min(1080px, calc(100% - 28px));
  margin: 42px auto 26px !important;
  padding: 20px 0 0;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  color: rgba(20,61,42,.68);
  z-index: 1;
}
.footer-links,
.footer-sns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(31,107,67,.12);
  color: var(--green);
  font-weight: 900;
  text-decoration: none !important;
  font-size: 13px;
}
.sns-dot {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(31,107,67,.12);
  color: var(--green);
  font-weight: 900;
  font-size: 12px;
}
.leaflet-control-attribution,
.map-credit,
.svg-credit {
  pointer-events: none;
}
@media(max-width: 700px) {
  .site-footer {
    display: grid;
    justify-content: start;
  }
}

/* kumamuchizu_35: common site navigation */
.site-nav {
  width: min(1120px, calc(100% - 28px));
  margin: 0 auto 18px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,253,245,.78);
  border: 1px solid rgba(31,107,67,.12);
  box-shadow: 0 10px 24px rgba(35,76,38,.10);
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 20;
}
.site-nav a {
  text-decoration: none !important;
}
.site-nav-brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 13px;
  border-radius: 999px;
  background: var(--green);
  color: white;
  font-weight: 900;
}
.site-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.site-nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--green);
  font-weight: 900;
  font-size: 13px;
}
.site-nav-links a:hover {
  background: #edf7df;
}
@media(max-width: 760px) {
  .site-nav {
    align-items: flex-start;
    border-radius: 24px;
    display: grid;
  }
  .site-nav-links {
    justify-content: flex-start;
  }
}

/* kumamuchizu_36: top page header/hero adjustment */
.top-page .site-nav {
  margin-top: 8px;
  margin-bottom: 0;
  padding: 7px 10px;
  background: rgba(255,253,245,.68);
  box-shadow: 0 8px 20px rgba(35,76,38,.08);
}
.top-page .site-nav-brand {
  padding: 8px 14px;
}
.top-page .site-nav-links a {
  padding: 7px 9px;
  font-size: 12.5px;
}
.top-page .hero-card,
.top-page .hero-title-card,
.top-page .hero-panel,
.top-page .title-card {
  background: rgba(255,253,245,.64) !important;
  backdrop-filter: blur(3px);
}
.top-page .hero-card {
  max-width: min(840px, calc(100% - 36px)) !important;
  padding-top: clamp(18px, 3vw, 32px) !important;
  padding-bottom: clamp(18px, 3vw, 32px) !important;
}
.top-page .hero-card h1,
.top-page .hero-title-card h1,
.top-page .hero-panel h1,
.top-page .title-card h1 {
  font-size: clamp(58px, 8vw, 116px) !important;
  line-height: .92;
}
.top-page .hero-tardigrade-link {
  margin-top: 8px;
}
.top-page .hero-tardigrade-link a {
  min-height: 40px;
  padding: 8px 16px;
}
@media(max-width: 760px) {
  .top-page .site-nav {
    margin-top: 8px;
    border-radius: 24px;
  }
}

/* kumamuchizu_38: corrected top hero motion
   The previous extra translate pushed the tardigrade into the sea.
   This version changes the walk animation endpoint itself and keeps the title card fade-only. */
.top-page .hero,
.top-page .hero-section,
.top-page .top-hero {
  min-height: calc(100vh - 84px);
  padding-top: clamp(4px, 1.4vh, 18px) !important;
  align-items: start !important;
}
.top-page .title-card {
  top: 62.5% !important;
  transform: translate(-50%, -50%) !important;
  width: min(88vw, 665px);
  padding-top: clamp(16px, 2.3vw, 24px) !important;
  padding-bottom: clamp(16px, 2.3vw, 22px) !important;
  background: linear-gradient(180deg, rgba(255,253,245,.72), rgba(255,253,245,.48)) !important;
  animation: fadeTitleOnly 1s ease 6.05s forwards !important;
}
.top-page .title-card h1 {
  font-size: clamp(56px, 7.8vw, 104px) !important;
  line-height: .92;
}
.top-page .project-name {
  margin-bottom: 2px;
}
.top-page .subtitle {
  margin-top: 0;
}
.top-page .actions {
  margin-top: 12px;
}
.top-page .hero-tardigrade-link {
  margin-top: 8px;
}
.top-page .hero-tardigrade-link a {
  min-height: 38px;
  padding: 8px 15px;
}

/* Keep the final tardigrade on Hokkaido/northern Japan, not offshore. */
@keyframes walkOnMap {
  0%   { left: 34%; top: 73.5%; transform: translate(-50%, -50%) rotate(-32deg) scale(.95); }
  50%  { left: 51%; top: 56%;   transform: translate(-50%, -50%) rotate(-24deg) scale(1.02); }
  100% { left: 62.5%; top: 31.5%; transform: translate(-50%, -50%) rotate(8deg) scale(1.08); }
}
.top-page .speech {
  left: 69%;
  top: 32%;
}

/* Fade only; no slide-in from lower left. */
@keyframes fadeTitleOnly {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Smartphone-first target: compact title, fade-only, character kept above title card. */
@media(max-width: 700px) {
  .top-page .site-nav {
    margin-bottom: 6px;
  }
  .top-page .hero,
  .top-page .hero-section,
  .top-page .top-hero {
    min-height: calc(100vh - 76px);
    padding-top: 4px !important;
  }
  .top-page .title-card {
    top: 64% !important;
    width: min(92vw, 420px);
    transform: translate(-50%, -50%) !important;
    animation: fadeTitleOnly 1s ease 6.05s forwards !important;
  }
  .top-page .title-card h1 {
    font-size: clamp(42px, 17vw, 72px) !important;
  }
  @keyframes walkOnMap {
    0%   { left: 34%; top: 73.5%; transform: translate(-50%, -50%) rotate(-32deg) scale(.95); }
    50%  { left: 50%; top: 55%;   transform: translate(-50%, -50%) rotate(-24deg) scale(1.02); }
    100% { left: 62%; top: 30%; transform: translate(-50%, -50%) rotate(8deg) scale(1.02); }
  }
  .top-page .speech {
    left: 60%;
    top: 28%;
  }
}

/* kumamuchizu_39: speech bubble moved to upper right */
.top-page .speech,
.top-page .speech-bubble,
.top-page .bubble {
  left: 77% !important;
  top: 24% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 7;
}

/* keep speech bubble above the title card area, especially on desktop */
.top-page .title-card {
  z-index: 6;
}

@media(max-width: 700px) {
  .top-page .speech,
  .top-page .speech-bubble,
  .top-page .bubble {
    left: 70% !important;
    top: 22% !important;
    transform: translate(-50%, -50%) scale(.86) !important;
  }
}

/* kumamuchizu_40: fixed two-line speech bubble text */
.top-page .speech,
.top-page .speech-bubble,
.top-page .bubble {
  white-space: normal;
  line-height: 1.18;
  text-align: center;
  background: url("./assets/hero/speech-bubble-v200.png") center / contain no-repeat;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: clamp(160px, 18vw, 260px);
  aspect-ratio: 4 / 3;
  font-family: "Yomogi", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2.8vw, 30px) !important;
  display: block;
}
.top-page .speech .speech-text,
.top-page .speech-bubble .speech-text,
.top-page .bubble .speech-text {
  left: 52%;
  top: 45%;
  width: 68%;
  margin: 0;
  letter-spacing: -0.02em;
  position: absolute;
  transform: translate(-50%, -50%);
}
.top-page .speech br,
.top-page .speech-bubble br,
.top-page .bubble br {
  display: block;
}

/* kumamuchizu_41: contact page and contact buttons */
.site-nav-links a.contact-nav-link {
  background: var(--green);
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(31,107,67,.16);
}
.site-nav-links a.contact-nav-link:hover {
  background: #145a35;
}
.site-footer {
  width: min(1120px, calc(100% - 28px));
  margin: 28px auto 42px;
  padding: 14px;
  border-radius: 28px;
  background: rgba(255,253,245,.78);
  border: 1px solid rgba(31,107,67,.12);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.site-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 13px;
  border-radius: 999px;
  background: #edf7df;
  color: var(--green);
  border: 1px solid rgba(31,107,67,.12);
  font-weight: 900;
  text-decoration: none !important;
}
.site-footer a[href="./contact.html"] {
  background: var(--green);
  color: white;
}

/* kumamuchizu_42: teacher feedback updates */
.role-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
  margin-top: 16px;
}
.role-card {
  padding: 18px;
  border-radius: 24px;
  background: #edf7df;
  border: 1px solid rgba(31,107,67,.14);
  color: #405540;
  line-height: 1.75;
}
.role-card b {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--green);
  color: white;
  margin-bottom: 10px;
}
.role-card strong {
  display: block;
  color: var(--green);
  font-size: 20px;
  margin-bottom: 6px;
}
.role-arrow {
  display: grid;
  place-items: center;
  color: var(--green);
  font-size: 30px;
  font-weight: 900;
}
.taxon-visuals {
  display: grid;
  gap: 12px;
}
.taxon-mini-map {
  border-radius: 24px;
  background: #edf7df;
  border: 1px solid rgba(31,107,67,.14);
  padding: 12px;
}
.mini-map-title {
  color: var(--green);
  font-weight: 900;
  margin-bottom: 8px;
}
.mini-map-canvas {
  position: relative;
  height: 150px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 67% 22%, rgba(31,107,67,.18) 0 10%, transparent 11%),
    radial-gradient(circle at 58% 43%, rgba(31,107,67,.18) 0 16%, transparent 17%),
    radial-gradient(circle at 48% 66%, rgba(31,107,67,.14) 0 18%, transparent 19%),
    linear-gradient(135deg, rgba(255,253,245,.92), rgba(214,236,185,.74));
  overflow: hidden;
}
.mini-map-point {
  position: absolute;
  width: 13px;
  height: 13px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid #fffdf5;
  box-shadow: 0 4px 10px rgba(31,107,67,.28);
}
.taxon-mini-map p {
  margin: 8px 0 0;
  color: #405540;
  font-size: 13px;
  line-height: 1.6;
}
@media(max-width: 900px) {
  .role-diagram {
    grid-template-columns: 1fr;
  }
  .role-arrow {
    transform: rotate(90deg);
    min-height: 24px;
  }
}

/* kumamuchizu_43: layout/text restructuring */
.top-page .intro-actions,
.top-page .feature-grid,
.top-page .quick-links,
.top-page .next-actions,
.top-page .link-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.top-page .intro-actions > *,
.top-page .feature-grid > *,
.top-page .quick-links > *,
.top-page .next-actions > *,
.top-page .link-card-grid > * {
  min-height: 210px;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.media-placeholder {
  margin-top: 16px;
  min-height: 220px;
  border-radius: 28px;
  border: 2px dashed rgba(31,107,67,.28);
  background: rgba(237,247,223,.72);
  display: grid;
  place-items: center;
  text-align: center;
  color: #405540;
  padding: 18px;
}
.media-placeholder strong {
  display: block;
  color: var(--green);
  font-size: 22px;
  margin-bottom: 6px;
}
.join-cta {
  margin: 18px 0;
  padding: 22px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(31,107,67,.96), rgba(105,160,75,.92));
  color: white;
  box-shadow: 0 18px 42px rgba(31,107,67,.18);
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.join-cta p {
  margin: 0;
  font-weight: 900;
  line-height: 1.7;
}
.join-form-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  padding: 13px 20px;
  border-radius: 999px;
  background: #fffdf5;
  color: var(--green);
  font-weight: 900;
  text-decoration: none !important;
}
.four-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flow-card .kicker {
  margin-bottom: 4px;
}
.citizen-step {
  border-top: 8px solid #6aa04b;
}
.researcher-step {
  border-top: 8px solid var(--green);
}
.taxon-real-map-wrap {
  border-radius: 24px;
  background: #edf7df;
  border: 1px solid rgba(31,107,67,.14);
  padding: 12px;
}
.taxon-real-map {
  height: 190px;
  border-radius: 18px;
  overflow: hidden;
  background: #dfead4;
}
.taxon-real-map-wrap p {
  margin: 8px 0 0;
  color: #405540;
  font-size: 13px;
  line-height: 1.6;
}
@media(max-width: 900px) {
  .four-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .join-cta {
    display: grid;
  }
}
@media(max-width: 680px) {
  .top-page .intro-actions,
  .top-page .feature-grid,
  .top-page .quick-links,
  .top-page .next-actions,
  .top-page .link-card-grid,
  .four-steps {
    grid-template-columns: 1fr;
  }
  .top-page .intro-actions > *,
  .top-page .feature-grid > *,
  .top-page .quick-links > *,
  .top-page .next-actions > *,
  .top-page .link-card-grid > * {
    aspect-ratio: auto;
    min-height: 150px;
  }
}

/* kumamuchizu_44: corrections after visual test */
/* Stats must remain horizontal and rectangular, not square. */
.top-page .stats,
.top-page .stats-grid,
.top-page .number-grid,
.top-page .metric-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
.top-page .stats > *,
.top-page .stats-grid > *,
.top-page .number-grid > *,
.top-page .metric-grid > * {
  aspect-ratio: auto !important;
  min-height: auto !important;
}

/* Only the intro cards such as クマムシとは / 採集に参加する should be square-ish. */
.top-page .top-square-links,
.top-page .top-square-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 18px;
}
.top-page .top-square-links > *,
.top-page .top-square-card {
  aspect-ratio: 1 / 1;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Do not let the old broad selector make every feature/quick link square. */
.top-page .feature-grid:not(.top-square-links) > *,
.top-page .quick-links:not(.top-square-links) > *,
.top-page .intro-actions:not(.top-square-links) > *,
.top-page .next-actions:not(.top-square-links) > *,
.top-page .link-card-grid:not(.top-square-links) > * {
  aspect-ratio: auto !important;
  min-height: auto !important;
}

/* Restore spacing between tardigrade-page cards. */
.tardigrade-page .about-grid,
.tardigrade-page .tardigrade-grid {
  gap: 28px !important;
}
.tardigrade-page .panel {
  margin-bottom: 0;
}

/* Keep participate design, but reserve right side for illustrations. */
.participate-page .flow-card {
  position: relative;
  min-height: 230px;
  padding-right: min(38%, 220px);
}
.step-illustration {
  position: absolute;
  right: 18px;
  top: 18px;
  bottom: 18px;
  width: min(32%, 180px);
  border-radius: 22px;
  border: 2px dashed rgba(31,107,67,.24);
  background: rgba(237,247,223,.72);
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(31,107,67,.72);
  font-weight: 900;
  padding: 10px;
}

/* Real maps in zukan must have guaranteed height and visible fallback. */
.taxon-real-map-wrap {
  border-radius: 24px;
  background: #edf7df;
  border: 1px solid rgba(31,107,67,.14);
  padding: 12px;
}
.taxon-real-map {
  display: block !important;
  width: 100%;
  height: 240px !important;
  min-height: 240px !important;
  border-radius: 18px;
  overflow: hidden;
  background: #dfead4;
  position: relative;
  z-index: 0;
}
.taxon-real-map .leaflet-container,
.leaflet-container.taxon-real-map {
  height: 240px !important;
}
.map-loading {
  height: 100%;
  display: grid;
  place-items: center;
  color: #405540;
  font-weight: 900;
  text-align: center;
  padding: 18px;
}
@media(max-width: 760px) {
  .top-page .stats,
  .top-page .stats-grid,
  .top-page .number-grid,
  .top-page .metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .top-page .top-square-links,
  .top-page .top-square-card {
    grid-template-columns: 1fr;
  }
  .top-page .top-square-links > *,
  .top-page .top-square-card {
    aspect-ratio: auto;
    min-height: 170px;
  }
  .participate-page .flow-card {
    padding-right: 18px;
    padding-bottom: 150px;
  }
  .step-illustration {
    left: 18px;
    right: 18px;
    top: auto;
    height: 115px;
    width: auto;
  }
}

/* kumamuchizu_45: enforced corrections */
/* Top statistic cards: exactly four horizontal cards on desktop. */
.top-page .stat-links {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.top-page .stat-links .quick-link {
  aspect-ratio: auto !important;
  min-height: 142px !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  flex-direction: initial !important;
  justify-content: initial !important;
}

/* Only these two home cards should be square-ish and side by side. */
.home-duo-cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}
.home-duo-cards .tardigrade-card,
.home-duo-cards .participation-card {
  margin: 0 !important;
  aspect-ratio: 1 / 1;
  min-height: 300px;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}
.home-duo-cards .button-row {
  justify-content: flex-start;
}

/* Keep tardigrade page spacing open. */
.tardigrade-page .about-grid,
.tardigrade-page .tardigrade-grid {
  display: grid;
  gap: 30px !important;
}
.tardigrade-page .panel {
  margin: 0 !important;
}

/* Participation page: retain layout and reserve illustration area on the right. */
.participate-page .flow-card {
  position: relative !important;
  min-height: 230px;
  padding-right: min(38%, 220px) !important;
}
.participate-page .step-illustration {
  position: absolute;
  right: 18px;
  top: 18px;
  bottom: 18px;
  width: min(32%, 180px);
  border-radius: 22px;
  border: 2px dashed rgba(31,107,67,.24);
  background: rgba(237,247,223,.72);
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(31,107,67,.72);
  font-weight: 900;
  padding: 10px;
}

/* Zukan map: force visible map area. */
.taxon-real-map {
  display: block !important;
  width: 100% !important;
  height: 260px !important;
  min-height: 260px !important;
  border-radius: 18px;
  overflow: hidden;
  background: #dfead4;
}
.taxon-real-map .map-loading {
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  color: #405540;
  font-weight: 900;
}

@media(max-width: 900px) {
  .top-page .stat-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .home-duo-cards {
    grid-template-columns: 1fr !important;
  }
  .home-duo-cards .tardigrade-card,
  .home-duo-cards .participation-card {
    aspect-ratio: auto;
    min-height: 190px;
  }
}
@media(max-width: 760px) {
  .participate-page .flow-card {
    padding-right: 18px !important;
    padding-bottom: 150px !important;
  }
  .participate-page .step-illustration {
    left: 18px;
    right: 18px;
    top: auto;
    height: 115px;
    width: auto;
  }
}

/* kumamuchizu_46: enforce final requested layout */
/* Stats: four cards, participant card is not a link but same visual. */
.top-page .stat-links {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.top-page .stat-links .quick-link,
.top-page .stat-links .stat-card-static {
  aspect-ratio: auto !important;
  min-height: 142px !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  justify-content: initial !important;
  cursor: default;
}
.top-page .stat-links a.quick-link {
  cursor: pointer;
}

/* Bottom two cards: horizontal rectangles, not tall squares. */
.home-duo-cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}
.home-duo-cards .tardigrade-card,
.home-duo-cards .participation-card {
  margin: 0 !important;
  aspect-ratio: auto !important;
  min-height: 240px !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr auto !important;
}
.home-duo-cards .button-row {
  align-self: end;
  justify-content: flex-start;
}

/* Tardigrade page: all project information lives here, with clear gaps. */
.tardigrade-page .about-grid,
.tardigrade-page .tardigrade-grid {
  display: grid;
  gap: 32px !important;
}
.tardigrade-page .panel {
  margin: 0 !important;
}

/* Participation page: reserve illustration area without changing major card style. */
.participate-page .flow-card {
  position: relative !important;
  min-height: 230px;
  padding-right: min(38%, 220px) !important;
}
.participate-page .step-illustration {
  position: absolute;
  right: 18px;
  top: 18px;
  bottom: 18px;
  width: min(32%, 180px);
  border-radius: 22px;
  border: 2px dashed rgba(31,107,67,.24);
  background: rgba(237,247,223,.72);
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(31,107,67,.72);
  font-weight: 900;
  padding: 10px;
}

@media(max-width: 900px) {
  .top-page .stat-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .home-duo-cards {
    grid-template-columns: 1fr !important;
  }
  .home-duo-cards .tardigrade-card,
  .home-duo-cards .participation-card {
    min-height: 190px !important;
  }
}
@media(max-width: 760px) {
  .participate-page .flow-card {
    padding-right: 18px !important;
    padding-bottom: 150px !important;
  }
  .participate-page .step-illustration {
    left: 18px;
    right: 18px;
    top: auto;
    height: 115px;
    width: auto;
  }
}

/* kumamuchizu_47: v42-like tardigrade page and top card cleanup */
.home-duo-cards .participation-card .button-row a[href="./tardigrade.html"] {
  display: none !important;
}

.tardigrade-v42 {
  width: min(1120px, calc(100% - 28px));
  margin: 0 auto;
}
.tardigrade-v42 .tardi-hero-card,
.tardigrade-v42 .tardi-wide-panel,
.tardigrade-v42 .tardi-join-panel {
  border-radius: 34px;
  background: rgba(255,253,245,.90);
  border: 1px solid rgba(31,107,67,.14);
  box-shadow: var(--shadow);
}
.tardigrade-v42 .tardi-hero-card {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: stretch;
  padding: clamp(24px, 4vw, 42px);
  margin: 18px 0 26px;
}
.tardigrade-v42 .tardi-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tardigrade-v42 .tardi-hero-text h1 {
  margin: .1em 0 .28em;
  font-size: clamp(54px, 8vw, 104px);
  color: var(--green);
  line-height: .95;
}
.tardigrade-v42 .tardi-hero-text p {
  line-height: 1.9;
  color: #405540;
}
.tardigrade-v42 .tardi-hero-visual {
  min-height: 280px;
  border-radius: 28px;
  background: linear-gradient(135deg, #edf7df, #fff4b8);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.tardi-illustration {
  position: relative;
  width: min(320px, 72%);
  height: 130px;
  border-radius: 80px 90px 70px 70px;
  background: rgba(142,185,111,.42);
  border: 3px solid rgba(31,107,67,.28);
}
.tardi-illustration::before {
  content: "";
  position: absolute;
  left: 16%;
  top: 18%;
  width: 64%;
  height: 64%;
  border-radius: 50%;
  border-left: 7px solid rgba(31,107,67,.16);
  border-right: 7px solid rgba(31,107,67,.10);
}
.tardi-illustration .eye {
  position: absolute;
  right: 18%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(31,58,35,.72);
}
.tardi-illustration .eye1 { top: 36px; }
.tardi-illustration .eye2 { top: 68px; }
.tardi-illustration .leg {
  position: absolute;
  bottom: -30px;
  width: 24px;
  height: 42px;
  border-radius: 0 0 12px 12px;
  border: 4px solid rgba(31,107,67,.28);
  border-top: 0;
}
.tardi-illustration .leg1 { left: 18%; }
.tardi-illustration .leg2 { left: 36%; }
.tardi-illustration .leg3 { left: 55%; }
.tardi-illustration .leg4 { left: 74%; }

.tardigrade-v42 .tardi-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 26px;
}
.tardigrade-v42 .mini-panel {
  border-radius: 26px;
  background: rgba(255,253,245,.90);
  border: 1px solid rgba(31,107,67,.14);
  padding: 22px;
  box-shadow: 0 12px 28px rgba(35,76,38,.08);
}
.tardigrade-v42 .mini-panel h2 {
  color: var(--green);
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: 1.25;
}
.tardigrade-v42 .mini-panel p,
.tardigrade-v42 .tardi-wide-panel p,
.tardigrade-v42 .tardi-join-panel p {
  line-height: 1.85;
  color: #405540;
}
.tardigrade-v42 .tardi-wide-panel {
  margin: 0 0 28px;
  padding: clamp(24px, 4vw, 38px);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 24px;
  align-items: start;
}
.tardigrade-v42 .tardi-wide-panel h2,
.tardigrade-v42 .tardi-join-panel h2 {
  color: var(--green);
  font-size: clamp(32px, 5vw, 62px);
  line-height: 1.12;
  margin: .1em 0 .35em;
}
.tardigrade-v42 .tun-media {
  min-height: 260px;
  margin: 0;
}
.tardigrade-v42 .tardi-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.tardigrade-v42 .tardi-join-panel {
  margin: 0 0 42px;
  padding: clamp(24px, 4vw, 38px);
}

@media(max-width: 900px) {
  .tardigrade-v42 .tardi-hero-card,
  .tardigrade-v42 .tardi-wide-panel {
    grid-template-columns: 1fr;
  }
  .tardigrade-v42 .tardi-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media(max-width: 620px) {
  .tardigrade-v42 .tardi-card-grid,
  .tardigrade-v42 .tardi-points {
    grid-template-columns: 1fr;
  }
}

/* kumamuchizu_48: top card buttons and revised tardigrade page */
/* Match button height in the two home cards. */
.home-duo-cards .button-row {
  min-height: 58px;
  align-items: center;
}
.home-duo-cards .button-row a {
  min-height: 52px;
  padding: 12px 22px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Remove the duplicate button if an older HTML fragment remains. */
.home-duo-cards .participation-card a[href="./tardigrade.html"] {
  display: none !important;
}

/* v48 tardigrade page */
.tardigrade-v48 {
  width: min(1120px, calc(100% - 28px));
  margin: 0 auto;
}
.tardigrade-v48 .tardi-hero-card,
.tardigrade-v48 .tardi-wide-panel,
.tardigrade-v48 .tardi-join-panel {
  border-radius: 34px;
  background: rgba(255,253,245,.90);
  border: 1px solid rgba(31,107,67,.14);
  box-shadow: var(--shadow);
}
.tardigrade-v48 .tardi-hero-card {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 28px;
  align-items: stretch;
  padding: clamp(24px, 4vw, 42px);
  margin: 18px 0 26px;
}
.tardigrade-v48 .tardi-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tardigrade-v48 .tardi-hero-text h1 {
  margin: .1em 0 .28em;
  font-size: clamp(54px, 8vw, 104px);
  color: var(--green);
  line-height: .95;
}
.tardigrade-v48 .tardi-hero-text p {
  line-height: 1.9;
  color: #405540;
}
.tardigrade-v48 .tardi-hero-visual {
  min-height: 280px;
  border-radius: 28px;
  background: linear-gradient(135deg, #edf7df, #fff4b8);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.tardigrade-v48 .tardi-three-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 28px;
}
.tardigrade-v48 .mini-panel {
  border-radius: 26px;
  background: rgba(255,253,245,.90);
  border: 1px solid rgba(31,107,67,.14);
  padding: 22px;
  box-shadow: 0 12px 28px rgba(35,76,38,.08);
}
.tardigrade-v48 .mini-panel h2 {
  color: var(--green);
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: 1.25;
}
.tardigrade-v48 .mini-panel p,
.tardigrade-v48 .tardi-wide-panel p,
.tardigrade-v48 .tardi-join-panel p {
  line-height: 1.85;
  color: #405540;
}
.tardigrade-v48 .tardi-wide-panel {
  margin: 0 0 28px;
  padding: clamp(24px, 4vw, 38px);
}
.tardigrade-v48 .cryptobiosis-panel {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 24px;
  align-items: start;
}
.tardigrade-v48 .tardi-wide-panel h2,
.tardigrade-v48 .tardi-join-panel h2 {
  color: var(--green);
  font-size: clamp(32px, 5vw, 62px);
  line-height: 1.12;
  margin: .1em 0 .35em;
}
.tardigrade-v48 .tun-media {
  min-height: 260px;
  margin: 0;
}
.tardigrade-v48 .knowledge-panel {
  display: block !important;
}
.tardigrade-v48 .knowledge-panel .tardi-points {
  display: block !important;
  margin-top: 18px;
}
.tardigrade-v48 .knowledge-panel .tardi-points p {
  margin: 0 0 10px;
  line-height: 1.9;
}
.tardigrade-v48 .workflow-panel {
  display: block !important;
}
.tardigrade-v48 .workflow-panel .role-diagram {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 22px;
  align-items: stretch;
}
.tardigrade-v48 .tardi-join-panel {
  margin: 0 0 42px;
  padding: clamp(24px, 4vw, 38px);
}

@media(max-width: 900px) {
  .tardigrade-v48 .tardi-hero-card,
  .tardigrade-v48 .cryptobiosis-panel {
    grid-template-columns: 1fr;
  }
  .tardigrade-v48 .tardi-three-cards {
    grid-template-columns: 1fr;
  }
  .tardigrade-v48 .workflow-panel .role-diagram {
    grid-template-columns: 1fr;
  }
  .tardigrade-v48 .workflow-panel .role-arrow {
    transform: rotate(90deg);
  }
}

/* kumamuchizu_49: precise fixes */
/* Align the button rows in the two top lower cards at the same vertical position. */
.home-duo-cards .tardigrade-card,
.home-duo-cards .participation-card {
  position: relative !important;
  padding-bottom: 104px !important;
}
.home-duo-cards .tardigrade-card .button-row,
.home-duo-cards .participation-card .button-row {
  position: absolute !important;
  left: clamp(22px, 3vw, 38px);
  right: clamp(22px, 3vw, 38px);
  bottom: 34px;
  min-height: 54px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.home-duo-cards .tardigrade-card .button-row a,
.home-duo-cards .participation-card .button-row a {
  min-height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Cryptobiosis panel: left text, right media, bottom table. */
.tardigrade-v48 .cryptobiosis-panel,
.tardigrade-v42 .cryptobiosis-panel,
.tardigrade-page .cryptobiosis-panel {
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(280px, 1.05fr) !important;
  gap: 24px !important;
  align-items: start !important;
}
.cryptobiosis-panel .tolerance-table-placeholder {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 18px;
  border-radius: 22px;
  background: #fff4b8;
  border: 1px solid rgba(31,107,67,.18);
}
.cryptobiosis-panel .tolerance-table-placeholder h3 {
  margin: 0 0 12px;
  color: var(--green);
  font-size: 22px;
}
.cryptobiosis-panel .tolerance-table-placeholder table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255,253,245,.86);
}
.cryptobiosis-panel .tolerance-table-placeholder th,
.cryptobiosis-panel .tolerance-table-placeholder td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(31,107,67,.12);
  text-align: left;
  line-height: 1.6;
}
.cryptobiosis-panel .tolerance-table-placeholder th {
  color: var(--green);
  background: rgba(237,247,223,.85);
}
.cryptobiosis-panel .tolerance-table-placeholder tr:last-child td {
  border-bottom: 0;
}

@media(max-width: 900px) {
  .tardigrade-v48 .cryptobiosis-panel,
  .tardigrade-v42 .cryptobiosis-panel,
  .tardigrade-page .cryptobiosis-panel {
    grid-template-columns: 1fr !important;
  }
  .cryptobiosis-panel .tolerance-table-placeholder {
    grid-column: auto;
  }
}

/* kumamuchizu_51: users and my page */
.users-summary,
.user-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.user-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.users-summary div,
.user-stat-grid div {
  border-radius: 24px;
  background: rgba(255,253,245,.90);
  border: 1px solid rgba(31,107,67,.14);
  padding: 20px;
  box-shadow: 0 12px 28px rgba(35,76,38,.08);
}
.users-summary span,
.user-stat-grid span {
  display: block;
  color: #405540;
  font-weight: 800;
}
.users-summary strong,
.user-stat-grid strong {
  display: block;
  color: var(--green);
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1;
  margin-top: 8px;
}
.users-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 20px 0 42px;
}
.user-card {
  border-radius: 28px;
  background: rgba(255,253,245,.92);
  border: 1px solid rgba(31,107,67,.14);
  padding: 22px;
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.user-card:hover {
  transform: translateY(-2px);
  border-color: rgba(31,107,67,.28);
}
.user-card:focus-visible {
  outline: 3px solid rgba(31,107,67,.3);
  outline-offset: 3px;
}
.user-card h2 {
  color: var(--green);
  font-size: clamp(26px, 4vw, 44px);
  margin: .1em 0 .4em;
}
.user-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.user-card-stats div {
  border-radius: 18px;
  background: #edf7df;
  padding: 10px;
}
.user-card-stats strong {
  display: block;
  color: var(--green);
  font-size: 28px;
}
.user-card-stats span {
  color: #405540;
  font-weight: 800;
}
.badge-list,
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.badge,
.tag {
  display: inline-flex;
  border-radius: 999px;
  padding: 7px 11px;
  font-weight: 900;
  line-height: 1;
}
.badge {
  background: #ffe58a;
  color: #4f4212;
}
.tag {
  background: #edf7df;
  color: var(--green);
  border: 1px solid rgba(31,107,67,.12);
}
.muted {
  color: #6f7f6d;
}
.user-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 18px 0;
}
.user-map {
  height: 360px;
  min-height: 360px;
  border-radius: 24px;
  overflow: hidden;
  background: #dfead4;
}
.user-record-list {
  display: grid;
  gap: 10px;
}
.record-mini-card {
  border-radius: 18px;
  background: #edf7df;
  border: 1px solid rgba(31,107,67,.12);
  padding: 12px 14px;
}
.record-mini-card strong,
.record-mini-card span {
  display: block;
  line-height: 1.65;
}
@media(max-width: 900px) {
  .users-grid,
  .users-summary,
  .user-stat-grid,
  .user-two-column {
    grid-template-columns: 1fr;
  }
}

/* kumamuchizu_52: user pages spacing and map behavior */
.users-page,
.user-page {
  width: min(1180px, calc(100% - 36px));
}
.users-summary {
  gap: 18px !important;
  margin: 22px 0 28px !important;
}
.users-grid {
  grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
  gap: 24px !important;
}
.user-card {
  padding: 26px !important;
  min-height: 320px;
  display: flex;
  flex-direction: column;
}
.user-card-stats {
  gap: 12px !important;
}
.user-card-stats div {
  padding: 14px 12px !important;
}
.user-card .badge-list,
.user-card .tag-list {
  margin: 14px 0 !important;
}
.user-stat-grid {
  gap: 18px !important;
  margin: 22px 0 28px !important;
}
.user-two-column {
  gap: 24px !important;
  margin: 24px 0 !important;
}
.user-page .panel {
  margin-bottom: 24px;
}
.user-map {
  height: 420px !important;
  min-height: 420px !important;
  cursor: grab;
}
.user-map:active {
  cursor: grabbing;
}
@media(max-width: 980px) {
  .users-grid {
    grid-template-columns: 1fr !important;
  }
}
@media(max-width: 760px) {
  .users-page,
  .user-page {
    width: min(100% - 24px, 1180px);
  }
  .users-summary,
  .user-stat-grid,
  .user-two-column {
    grid-template-columns: 1fr !important;
  }
}

/* kumamuchizu_53: center user pages like the other pages */
.users-page,
.user-page {
  width: min(1180px, calc(100% - 36px)) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.users-page .page-head,
.user-page .page-head {
  width: 100%;
}
.users-grid {
  justify-content: center !important;
}
@media(max-width: 760px) {
  .users-page,
  .user-page {
    width: min(100% - 24px, 1180px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* kumamuchizu_54: embedded media display */
.media-placeholder.has-media {
  display: block !important;
  padding: 12px !important;
  background: rgba(255,253,245,.92);
}
.embedded-media {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: 18px;
  background: #101510;
  display: block;
}
.media-caption {
  margin: 10px 4px 0;
  color: #405540;
  font-weight: 800;
  line-height: 1.7;
}
.media-credit,
.media-file-hint {
  margin: 4px 4px 0;
  color: #6f7f6d;
  font-size: .88rem;
  line-height: 1.5;
}
.media-file-hint {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  word-break: break-all;
}
.media-missing {
  min-height: 160px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #edf7df;
  color: var(--green);
  font-weight: 900;
}

/* kumamuchizu_55: hide media file path from public display */
.media-file-hint {
  display: none !important;
}

/* kumamuchizu_56: KML / Google Earth data */
.kml-layer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 9px 13px;
  border-radius: 999px;
  background: #efe7ff;
  color: #4d3578;
  font-weight: 900;
  border: 1px solid rgba(77,53,120,.18);
}
.kml-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 22px 0 42px;
}
.kml-card {
  border-radius: 26px;
  background: rgba(255,253,245,.92);
  border: 1px solid rgba(77,53,120,.14);
  box-shadow: 0 12px 28px rgba(35,76,38,.08);
  padding: 22px;
}
.kml-card h2 {
  color: var(--green);
  font-size: clamp(24px, 3vw, 38px);
  margin: .1em 0 .35em;
}
.kml-card p {
  color: #405540;
  line-height: 1.7;
}
@media(max-width: 860px) {
  .kml-list {
    grid-template-columns: 1fr;
  }
}

/* kumamuchizu_57: KML in records, map detail, and back button */
.kml-records-section {
  margin-top: 28px;
}
.kml-record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.kml-record-card {
  border-color: rgba(77,53,120,.18) !important;
}
.kml-record-card h3 {
  color: var(--green);
  font-size: clamp(22px, 3vw, 34px);
  margin: .1em 0 .35em;
}
.record-sub {
  color: #405540;
  line-height: 1.7;
}
.map-detail-panel {
  width: min(1120px, calc(100% - 28px));
  margin: 22px auto 42px;
}
.map-detail-card {
  border-radius: 28px;
  background: rgba(255,253,245,.94);
  border: 1px solid rgba(31,107,67,.14);
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 34px);
}
.map-detail-card h2 {
  color: var(--green);
  font-size: clamp(30px, 5vw, 54px);
  margin: .1em 0 .35em;
}
.popup-record-button {
  margin-top: 8px;
  border: 0;
  border-radius: 999px;
  background: #1f6b43;
  color: white;
  font-weight: 900;
  padding: 7px 12px;
  cursor: pointer;
}
@media(max-width: 860px) {
  .kml-record-grid {
    grid-template-columns: 1fr;
  }
}

/* kumamuchizu_58: teacher data mixed into normal records with distinct color */
.teacher-record-card {
  background: linear-gradient(180deg, #fbf6ff 0%, #fffdf5 100%) !important;
  border: 2px solid rgba(107,79,155,.28) !important;
  box-shadow: 0 14px 30px rgba(77,53,120,.10) !important;
}
.teacher-record-card .kicker {
  color: #6b4f9b !important;
}
.teacher-record-card h3 {
  color: #4d3578 !important;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.25;
}
.teacher-record-card .tag {
  background: #efe7ff;
  color: #4d3578;
  border-color: rgba(77,53,120,.16);
}
.teacher-data-note {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 18px;
  background: #fbf6ff;
  color: #4d3578;
  font-weight: 800;
  border: 1px solid rgba(77,53,120,.16);
}
.kml-detail-card {
  background: linear-gradient(180deg, #fbf6ff 0%, #fffdf5 100%) !important;
  border-color: rgba(107,79,155,.28) !important;
}
.kml-detail-card h2 {
  color: #4d3578 !important;
}

/* kumamuchizu_62: teacher data uses existing map info area and zukan card format */
.map-with-info-slot {
  position: relative;
}
.teacher-map-info-slot {
  position: absolute;
  z-index: 700;
  top: 18px;
  right: 18px;
  width: min(380px, calc(100% - 36px));
  max-height: calc(100% - 36px);
  overflow: auto;
  border-radius: 24px;
  background: rgba(255,253,245,.96);
  border: 2px solid rgba(107,79,155,.28);
  box-shadow: 0 18px 42px rgba(44,34,68,.18);
  padding: 16px;
}
.teacher-map-info-card {
  background: linear-gradient(180deg, #fbf6ff 0%, #fffdf5 100%);
  border: 0;
  box-shadow: none;
  padding: 0;
}
.teacher-map-info-card h2 {
  color: #4d3578;
  font-size: clamp(24px, 3vw, 38px);
  margin: .1em 0 .35em;
}
.teacher-zukan-card {
  background: linear-gradient(180deg, #fbf6ff 0%, #fffdf5 100%) !important;
  border: 2px solid rgba(107,79,155,.28) !important;
  box-shadow: 0 14px 30px rgba(77,53,120,.10) !important;
}
.teacher-zukan-card .kicker,
.teacher-zukan-card h2 {
  color: #4d3578 !important;
}
.teacher-zukan-card .tag {
  background: #efe7ff;
  color: #4d3578;
  border-color: rgba(77,53,120,.16);
}
.teacher-zukan-mini-map {
  min-height: 160px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 30% 30%, rgba(180,151,255,.34), transparent 35%),
    linear-gradient(135deg, #efe7ff, #fffdf5);
  border: 1px dashed rgba(107,79,155,.24);
}
.teacher-original-names {
  margin: 10px 0 14px;
  color: #405540;
}
.teacher-original-names summary {
  cursor: pointer;
  font-weight: 900;
  color: #4d3578;
}
.teacher-zukan-note {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 18px;
  background: #fbf6ff;
  color: #4d3578;
  font-weight: 800;
  border: 1px solid rgba(77,53,120,.16);
}
@media(max-width: 760px) {
  .teacher-map-info-slot {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    max-height: none;
    margin-top: 12px;
  }
}

/* kumamuchizu_63: use the normal record-view area, not a map overlay */
.teacher-map-info-slot {
  display: none !important;
}
.map-record-view {
  width: min(1120px, calc(100% - 28px));
  margin: 18px auto 28px;
}
.map-record-view .record-card,
.map-record-card {
  margin: 0;
}
.map-record-card h3 {
  color: #4d3578 !important;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.25;
}
.teacher-record-card .tag-list:empty {
  display: none;
}

/* kumamuchizu_64: teacher data integrated into existing map detail panel and normal zukan cards */
.teacher-detail-panel {
  background: linear-gradient(180deg, #fbf6ff 0%, #fffdf5 100%) !important;
  border: 2px solid rgba(107,79,155,.24) !important;
}
.teacher-detail-panel .kicker,
.teacher-detail-panel h2 {
  color: #4d3578 !important;
}
.teacher-detail-row b {
  color: #4d3578;
}
.teacher-mini-record {
  background: #fbf6ff !important;
  border-color: rgba(107,79,155,.18) !important;
}
.group-marker.teacher {
  background: #6b4f9b !important;
  color: #fff !important;
  border-color: #efe7ff !important;
}
.teacher-taxon-card {
  background: linear-gradient(180deg, #fbf6ff 0%, #fffdf5 100%) !important;
  border: 2px solid rgba(107,79,155,.24) !important;
}
.teacher-taxon-card .kicker,
.teacher-taxon-card h2 {
  color: #4d3578 !important;
}
.teacher-taxon-card .badge {
  background: #efe7ff;
  color: #4d3578;
}
.teacher-taxon-card .badge.rank {
  background: #6b4f9b;
  color: #fff;
}
.teacher-taxon-card .taxon-line,
.teacher-taxon-card .summary-grid div {
  background: #f3ecff;
}


/* kumamuchizu_83: user navigation and record link polish */
.page-back-button {
  align-self: start;
  white-space: nowrap;
}
.record-mini-link {
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.record-mini-link:hover,
.record-mini-link:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(35,76,38,.12);
  background: rgba(237,247,223,.96);
  outline: none;
}
.teacher-record-card {
  border-color: rgba(107,79,155,.32) !important;
  background: rgba(247,242,255,.92) !important;
}
.teacher-record-card .badge,
.teacher-record-card .tag {
  background: rgba(180,151,255,.22);
  color: #4f3a83;
}


/* kumamuchizu_84: paged cards and button-like text links */
.pager-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}
.pager-arrow {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(31,107,67,.16);
  background: rgba(255,255,255,.9);
  color: var(--green);
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(31,107,67,.10);
}
.pager-arrow:disabled {
  opacity: .35;
  cursor: default;
}
.pager-status {
  font-weight: 900;
  color: rgba(20,61,42,.62);
}
.paged-record-list {
  display: grid;
  gap: 10px;
}
.site-footer a,
.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: var(--green);
  border: 1px solid rgba(31,107,67,.18);
  font-weight: 900;
  text-decoration: none;
}
.species-link {
  display: inline;
  color: var(--green);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.teacher-record-card span:empty,
.taxon-card .mini-text:empty {
  display: none;
}


/* kumamuchizu_85: rounded font and final content-layout tuning */
body {
  letter-spacing: .01em;
}
.tardi-compact-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0;
}
.tardi-compact-card {
  padding: 20px 22px;
  border-radius: 28px;
  background: rgba(255,253,245,.92);
  border: 1px solid rgba(31,107,67,.14);
  box-shadow: var(--shadow);
  min-width: 0;
}
.tardi-compact-card h2 {
  font-size: clamp(22px, 2.8vw, 34px) !important;
  line-height: 1.2;
  margin: .12em 0 .45em;
}
.tardi-compact-card p {
  line-height: 1.75;
}
.tardi-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.tardi-info-card {
  position: relative;
  min-height: 190px;
  padding: 20px 132px 20px 20px;
  border-radius: 26px;
  background: rgba(255,253,245,.92);
  border: 1px solid rgba(31,107,67,.13);
  box-shadow: 0 16px 40px rgba(36,80,47,.10);
  overflow: hidden;
}
.tardi-info-card h2 {
  font-size: clamp(22px, 2.5vw, 30px) !important;
  margin: 0 0 10px;
  line-height: 1.2;
}
.tardi-info-card p {
  line-height: 1.75;
}
.tardi-illo-slot {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 96px;
  height: 120px;
  transform: translateY(-50%);
  border-radius: 28px;
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.82), transparent 28%),
    linear-gradient(145deg, rgba(226,243,215,.95), rgba(255,243,200,.9));
  border: 1px dashed rgba(31,107,67,.28);
  display: grid;
  place-items: center;
  color: rgba(31,107,67,.58);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}
.research-story-panel {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 20px;
  align-items: center;
}
.research-story-panel h2 {
  font-size: clamp(28px, 4vw, 46px);
}
.research-story-panel p {
  line-height: 1.9;
}
.research-illustration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.research-illo {
  min-height: 118px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 62% 28%, rgba(255,255,255,.86), transparent 28%),
    linear-gradient(135deg, rgba(237,247,223,.96), rgba(255,243,200,.92));
  border: 1px dashed rgba(31,107,67,.24);
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(31,107,67,.62);
  font-weight: 900;
  padding: 12px;
}
.tardi-short-video {
  margin-top: 14px;
}
.tardi-short-video video {
  width: 100%;
  max-height: 260px;
  border-radius: 22px;
  object-fit: cover;
}
@media(max-width: 980px) {
  .tardi-compact-row,
  .tardi-info-grid,
  .research-story-panel {
    grid-template-columns: 1fr;
  }
  .tardi-info-card {
    padding-right: 132px;
  }
}
@media(max-width: 560px) {
  .tardi-info-card {
    padding: 18px;
  }
  .tardi-illo-slot {
    position: static;
    transform: none;
    width: 100%;
    height: 90px;
    margin-top: 12px;
  }
}


/* kumamuchizu_86: fix over-rounded small text and restore tardigrade page card design */
body {
  font-family:
    "M PLUS Rounded 1c",
    "Zen Maru Gothic",
    "Hiragino Maru Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
  letter-spacing: 0;
}

/* 小さい文字は丸文字のつぶれを避ける */
.site-nav,
.site-nav-links a,
.site-nav-brand,
.kicker,
.badge,
.tag,
button,
input,
select,
textarea,
small,
.media-credit,
.media-caption,
.footer-links a,
.site-footer a {
  font-family: "Yu Gothic", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

.site-nav-links a {
  font-size: 12px;
  padding: 7px 9px;
}
.site-nav-brand {
  font-size: 13px;
}
.kicker {
  font-size: 13px;
  line-height: 1.35;
}

/* v86 tardigrade page */
.tardigrade-v86 {
  --card-bg: rgba(255,253,245,.92);
  --pale-bg: #edf7df;
  --yellow-bg: #fff3c8;
}

.tardigrade-v86 .tardi-top-row {
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  align-items: stretch;
  margin: 10px 0 20px;
}

.tardigrade-v86 .tardi-compact-card,
.tardigrade-v86 .tardi-info-card,
.tardigrade-v86 .tardi-wide-panel,
.tardigrade-v86 .tardi-join-panel {
  border-radius: 34px;
  background:
    radial-gradient(circle at 80% 14%, rgba(255,255,255,.78), transparent 24%),
    var(--card-bg);
  border: 1px solid rgba(31,107,67,.14);
  box-shadow: var(--shadow);
}

.tardigrade-v86 .about-card {
  padding: clamp(24px, 3.2vw, 38px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tardigrade-v86 .about-card h1 {
  margin: .06em 0 .22em;
  color: var(--green);
  font-size: clamp(46px, 6.2vw, 84px);
  line-height: .98;
}

.tardigrade-v86 .about-card p,
.tardigrade-v86 .tardi-compact-card p,
.tardigrade-v86 .tardi-info-card p,
.tardigrade-v86 .tardi-wide-panel p,
.tardigrade-v86 .tardi-join-panel p {
  color: #405540;
  line-height: 1.85;
}

.tardigrade-v86 .cryptobiosis-panel {
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  min-height: 520px;
}

.tardigrade-v86 .cryptobiosis-panel h2 {
  color: var(--green);
  font-size: clamp(30px, 4.3vw, 58px) !important;
  line-height: 1.12;
  margin: .05em 0 .3em;
}

.tardigrade-v86 .tardi-short-video {
  margin-top: 16px;
  flex: 1 1 auto;
  min-height: 320px;
  border-radius: 28px;
  overflow: hidden;
  background: #0c1711;
}

.tardigrade-v86 .tardi-short-video.has-media,
.tardigrade-v86 #tunMediaSlot.has-media {
  display: grid;
  align-content: stretch;
}

.tardigrade-v86 .tardi-short-video video,
.tardigrade-v86 #tunMediaSlot video {
  width: 100%;
  height: min(46vw, 420px);
  min-height: 320px;
  max-height: none;
  border-radius: 26px;
  object-fit: contain;
  background: #0c1711;
}

.tardigrade-v86 .tardi-short-video .media-caption,
.tardigrade-v86 .tardi-short-video .media-credit {
  margin-left: 4px;
}

.tardigrade-v86 .tardi-info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 24px;
}

.tardigrade-v86 .tardi-info-card {
  min-height: 220px;
  padding: 22px 138px 22px 22px;
  background:
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.85), transparent 26%),
    linear-gradient(135deg, rgba(237,247,223,.98), rgba(255,253,245,.92));
}

.tardigrade-v86 .tardi-info-card h2 {
  color: var(--green);
  font-size: clamp(23px, 2.5vw, 34px) !important;
  line-height: 1.2;
  margin: 0 0 10px;
}

.tardigrade-v86 .tardi-illo-slot {
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.88), transparent 28%),
    linear-gradient(145deg, rgba(226,243,215,.98), rgba(255,243,200,.94));
  border: 1px dashed rgba(31,107,67,.30);
}

.tardigrade-v86 .tardi-wide-panel {
  margin: 0 0 24px;
  padding: clamp(24px, 4vw, 38px);
  background:
    radial-gradient(circle at 82% 15%, rgba(255,255,255,.78), transparent 26%),
    rgba(255,253,245,.92);
}

.tardigrade-v86 .research-story-panel {
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
}

.tardigrade-v86 .research-story-panel h2,
.tardigrade-v86 .workflow-panel h2,
.tardigrade-v86 .tardi-join-panel h2 {
  color: var(--green);
  font-size: clamp(30px, 4.3vw, 58px);
  line-height: 1.12;
  margin: .08em 0 .35em;
}

.tardigrade-v86 .research-illo {
  background:
    radial-gradient(circle at 62% 28%, rgba(255,255,255,.88), transparent 28%),
    linear-gradient(135deg, rgba(237,247,223,.98), rgba(255,243,200,.94));
}

.tardigrade-v86 .workflow-panel .role-diagram {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 22px;
  align-items: stretch;
}

.tardigrade-v86 .tardi-join-panel {
  margin: 0 0 42px;
  padding: clamp(24px, 4vw, 38px);
}

@media(max-width: 980px) {
  .tardigrade-v86 .tardi-top-row,
  .tardigrade-v86 .tardi-info-grid,
  .tardigrade-v86 .research-story-panel,
  .tardigrade-v86 .workflow-panel .role-diagram {
    grid-template-columns: 1fr;
  }
  .tardigrade-v86 .workflow-panel .role-arrow {
    transform: rotate(90deg);
  }
}

@media(max-width: 560px) {
  .tardigrade-v86 .tardi-info-card {
    padding: 18px;
  }
  .tardigrade-v86 .tardi-illo-slot {
    position: static;
    transform: none;
    width: 100%;
    height: 90px;
    margin-top: 12px;
  }
  .tardigrade-v86 .tardi-short-video,
  .tardigrade-v86 .tardi-short-video video,
  .tardigrade-v86 #tunMediaSlot video {
    min-height: 240px;
    height: 260px;
  }
}


/* kumamuchizu_87: restore v85 hero, remove duplicate about card, make cryptobiosis wide */
.tardigrade-v87 {
  --card-bg: rgba(255,253,245,.92);
  --pale-bg: #edf7df;
  --yellow-bg: #fff3c8;
}

.tardigrade-v87 .tardi-hero-card,
.tardigrade-v87 .tardi-wide-panel,
.tardigrade-v87 .tardi-info-card,
.tardigrade-v87 .tardi-join-panel {
  border-radius: 34px;
  background:
    radial-gradient(circle at 80% 14%, rgba(255,255,255,.78), transparent 24%),
    var(--card-bg);
  border: 1px solid rgba(31,107,67,.14);
  box-shadow: var(--shadow);
}

.tardigrade-v87 .tardi-hero-card {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 28px;
  align-items: stretch;
  padding: clamp(24px, 4vw, 42px);
  margin: 18px 0 26px;
}

.tardigrade-v87 .tardi-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tardigrade-v87 .tardi-hero-text h1 {
  margin: .1em 0 .28em;
  font-size: clamp(54px, 8vw, 104px);
  color: var(--green);
  line-height: .95;
}

.tardigrade-v87 .tardi-hero-text p,
.tardigrade-v87 .cryptobiosis-wide-panel p,
.tardigrade-v87 .tardi-info-card p,
.tardigrade-v87 .tardi-wide-panel p,
.tardigrade-v87 .tardi-join-panel p {
  line-height: 1.85;
  color: #405540;
}

.tardigrade-v87 .tardi-hero-visual {
  min-height: 280px;
  border-radius: 28px;
  background: linear-gradient(135deg, #edf7df, #fff4b8);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.tardigrade-v87 .tardi-hero-visual.has-media {
  background: #0c1711;
  align-content: stretch;
}

.tardigrade-v87 .tardi-hero-visual video {
  width: 100%;
  height: min(34vw, 390px);
  min-height: 280px;
  border-radius: 26px;
  object-fit: contain;
  background: #0c1711;
}

.tardigrade-v87 .cryptobiosis-wide-panel {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(18px, 3vw, 30px);
  align-items: start;
  margin: 0 0 24px;
  padding: clamp(24px, 4vw, 38px);
  background:
    radial-gradient(circle at 82% 15%, rgba(255,255,255,.78), transparent 26%),
    rgba(255,253,245,.92);
}

.tardigrade-v87 .cryptobiosis-wide-panel h2,
.tardigrade-v87 .research-story-panel h2,
.tardigrade-v87 .workflow-panel h2,
.tardigrade-v87 .tardi-join-panel h2 {
  color: var(--green);
  font-size: clamp(30px, 4.3vw, 58px);
  line-height: 1.12;
  margin: .08em 0 .35em;
}

.tardigrade-v87 .cryptobiosis-video {
  margin: 0;
  min-height: 320px;
  border-radius: 28px;
  overflow: hidden;
  background: #0c1711;
}

.tardigrade-v87 .cryptobiosis-video.has-media,
.tardigrade-v87 #tunMediaSlot.has-media {
  display: grid;
  align-content: stretch;
}

.tardigrade-v87 .cryptobiosis-video video,
.tardigrade-v87 #tunMediaSlot video {
  width: 100%;
  height: min(42vw, 420px);
  min-height: 320px;
  max-height: none;
  border-radius: 26px;
  object-fit: contain;
  background: #0c1711;
}

.tardigrade-v87 .cryptobiosis-video .media-caption,
.tardigrade-v87 .cryptobiosis-video .media-credit,
.tardigrade-v87 .tardi-hero-visual .media-caption,
.tardigrade-v87 .tardi-hero-visual .media-credit {
  margin-left: 4px;
}

.tardigrade-v87 .tardi-info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 24px;
}

.tardigrade-v87 .tardi-info-card {
  min-height: 220px;
  padding: 22px 138px 22px 22px;
  background:
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.85), transparent 26%),
    linear-gradient(135deg, rgba(237,247,223,.98), rgba(255,253,245,.92));
}

.tardigrade-v87 .tardi-info-card h2 {
  color: var(--green);
  font-size: clamp(23px, 2.5vw, 34px) !important;
  line-height: 1.2;
  margin: 0 0 10px;
}

.tardigrade-v87 .tardi-illo-slot {
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.88), transparent 28%),
    linear-gradient(145deg, rgba(226,243,215,.98), rgba(255,243,200,.94));
  border: 1px dashed rgba(31,107,67,.30);
}

.tardigrade-v87 .tardi-wide-panel {
  margin: 0 0 24px;
  padding: clamp(24px, 4vw, 38px);
}

.tardigrade-v87 .research-story-panel {
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
}

.tardigrade-v87 .research-illo {
  background:
    radial-gradient(circle at 62% 28%, rgba(255,255,255,.88), transparent 28%),
    linear-gradient(135deg, rgba(237,247,223,.98), rgba(255,243,200,.94));
}

.tardigrade-v87 .workflow-panel .role-diagram {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 22px;
  align-items: stretch;
}

.tardigrade-v87 .tardi-join-panel {
  margin: 0 0 42px;
}

@media(max-width: 980px) {
  .tardigrade-v87 .tardi-hero-card,
  .tardigrade-v87 .cryptobiosis-wide-panel,
  .tardigrade-v87 .tardi-info-grid,
  .tardigrade-v87 .research-story-panel,
  .tardigrade-v87 .workflow-panel .role-diagram {
    grid-template-columns: 1fr;
  }
  .tardigrade-v87 .workflow-panel .role-arrow {
    transform: rotate(90deg);
  }
}

@media(max-width: 560px) {
  .tardigrade-v87 .tardi-info-card {
    padding: 18px;
  }
  .tardigrade-v87 .tardi-illo-slot {
    position: static;
    transform: none;
    width: 100%;
    height: 90px;
    margin-top: 12px;
  }
  .tardigrade-v87 .tardi-hero-visual video,
  .tardigrade-v87 .cryptobiosis-video,
  .tardigrade-v87 .cryptobiosis-video video,
  .tardigrade-v87 #tunMediaSlot video {
    min-height: 240px;
    height: 260px;
  }
}


/* kumamuchizu_88: match hero text/video scale to cryptobiosis and restore join panel padding */
.tardigrade-v88 .tardi-hero-card {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  padding: clamp(24px, 4vw, 38px);
  margin: 18px 0 24px;
}

.tardigrade-v88 .tardi-hero-text {
  justify-content: flex-start;
}

.tardigrade-v88 .tardi-hero-text h1 {
  font-size: clamp(30px, 4.3vw, 58px);
  line-height: 1.12;
  margin: .08em 0 .35em;
}

.tardigrade-v88 .tardi-hero-visual {
  min-height: 320px;
  background: #0c1711;
}

.tardigrade-v88 .tardi-hero-visual.has-media {
  display: grid;
  align-content: stretch;
}

.tardigrade-v88 .tardi-hero-visual video {
  width: 100%;
  height: min(42vw, 420px);
  min-height: 320px;
  max-height: none;
  border-radius: 26px;
  object-fit: contain;
  background: #0c1711;
}

.tardigrade-v88 .cryptobiosis-wide-panel {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}

.tardigrade-v88 .tardi-join-panel {
  margin: 0 0 42px;
  padding: clamp(24px, 4vw, 38px);
}

@media(max-width: 980px) {
  .tardigrade-v88 .tardi-hero-card,
  .tardigrade-v88 .cryptobiosis-wide-panel {
    grid-template-columns: 1fr;
  }
}

@media(max-width: 560px) {
  .tardigrade-v88 .tardi-hero-visual,
  .tardigrade-v88 .tardi-hero-visual video {
    min-height: 240px;
    height: 260px;
  }
}


/* kumamuchizu_89: text updates, moss-only wording, and one-line headings */
.tardigrade-v89 .tardi-info-card {
  padding-right: 118px;
}

.tardigrade-v89 .tardi-illo-slot {
  width: 84px;
  height: 112px;
}

.tardigrade-v89 .tardi-info-card h2 {
  white-space: nowrap;
  width: calc(100% + 96px);
  max-width: none;
  font-size: clamp(19px, 2.05vw, 28px) !important;
  line-height: 1.18;
  position: relative;
  z-index: 1;
}

.tardigrade-v89 .cryptobiosis-wide-panel h2,
.tardigrade-v89 .research-story-panel h2,
.tardigrade-v89 .workflow-panel h2,
.tardigrade-v89 .tardi-join-panel h2,
.tardigrade-v89 .tardi-hero-text h1 {
  white-space: nowrap;
  font-size: clamp(30px, 4vw, 52px);
}

.tardigrade-v89 .research-story-panel {
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr);
  align-items: stretch;
}

.tardigrade-v89 .research-illustration-single {
  display: grid;
  min-height: 360px;
}

.tardigrade-v89 .research-illo-large {
  min-height: 360px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 62% 28%, rgba(255,255,255,.88), transparent 28%),
    linear-gradient(135deg, rgba(237,247,223,.98), rgba(255,243,200,.94));
  border: 1px dashed rgba(31,107,67,.30);
  display: grid;
  place-items: center;
  text-align: center;
  color: rgba(31,107,67,.62);
  font-weight: 900;
  line-height: 1.65;
  padding: 18px;
}

.tardigrade-v89 .research-illo-large span {
  font-size: 13px;
  color: rgba(31,107,67,.56);
}

@media(max-width: 980px) {
  .tardigrade-v89 .research-story-panel {
    grid-template-columns: 1fr;
  }
}

@media(max-width: 560px) {
  .tardigrade-v89 .tardi-info-card {
    padding: 18px;
  }
  .tardigrade-v89 .tardi-info-card h2 {
    width: 100%;
    font-size: clamp(20px, 7vw, 28px) !important;
  }
  .tardigrade-v89 .cryptobiosis-wide-panel h2,
  .tardigrade-v89 .research-story-panel h2,
  .tardigrade-v89 .workflow-panel h2,
  .tardigrade-v89 .tardi-join-panel h2,
  .tardigrade-v89 .tardi-hero-text h1 {
    font-size: clamp(24px, 8vw, 34px);
  }
  .tardigrade-v89 .research-illustration-single,
  .tardigrade-v89 .research-illo-large {
    min-height: 240px;
  }
}

/* kumamuchizu_89: keep long research heading inside the text column */
.tardigrade-v89 .research-story-panel h2 {
  font-size: clamp(28px, 3.55vw, 46px);
}


/* kumamuchizu_91: illustration placeholders and layout hooks */
.illustration-slot,
.corner-illustration,
.inline-illustration,
.page-head-illustration {
  border: 2px dashed rgba(31,107,67,.22);
  background:
    radial-gradient(circle at 72% 22%, rgba(255,255,255,.78), transparent 30%),
    linear-gradient(135deg, rgba(237,247,223,.92), rgba(255,243,200,.78));
  color: rgba(20,61,42,.58);
  font-weight: 900;
  text-align: center;
  line-height: 1.55;
  display: grid;
  place-items: center;
  box-sizing: border-box;
}

.illustration-slot small,
.corner-illustration small,
.inline-illustration small,
.page-head-illustration small {
  display: block;
  margin-top: 4px;
  font-size: .78rem;
  color: rgba(20,61,42,.48);
  font-weight: 800;
}

.corner-illustration {
  position: absolute;
  right: clamp(18px, 3vw, 34px);
  bottom: clamp(18px, 3vw, 30px);
  width: min(190px, 30%);
  min-height: 122px;
  border-radius: 26px;
  padding: 12px;
  z-index: 1;
}

.inline-illustration {
  min-height: 170px;
  border-radius: 28px;
  padding: 14px;
}

.page-head-illustration {
  width: min(280px, 34vw);
  min-height: 150px;
  border-radius: 28px;
  padding: 14px;
  flex: 0 0 auto;
}

.page-head.with-illustration,
.records-header.with-illustration {
  align-items: stretch !important;
}

.page-head-main,
.records-head-main {
  min-width: 0;
  flex: 1 1 auto;
}

.intro-card.has-corner-illustration,
.news-panel.has-corner-illustration,
.tardigrade-card.has-corner-illustration,
.participation-card.has-corner-illustration,
.workflow-panel.has-corner-illustration,
.panel.has-corner-illustration {
  position: relative;
  overflow: hidden;
}

.intro-card.has-corner-illustration {
  padding-right: min(300px, 32vw);
}

.home-duo-cards .tardigrade-card.has-corner-illustration,
.home-duo-cards .participation-card.has-corner-illustration {
  padding-right: min(250px, 34%) !important;
}

.news-panel.has-corner-illustration {
  padding-right: min(260px, 34vw);
}

.news-panel.has-corner-illustration .corner-illustration {
  top: clamp(18px, 3vw, 30px);
  bottom: auto;
}

.workflow-panel.has-corner-illustration {
  padding-right: min(270px, 34vw);
}

.tardi-join-panel.with-side-illustration {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, .38fr);
  gap: 18px;
  align-items: center;
}

.tardi-join-panel.with-side-illustration .button-row {
  margin-top: 16px;
}

.tardi-join-panel.with-side-illustration .inline-illustration {
  min-height: 190px;
}

.panel.has-corner-illustration {
  padding-right: min(280px, 34vw);
}

.panel.has-corner-illustration .corner-illustration {
  top: 22px;
  bottom: auto;
}

.tardi-hero-visual,
.media-placeholder.has-media,
.media-placeholder.has-media .embedded-media,
.embedded-media {
  background-color: rgba(255,253,245,.92) !important;
}

.tardi-hero-visual.has-media,
.media-placeholder.has-media {
  overflow: hidden;
}

.embedded-media {
  object-fit: cover;
}

.ranking-user-link {
  color: var(--green);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ranking-user-link:hover,
.ranking-user-link:focus-visible {
  color: #145a35;
}

@media(max-width: 900px) {
  .page-head-illustration {
    width: 100%;
    min-height: 130px;
  }

  .intro-card.has-corner-illustration,
  .news-panel.has-corner-illustration,
  .home-duo-cards .tardigrade-card.has-corner-illustration,
  .home-duo-cards .participation-card.has-corner-illustration,
  .workflow-panel.has-corner-illustration,
  .panel.has-corner-illustration {
    padding-right: clamp(22px, 3vw, 34px) !important;
    padding-bottom: 178px !important;
  }

  .corner-illustration {
    width: calc(100% - 44px);
    right: 22px;
    left: 22px;
    bottom: 22px;
    min-height: 122px;
  }

  .news-panel.has-corner-illustration .corner-illustration,
  .panel.has-corner-illustration .corner-illustration,
  .workflow-panel.has-corner-illustration .corner-illustration {
    top: auto;
    bottom: 22px;
  }

  .tardi-join-panel.with-side-illustration {
    grid-template-columns: 1fr;
  }
}

/* kumamuchizu_91: zukan pagination */
.zukan-grid .taxon-card.zukan-hidden-page {
  display: none !important;
}


/* kumamuchizu_92: keep title/back-button layouts stable with illustration slots */
.page-head.with-illustration,
.records-header.with-illustration {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 260px) auto;
  gap: 18px;
  align-items: start !important;
}

.page-head.with-illustration .back-link,
.records-header.with-illustration .back-link,
.back-link {
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  align-self: start;
  justify-self: end;
  flex: 0 0 auto;
}

.page-head.with-illustration .page-head-illustration,
.records-header.with-illustration .page-head-illustration {
  width: 100%;
  min-height: 138px;
}

@media(max-width: 900px) {
  .page-head.with-illustration,
  .records-header.with-illustration {
    grid-template-columns: 1fr auto;
  }

  .page-head.with-illustration .page-head-illustration,
  .records-header.with-illustration .page-head-illustration {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-height: 130px;
  }

  .page-head.with-illustration .back-link,
  .records-header.with-illustration .back-link {
    grid-column: 2;
    grid-row: 1;
  }
}

@media(max-width: 560px) {
  .page-head.with-illustration,
  .records-header.with-illustration {
    grid-template-columns: 1fr;
  }

  .page-head.with-illustration .back-link,
  .records-header.with-illustration .back-link {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
  }

  .page-head.with-illustration .page-head-illustration,
  .records-header.with-illustration .page-head-illustration {
    grid-column: 1;
    grid-row: 2;
  }
}

/* kumamuchizu_92: site map illustration slots */
.site-card.with-sitemap-illustration {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 14px;
  align-items: start;
}

.site-card-main {
  min-width: 0;
}

.site-card-illustration {
  min-height: 106px;
  border-radius: 22px;
  padding: 10px;
  border: 2px dashed rgba(31,107,67,.22);
  background:
    radial-gradient(circle at 72% 22%, rgba(255,255,255,.78), transparent 30%),
    linear-gradient(135deg, rgba(237,247,223,.92), rgba(255,243,200,.78));
  color: rgba(20,61,42,.58);
  font-weight: 900;
  text-align: center;
  line-height: 1.45;
  display: grid;
  place-items: center;
}

.site-card-illustration small {
  display: block;
  margin-top: 4px;
  color: rgba(20,61,42,.48);
  font-size: .75rem;
}

@media(max-width: 700px) {
  .site-card.with-sitemap-illustration {
    grid-template-columns: 1fr;
  }
  .site-card-illustration {
    min-height: 92px;
  }
}


/* kumamuchizu_93: illustration slots as decorative objects, not text-flow columns */
.intro-card.has-corner-illustration,
.news-panel.has-corner-illustration,
.home-duo-cards .tardigrade-card.has-corner-illustration,
.home-duo-cards .participation-card.has-corner-illustration,
.workflow-panel.has-corner-illustration,
.panel.has-corner-illustration {
  padding-right: clamp(22px, 3.6vw, 34px) !important;
}

.home-duo-cards .tardigrade-card.has-corner-illustration,
.home-duo-cards .participation-card.has-corner-illustration {
  padding-bottom: 104px !important;
}

.corner-illustration {
  pointer-events: none;
  z-index: 0;
  opacity: .92;
}

.intro-card.has-corner-illustration > :not(.corner-illustration),
.news-panel.has-corner-illustration > :not(.corner-illustration),
.home-duo-cards .has-corner-illustration > :not(.corner-illustration),
.workflow-panel.has-corner-illustration > :not(.corner-illustration),
.panel.has-corner-illustration > :not(.corner-illustration) {
  position: relative;
  z-index: 1;
}

.intro-card .corner-illustration {
  width: 190px;
  min-height: 122px;
  right: 34px;
  bottom: 28px;
}

.news-panel .corner-illustration {
  width: 170px;
  min-height: 108px;
  right: 24px;
  top: 22px;
  bottom: auto;
}

.home-duo-cards .corner-illustration {
  width: 150px;
  min-height: 98px;
  right: 22px;
  bottom: 22px;
}

.workflow-panel .corner-illustration,
.panel.has-corner-illustration .corner-illustration {
  width: 170px;
  min-height: 112px;
  right: 24px;
  top: 24px;
  bottom: auto;
}

/* Page-head illustrations should not steal horizontal width from titles. */
.page-head.with-illustration,
.records-header.with-illustration {
  position: relative;
  display: flex !important;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start !important;
}

.page-head.with-illustration .page-head-main,
.records-header.with-illustration .records-head-main {
  min-width: 0;
  flex: 1 1 auto;
  max-width: none;
  padding-right: 0;
}

.page-head.with-illustration .page-head-illustration,
.records-header.with-illustration .page-head-illustration {
  position: absolute;
  right: 138px;
  top: 10px;
  width: 150px;
  min-height: 96px;
  z-index: 0;
  opacity: .86;
  pointer-events: none;
}

.page-head.with-illustration > :not(.page-head-illustration),
.records-header.with-illustration > :not(.page-head-illustration) {
  position: relative;
  z-index: 1;
}

.page-head.with-illustration .back-link,
.records-header.with-illustration .back-link,
.back-link {
  white-space: nowrap !important;
  min-width: max-content !important;
  writing-mode: horizontal-tb !important;
}

@media(max-width: 900px) {
  .page-head.with-illustration,
  .records-header.with-illustration {
    display: grid !important;
    grid-template-columns: 1fr auto;
  }

  .page-head.with-illustration .page-head-illustration,
  .records-header.with-illustration .page-head-illustration {
    position: relative;
    right: auto;
    top: auto;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-height: 118px;
  }

  .page-head.with-illustration .back-link,
  .records-header.with-illustration .back-link {
    grid-column: 2;
    grid-row: 1;
  }
}

@media(max-width: 760px) {
  .intro-card.has-corner-illustration,
  .news-panel.has-corner-illustration,
  .home-duo-cards .tardigrade-card.has-corner-illustration,
  .home-duo-cards .participation-card.has-corner-illustration,
  .workflow-panel.has-corner-illustration,
  .panel.has-corner-illustration {
    padding-bottom: 168px !important;
  }

  .corner-illustration,
  .intro-card .corner-illustration,
  .news-panel .corner-illustration,
  .home-duo-cards .corner-illustration,
  .workflow-panel .corner-illustration,
  .panel.has-corner-illustration .corner-illustration {
    width: calc(100% - 44px);
    left: 22px;
    right: 22px;
    top: auto;
    bottom: 22px;
    min-height: 112px;
  }
}

@media(max-width: 560px) {
  .page-head.with-illustration,
  .records-header.with-illustration {
    grid-template-columns: 1fr;
  }

  .page-head.with-illustration .back-link,
  .records-header.with-illustration .back-link {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
  }
}

/* kumamuchizu_93: news pagination */
.news-pager-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}
.news-item.news-hidden-page {
  display: none !important;
}

/* kumamuchizu_93: ruby trial readability */
.ruby-trial ruby {
  ruby-position: over;
}
.ruby-trial rt {
  color: rgba(20,61,42,.66);
  font-size: .62em;
  font-weight: 800;
  line-height: 1;
}


/* kumamuchizu_94: consistent page title typography */
.page-head h1,
.records-header h1,
.users-page .page-head h1,
.user-page .page-head h1 {
  margin: .1em 0 .15em !important;
  font-size: clamp(38px, 7vw, 78px) !important;
  line-height: .98 !important;
  white-space: normal !important;
  color: var(--green);
}

.page-head p,
.records-header p,
.users-page .page-head p,
.user-page .page-head p {
  line-height: 1.85 !important;
  color: #405540;
  max-width: 900px;
}

.users-page .page-head,
.user-page .page-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.minor-note {
  display: inline-block;
  margin-top: 6px;
  color: #5e4c19;
  font-weight: 900;
}

/* kumamuchizu_94: ruby across body text */
main ruby {
  ruby-position: over;
}
main rt {
  color: rgba(20,61,42,.66);
  font-size: .58em;
  font-weight: 800;
  line-height: 1;
}
main p ruby,
main li ruby,
main span ruby,
main div ruby {
  line-height: 1.9;
}






/* Explicit overrides for earlier high-specificity ruby color rules. */
.join-cta rt,
.primary rt,
.primary-button rt,
.join-form-button rt,
.mail-button rt,
.more-link rt,
.site-nav-brand rt,
.contact-nav-link rt,
.ranking-panel rt,
.map-mode rt,
.group-marker rt,
.badge.rank rt,
.taxon-actions a:not(.sub) rt,
.flow b rt,
.step b rt,
.role-card b rt,
.warn rt,
.notice-card rt,
.note rt,
.badge rt {
  color: currentColor !important;
}


/* kumamuchizu_100: ruby must inherit the exact surrounding text color */
main ruby,
main rt,
main ruby * {
  color: inherit !important;
}

/* Explicit overrides for earlier high-specificity ruby color rules. */
.join-cta ruby,
.join-cta rt,
.primary ruby,
.primary rt,
.primary-button ruby,
.primary-button rt,
.join-form-button ruby,
.join-form-button rt,
.mail-button ruby,
.mail-button rt,
.more-link ruby,
.more-link rt,
.site-nav-brand ruby,
.site-nav-brand rt,
.contact-nav-link ruby,
.contact-nav-link rt,
.ranking-panel ruby,
.ranking-panel rt,
.map-mode ruby,
.map-mode rt,
.group-marker ruby,
.group-marker rt,
.badge.rank ruby,
.badge.rank rt,
.taxon-actions a:not(.sub) ruby,
.taxon-actions a:not(.sub) rt,
.flow b ruby,
.flow b rt,
.step b ruby,
.step b rt,
.role-card b ruby,
.role-card b rt,
.warn ruby,
.warn rt,
.notice-card ruby,
.notice-card rt,
.note ruby,
.note rt,
.badge ruby,
.badge rt {
  color: inherit !important;
}


/* kumamuchizu_101: align user page headers with other pages */
body.users-layout-body {
  padding: 32px 16px 72px !important;
  box-sizing: border-box;
}

.users-page,
.user-page {
  width: min(1120px, 100%) !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
}

.users-page .page-head,
.user-page .page-head {
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 18px !important;
  align-items: flex-start !important;
}

.users-page .page-head.with-illustration,
.user-page .page-head.with-illustration {
  position: relative !important;
}

.users-page .page-head-main,
.user-page .page-head-main {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  max-width: none !important;
}

.users-page .page-head h1,
.user-page .page-head h1 {
  margin: .1em 0 .15em !important;
  font-size: clamp(38px, 7vw, 78px) !important;
  line-height: .98 !important;
  white-space: normal !important;
}

.users-page .page-head p,
.user-page .page-head p {
  line-height: 1.85 !important;
  color: #405540 !important;
  max-width: 900px !important;
}

.users-page .back-link,
.user-page .back-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.78) !important;
  color: var(--green) !important;
  font-weight: 900 !important;
  border: 1px solid rgba(31,107,67,.14) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  min-width: max-content !important;
  align-self: flex-start !important;
}

.users-page .page-head.with-illustration .page-head-illustration,
.user-page .page-head.with-illustration .page-head-illustration {
  position: absolute !important;
  right: 138px !important;
  top: 10px !important;
  width: 150px !important;
  min-height: 96px !important;
  z-index: 0 !important;
  opacity: .86 !important;
  pointer-events: none !important;
}

.users-page .page-head.with-illustration > :not(.page-head-illustration),
.user-page .page-head.with-illustration > :not(.page-head-illustration) {
  position: relative !important;
  z-index: 1 !important;
}

@media(max-width: 900px) {
  .users-page .page-head.with-illustration,
  .user-page .page-head.with-illustration {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
  }

  .users-page .page-head.with-illustration .page-head-illustration,
  .user-page .page-head.with-illustration .page-head-illustration {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-height: 118px !important;
  }

  .users-page .page-head.with-illustration .back-link,
  .user-page .page-head.with-illustration .back-link {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
}

@media(max-width: 560px) {
  .users-page .page-head.with-illustration,
  .user-page .page-head.with-illustration {
    grid-template-columns: 1fr !important;
  }

  .users-page .page-head.with-illustration .back-link,
  .user-page .page-head.with-illustration .back-link {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: start !important;
  }
}


/* kumamuchizu_102: keep title height consistent whether ruby exists or not */
.page-head h1,
.records-header h1,
.users-page .page-head h1,
.user-page .page-head h1 {
  padding-top: .34em !important;
  min-height: 1.36em !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  display: block !important;
}

/* Card/section titles also reserve ruby space, so titles do not jump by page. */
main h2,
main h3 {
  padding-top: .28em;
  min-height: 1.28em;
  box-sizing: border-box;
}

/* Ruby inside titles should be compact and should not create page-specific extra height. */
.page-head h1 ruby,
.records-header h1 ruby,
main h2 ruby,
main h3 ruby {
  line-height: 1 !important;
}

.page-head h1 rt,
.records-header h1 rt,
main h2 rt,
main h3 rt {
  font-size: .42em !important;
  line-height: 1 !important;
  transform: translateY(.06em);
}

/* Do not add title-height padding inside small badges/cards that should stay compact. */
.badge h2,
.badge h3,
.map-popup h2,
.map-popup h3,
.leaflet-popup-content h2,
.leaflet-popup-content h3,
.no-ruby h2,
.no-ruby h3 {
  padding-top: 0 !important;
  min-height: 0 !important;
}

/* kumamuchizu_104: smartphone correction for the top page.
   Make the home hero readable immediately and avoid clipping/overlapping on narrow screens. */
.top-page .hero {
  display: block !important;
  place-items: initial !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.top-page .map-wrap {
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 760px) {
  .top-page .site-nav {
    width: calc(100% - 20px) !important;
    margin: 8px auto 8px !important;
    padding: 9px 10px !important;
  }

  .top-page .site-nav-links {
    gap: 5px !important;
  }

  .top-page .site-nav-links a {
    font-size: 12px !important;
    padding: 7px 9px !important;
  }

  .top-page .hero {
    padding: 0 0 36px !important;
  }

  .top-page .map-wrap {
    width: min(100%, 460px) !important;
    height: auto !important;
    min-height: 670px !important;
    margin: 0 auto !important;
    padding: 12px 14px 26px !important;
    position: relative !important;
    overflow: visible !important;
  }

  .top-page .map-area {
    inset: 118px -24px auto -24px !important;
    height: 440px !important;
    transform: rotate(-2deg) scale(1.03) !important;
    opacity: .88 !important;
    z-index: 1 !important;
  }

  .top-page .route-layer {
    inset: 118px -24px auto -24px !important;
    width: calc(100% + 48px) !important;
    height: 440px !important;
    z-index: 4 !important;
  }

  .top-page .title-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 430px !important;
    margin: 10px auto 0 !important;
    padding: 18px 16px 20px !important;
    border-radius: 24px !important;
    background: rgba(255,253,245,.95) !important;
    backdrop-filter: blur(10px) !important;
    opacity: 1 !important;
    animation: none !important;
    z-index: 30 !important;
  }

  .top-page .title-card h1 {
    white-space: normal !important;
    font-size: clamp(44px, 14vw, 62px) !important;
    line-height: 1.05 !important;
    padding-top: .18em !important;
    min-height: 0 !important;
    margin: 0 0 .04em !important;
  }

  .top-page .project-name {
    font-size: 11px !important;
    line-height: 1.25 !important;
    letter-spacing: .12em !important;
  }

  .top-page .subtitle {
    font-size: clamp(16px, 4.8vw, 20px) !important;
    line-height: 1.45 !important;
    margin: 2px 0 14px !important;
  }

  .top-page .actions {
    gap: 8px !important;
  }

  .top-page .actions .button {
    flex: 1 1 136px !important;
    min-width: 0 !important;
    padding: 11px 14px !important;
  }

  .top-page .hero-tardigrade-link a {
    width: 100% !important;
    min-height: 40px !important;
    white-space: normal !important;
  }

  .top-page .speech,
  .top-page .speech-bubble,
  .top-page .bubble {
    left: 72% !important;
    top: 56% !important;
    right: auto !important;
    font-size: clamp(16px, 5.2vw, 23px) !important;
    padding: 10px 13px !important;
    opacity: 1 !important;
    animation: none !important;
    transform: translate(-50%, -50%) !important;
    z-index: 24 !important;
  }

  .top-page .tardigrade {
    width: clamp(58px, 18vw, 82px) !important;
    left: 58% !important;
    top: 54% !important;
    transform: translate(-50%, -50%) rotate(8deg) scale(1) !important;
    z-index: 22 !important;
  }

  .top-page .walker {
    animation: bob .55s ease-in-out infinite alternate !important;
  }

  .top-page .credit {
    position: static !important;
    width: calc(100% - 28px) !important;
    max-width: 430px !important;
    margin: 6px auto 0 !important;
    border-radius: 14px !important;
    text-align: center !important;
  }

  .top-page .home-sections {
    width: calc(100% - 28px) !important;
    padding: 28px 0 72px !important;
    gap: 14px !important;
  }

  .top-page .intro-card h2 br {
    display: none !important;
  }

  .top-page .intro-card p {
    max-width: none !important;
  }
}

@media (max-width: 390px) {
  .top-page .map-wrap {
    min-height: 640px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .top-page .title-card {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  .top-page .actions .button {
    flex-basis: 100% !important;
  }

  .top-page .speech,
  .top-page .speech-bubble,
  .top-page .bubble {
    left: 69% !important;
    top: 57% !important;
  }
}

/* previous mobile layout: mobile top-page layout correction based on actual phone preview. */
@media (max-width: 760px) {
  .top-page .map-wrap {
    width: min(100%, 460px) !important;
    min-height: 720px !important;
    padding: 0 14px 18px !important;
    position: relative !important;
    overflow: visible !important;
  }

  .top-page .map-area {
    inset: 12px -28px auto -28px !important;
    height: 520px !important;
    transform: rotate(-2deg) scale(1.04) !important;
    opacity: .90 !important;
  }

  .top-page .route-layer {
    inset: 12px -28px auto -28px !important;
    width: calc(100% + 56px) !important;
    height: 520px !important;
  }

  .top-page .title-card {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 18px !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    padding: 16px 15px 18px !important;
    opacity: 1 !important;
    animation: none !important;
  }

  .top-page .title-card h1 {
    white-space: nowrap !important;
    font-size: clamp(42px, 13.6vw, 58px) !important;
    line-height: 1.04 !important;
    letter-spacing: .01em !important;
    padding-top: .12em !important;
  }

  .top-page .project-name {
    font-size: 10px !important;
    letter-spacing: .11em !important;
    line-height: 1.25 !important;
  }

  .top-page .subtitle {
    font-size: clamp(15px, 4.5vw, 19px) !important;
    line-height: 1.35 !important;
    margin: 2px 0 12px !important;
    text-wrap: balance;
  }

  .top-page .actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .top-page .actions .button {
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
    padding: 10px 10px !important;
    font-size: 14px !important;
  }

  .top-page .hero-tardigrade-link {
    margin-top: 8px !important;
  }

  .top-page .hero-tardigrade-link a {
    width: 100% !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    padding: 9px 12px !important;
  }

  .top-page .tardigrade {
    width: clamp(72px, 22vw, 94px) !important;
    left: 39% !important;
    top: 330px !important;
    transform: translate(-50%, -50%) rotate(8deg) scale(1) !important;
    z-index: 25 !important;
  }

  .top-page .speech,
  .top-page .speech-bubble,
  .top-page .bubble {
    left: auto !important;
    right: 18px !important;
    top: 238px !important;
    transform: none !important;
    font-size: clamp(16px, 5.2vw, 22px) !important;
    line-height: 1.08 !important;
    padding: 10px 13px !important;
    z-index: 28 !important;
  }

  .top-page .home-sections h2,
  .top-page .home-sections h3,
  .top-page .home-sections p {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-break: strict;
  }

  .top-page .intro-card h2,
  .top-page .sample-panel h2,
  .top-page .ranking-panel h2,
  .top-page .news-panel h2,
  .top-page .home-duo-cards h2 {
    font-size: clamp(23px, 6.6vw, 31px) !important;
    line-height: 1.32 !important;
    text-wrap: balance;
  }

  .top-page .intro-card p,
  .top-page .home-duo-cards p {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }

  .top-page .home-duo-cards .tardigrade-card.has-corner-illustration,
  .top-page .home-duo-cards .participation-card.has-corner-illustration {
    display: grid !important;
    gap: 14px !important;
    padding: 24px !important;
    min-height: 0 !important;
  }

  .top-page .home-duo-cards .tardigrade-card.has-corner-illustration > div:first-child,
  .top-page .home-duo-cards .participation-card.has-corner-illustration > div:first-child {
    order: 1;
  }

  .top-page .home-duo-cards .corner-illustration {
    position: relative !important;
    order: 2;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-height: 92px !important;
    margin: 0 !important;
  }

  .top-page .home-duo-cards .button-row {
    order: 3;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .top-page .home-duo-cards .button-row a {
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
  }

  .top-page .news-panel.has-corner-illustration {
    position: relative !important;
    padding: 24px 150px 24px 24px !important;
  }

  .top-page .news-panel .corner-illustration {
    position: absolute !important;
    left: auto !important;
    right: 20px !important;
    top: 22px !important;
    bottom: auto !important;
    width: 108px !important;
    min-height: 78px !important;
  }

  .top-page .news-panel .news-list,
  .top-page .news-panel .news-more,
  .top-page .news-panel .news-pager-controls {
    margin-right: -126px !important;
  }

  .site-footer {
    padding: 24px 16px 30px !important;
  }

  .site-footer .footer-links,
  .footer-links {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 360px !important;
    gap: 10px !important;
    margin: 0 auto !important;
  }

  .site-footer .footer-links a,
  .footer-links a {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .site-footer .footer-sns,
  .footer-sns {
    justify-content: center !important;
    flex-wrap: nowrap !important;
    margin-top: 14px !important;
  }
}

@media (max-width: 390px) {
  .top-page .map-wrap {
    min-height: 700px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .top-page .title-card {
    left: 10px !important;
    right: 10px !important;
    bottom: 14px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  .top-page .actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .top-page .speech,
  .top-page .speech-bubble,
  .top-page .bubble {
    right: 14px !important;
    top: 228px !important;
  }

  .top-page .tardigrade {
    left: 38% !important;
    top: 320px !important;
  }

  .top-page .news-panel.has-corner-illustration {
    padding-right: 126px !important;
  }

  .top-page .news-panel .corner-illustration {
    width: 92px !important;
    min-height: 70px !important;
    right: 18px !important;
  }

  .top-page .news-panel .news-list,
  .top-page .news-panel .news-more,
  .top-page .news-panel .news-pager-controls {
    margin-right: -102px !important;
  }
}

/* kumamuchizu_106: fix mobile ranking heading chunks and footer row layout. */
.home-ranking-title,
#rankingTitle.home-ranking-title {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-break: strict !important;
}
.home-ranking-title .title-chunk {
  display: inline-block !important;
  white-space: nowrap !important;
  margin-right: .28em !important;
}
.home-ranking-title .title-chunk:last-child {
  margin-right: 0 !important;
}

@media (max-width: 760px) {
  .top-page .ranking-panel .panel-head {
    gap: 10px !important;
    align-items: flex-start !important;
  }

  .top-page .ranking-panel .panel-head > div:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .top-page .ranking-panel h2#rankingTitle.home-ranking-title {
    font-size: clamp(20px, 5.7vw, 25px) !important;
    line-height: 1.32 !important;
    letter-spacing: -.02em !important;
    margin-top: .1em !important;
    margin-bottom: .34em !important;
    padding-top: 0 !important;
    min-height: 0 !important;
    text-wrap: normal !important;
  }

  .top-page .ranking-panel h2#rankingTitle.home-ranking-title .title-chunk {
    margin-right: .18em !important;
  }

  .top-page .rank-arrows {
    flex: 0 0 auto !important;
    gap: 6px !important;
  }

  .top-page .rank-arrows button {
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
  }

  .top-page .home-sections h2,
  .top-page .home-sections h3 {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
  }

  .site-footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
    align-items: center !important;
    gap: 12px !important;
    width: calc(100% - 28px) !important;
    padding: 16px 10px 18px !important;
    box-sizing: border-box !important;
  }

  .site-footer .footer-links,
  .footer-links {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
  }

  .site-footer .footer-links a,
  .footer-links a {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 7px 3px !important;
    box-sizing: border-box !important;
    font-size: clamp(10px, 2.85vw, 12px) !important;
    letter-spacing: -.04em !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .site-footer .footer-sns,
  .footer-sns {
    grid-row: 2 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 390px) {
  .top-page .ranking-panel {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .top-page .ranking-panel h2#rankingTitle.home-ranking-title {
    font-size: clamp(19px, 5.55vw, 22px) !important;
    letter-spacing: -.035em !important;
  }

  .top-page .rank-arrows button {
    width: 34px !important;
    height: 34px !important;
  }

  .site-footer .footer-links,
  .footer-links {
    gap: 4px !important;
  }

  .site-footer .footer-links a,
  .footer-links a {
    font-size: clamp(9.4px, 2.75vw, 10.8px) !important;
    min-height: 36px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}


/* kumamuchizu_107: tested mobile fixes for ranking title, home duo cards, and footer. */
.home-ranking-title,
#rankingTitle.home-ranking-title {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-break: strict !important;
}
.home-ranking-title .title-line {
  display: block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

@media (max-width: 760px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .top-page .ranking-panel h2#rankingTitle.home-ranking-title {
    font-size: clamp(19px, 5.5vw, 23px) !important;
    line-height: 1.36 !important;
    letter-spacing: 0 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-wrap: initial !important;
  }

  .top-page .ranking-panel h2#rankingTitle.home-ranking-title .title-line {
    display: block !important;
    white-space: nowrap !important;
  }

  .top-page .home-duo-cards {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 16px !important;
    overflow: visible !important;
  }

  .top-page .home-duo-cards .tardigrade-card.has-corner-illustration,
  .top-page .home-duo-cards .participation-card.has-corner-illustration {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 14px !important;
    padding: 22px !important;
    padding-bottom: 22px !important;
    overflow: visible !important;
  }

  .top-page .home-duo-cards .tardigrade-card.has-corner-illustration > div:first-child,
  .top-page .home-duo-cards .participation-card.has-corner-illustration > div:first-child {
    order: 1 !important;
    min-width: 0 !important;
  }

  .top-page .home-duo-cards .corner-illustration {
    order: 2 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 96px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .top-page .home-duo-cards .button-row {
    order: 3 !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  .top-page .home-duo-cards .button-row a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.28 !important;
  }

  .top-page footer.site-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    justify-items: stretch !important;
    align-items: center !important;
    width: calc(100% - 28px) !important;
    max-width: 460px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 16px 10px 18px !important;
    box-sizing: border-box !important;
  }

  .top-page footer.site-footer > .footer-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .top-page footer.site-footer > .footer-links > a {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    min-height: 36px !important;
    padding: 7px 2px !important;
    font-size: clamp(9px, 2.65vw, 11px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
    white-space: nowrap !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .top-page footer.site-footer > .footer-sns {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    grid-row: 2 !important;
  }
}

@media (max-width: 340px) {
  .top-page footer.site-footer > .footer-links {
    gap: 4px !important;
  }
  .top-page footer.site-footer > .footer-links > a {
    font-size: 8.8px !important;
    letter-spacing: -.06em !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
  }
}

/* kumamuchizu_107b: prevent grid-item min-content overflow in the mobile home sections. */
@media (max-width: 760px) {
  .top-page .home-sections,
  .top-page .home-sections > *,
  .top-page .home-duo-cards,
  .top-page .home-duo-cards > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .top-page .home-duo-cards {
    width: auto !important;
    justify-self: stretch !important;
  }

  .top-page .home-duo-cards .tardigrade-card.has-corner-illustration,
  .top-page .home-duo-cards .participation-card.has-corner-illustration {
    justify-self: stretch !important;
    contain: layout !important;
  }
}

/* kumamuchizu_108: keep the home sample-panel more button inside narrow mobile screens. */
@media (max-width: 760px) {
  .top-page .sample-panel .panel-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 10px !important;
  }
  .top-page .sample-panel .panel-head .more-link {
    justify-self: start !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* kumamuchizu_114: responsive participation guide. Website uses direct form buttons. */
.participate-page .web-guide-panel {
  overflow: visible !important;
  padding: clamp(20px, 4vw, 34px) !important;
}
.web-guide-panel h2 { margin-bottom: 16px !important; }
.web-guide-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
  gap: 22px;
  align-items: stretch;
  padding: clamp(18px, 3vw, 26px);
  border-radius: 28px;
  background: linear-gradient(135deg, #e6f6ee, #fff3c9);
  border: 1px solid rgba(31,107,67,.14);
}
.web-guide-hero-text { min-width: 0; }
.web-guide-hero .lead {
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 900;
  color: var(--green);
  line-height: 1.55;
  margin: 0 0 10px;
}
.web-guide-hero p { margin: 0 0 14px; line-height: 1.85; }
.web-guide-photo {
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  background: #dff8f0;
  border: 3px solid rgba(64,190,174,.58);
  display: grid;
  place-items: center;
  min-height: 190px;
}
.web-guide-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: contain !important;
  object-position: center center !important;
}
.guide-main-button { margin-top: 4px; }
.web-guide-subtitle {
  margin: 28px 0 14px;
  color: var(--green);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.25;
}
.web-flow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.web-flow-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(31,107,67,.12);
  min-width: 0;
}
.web-flow-card .flow-num {
  grid-row: 1 / span 2;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #18a894;
  color: white;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
}
.web-flow-card h4,
.moss-point-card h4 {
  margin: 0;
  color: #1b3c2c;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.web-flow-card p { margin: 0; line-height: 1.75; color: #405540; }
.flow-apply { background: #e2f6f0; }
.flow-bag { background: #fff2c5; }
.flow-moss { background: #edf7df; }
.flow-send { background: #eef1ff; }
.moss-point-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.moss-point-card {
  padding: 12px 12px 16px;
  border-radius: 22px;
  background: #fffdf5;
  border: 1px solid rgba(31,107,67,.13);
  box-shadow: 0 12px 28px rgba(36,80,47,.08);
  text-align: center;
  min-width: 0;
}
.moss-point-card img {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 10px;
}
.point-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #18a894;
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  margin-bottom: 8px;
}
.guide-warning {
  margin: 16px 0 0 !important;
  padding: 14px 16px;
  border-radius: 18px;
  background: #fff0ed;
  border: 2px solid rgba(238,111,91,.42);
  color: #5b352f !important;
  font-weight: 800;
  line-height: 1.75 !important;
}
.guide-apply-box {
  margin-top: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 20px;
  border-radius: 26px;
  background: rgba(255,253,245,.95);
  border: 2px solid rgba(64,190,174,.44);
}
.guide-apply-box h3 { margin: 0 0 6px; color: var(--green); font-size: clamp(22px, 2.7vw, 32px); }
.guide-apply-box p { margin: 0 0 12px; line-height: 1.75; }
@media (max-width: 760px) {
  .participate-page .web-guide-panel { padding: 18px !important; }
  .web-guide-hero,
  .web-flow-grid,
  .moss-point-grid,
  .guide-apply-box { grid-template-columns: 1fr; }
  .web-guide-hero { gap: 16px; }
  .web-guide-photo { min-height: 150px; max-height: 210px; }
  .web-guide-photo img { height: auto; max-height: 210px; }
  .web-flow-card { padding: 16px; }
  .moss-point-card img { height: 145px; }
  .guide-apply-box { text-align: left; }
}
@media (max-width: 430px) {
  .web-flow-card h4,
  .moss-point-card h4 { font-size: 19px; }
  .web-flow-card p,
  .web-guide-hero p,
  .guide-apply-box p,
  .guide-warning { font-size: 14px; }
}


/* kumamuchizu_114: keep form action as direct button link. */
.guide-apply-box-linkonly {
  display: block !important;
}
.guide-apply-box-linkonly > div {
  max-width: 720px;
}


/* kumamuchizu_115: participate guide text should stay readable on narrow screens. */
.participate-page .web-guide-panel,
.participate-page .join-cta {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-break: strict !important;
}
.participate-page .web-guide-panel .keep {
  white-space: nowrap !important;
}
.participate-page .web-guide-hero .lead {
  font-size: clamp(17px, 2vw, 24px) !important;
  line-height: 1.65 !important;
}
.participate-page .web-guide-hero p,
.participate-page .web-flow-card p,
.participate-page .guide-apply-box p {
  max-width: none !important;
}
.participate-page .single-line-message {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}
.participate-page .guide-apply-box p {
  white-space: nowrap !important;
  font-size: clamp(14px, 1.55vw, 16px) !important;
}
@media (max-width: 760px) {
  .participate-page .join-cta {
    gap: 12px !important;
  }
  .participate-page .single-line-message {
    font-size: clamp(13px, 3.8vw, 15px) !important;
    line-height: 1.55 !important;
  }
  .participate-page .web-guide-hero .lead {
    font-size: clamp(15px, 4.1vw, 17px) !important;
  }
  .participate-page .web-guide-hero p,
  .participate-page .web-flow-card p,
  .participate-page .guide-apply-box p,
  .participate-page .guide-warning {
    font-size: clamp(13px, 3.75vw, 15px) !important;
    line-height: 1.65 !important;
  }
  .participate-page .web-flow-card {
    column-gap: 12px !important;
  }
  .participate-page .guide-apply-box p {
    white-space: nowrap !important;
    font-size: clamp(12px, 3.35vw, 14px) !important;
  }
}
@media (max-width: 360px) {
  .participate-page .single-line-message,
  .participate-page .guide-apply-box p {
    white-space: normal !important;
  }
}

/* kumamuchizu_115b: shorten and keep key phrases without clipping. */
.participate-page .web-guide-panel .keep {
  white-space: nowrap !important;
  display: inline !important;
}
@media (max-width: 760px) {
  .participate-page .web-guide-hero .lead {
    font-size: clamp(14px, 4vw, 16px) !important;
    line-height: 1.65 !important;
  }
  .participate-page .web-flow-card p {
    font-size: clamp(13px, 3.7vw, 14px) !important;
  }
}
@media (max-width: 360px) {
  .participate-page .web-guide-panel .keep {
    white-space: normal !important;
  }
}

/* kumamuchizu_116: keep ruby, fix only unwanted line breaks on participate guide. */
.participate-page .web-guide-panel,
.participate-page .join-cta {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-break: strict !important;
}
.participate-page .line-keep,
.participate-page .strong-phrase {
  display: inline-block !important;
  white-space: nowrap !important;
  vertical-align: baseline;
}
.participate-page .strong-phrase {
  font-weight: 900;
  color: var(--green);
}
.participate-page .web-guide-panel ruby,
.participate-page .join-cta ruby {
  white-space: nowrap !important;
}
.participate-page .web-guide-panel rt,
.participate-page .join-cta rt {
  font-size: .42em !important;
  line-height: 1 !important;
}
.participate-page .guide-sentence .line-keep + .line-keep,
.participate-page .web-flow-card p .line-keep + .line-keep,
.participate-page .apply-single-line .line-keep + .line-keep {
  margin-left: .18em;
}
.participate-page .apply-single-line {
  white-space: nowrap !important;
  font-size: clamp(10px, 2.7vw, 16px) !important;
  line-height: 1.55 !important;
  overflow: visible !important;
}
@media (max-width: 760px) {
  .participate-page .web-flow-card p {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  .participate-page .web-flow-card p,
  .participate-page .web-guide-hero p,
  .participate-page .guide-warning {
    font-size: clamp(13px, 3.65vw, 15px) !important;
    line-height: 1.72 !important;
  }
  .participate-page .web-guide-hero .lead {
    font-size: clamp(15px, 4vw, 17px) !important;
    line-height: 1.7 !important;
  }
  .participate-page .single-line-message {
    font-size: clamp(12px, 3.25vw, 14px) !important;
    line-height: 1.6 !important;
  }
}
@media (max-width: 380px) {
  .participate-page .apply-single-line {
    font-size: 9.5px !important;
  }
}

/* kumamuchizu_116b: keep ruby enabled, but remove forced no-wrap overflow. */
.participate-page .line-keep {
  display: inline !important;
  white-space: normal !important;
}
.participate-page .term-keep {
  display: inline-block !important;
  white-space: nowrap !important;
}
.participate-page .single-line-message,
.participate-page .apply-single-line,
.participate-page .guide-sentence-short {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}
.participate-page .apply-single-line {
  font-size: clamp(13px, 3.45vw, 16px) !important;
}
@media (max-width: 760px) {
  .participate-page .web-flow-card p {
    grid-column: 1 / -1 !important;
  }
  .participate-page .single-line-message,
  .participate-page .apply-single-line,
  .participate-page .guide-sentence-short {
    font-size: clamp(12px, 3.4vw, 14px) !important;
  }
}
@media (max-width: 360px) {
  .participate-page .single-line-message,
  .participate-page .apply-single-line,
  .participate-page .guide-sentence-short {
    white-space: normal !important;
  }
}

/* kumamuchizu_116c: final compact one-line form note. */
.participate-page .apply-single-line,
.participate-page .single-line-message,
.participate-page .guide-sentence-short {
  max-width: 100% !important;
  overflow: visible !important;
}


/* kumamuchizu_117: participate page requested fixes only.
   - Use the user-provided kuma.png in the page header.
   - Keep ruby enabled.
   - Preserve original wording and control only the requested line breaks.
*/
.participate-page .participate-head-kuma {
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 10px !important;
  background: rgba(255,253,245,.82) !important;
  border: 2px solid rgba(64,190,174,.45) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  min-height: 150px !important;
}

.participate-page .participate-head-kuma img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 190px !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.participate-page .web-guide-photo {
  overflow: hidden !important;
}

.participate-page .web-guide-photo img {
  object-fit: contain !important;
  object-position: center center !important;
}

.participate-page .web-guide-panel,
.participate-page .web-guide-panel p,
.participate-page .web-flow-card p,
.participate-page .guide-apply-box p {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-break: strict !important;
}

.participate-page .web-guide-panel ruby,
.participate-page .web-guide-panel rt {
  white-space: nowrap !important;
}

.participate-page .web-flow-card p br,
.participate-page .web-guide-hero p br {
  display: block !important;
}

.participate-page .apply-single-line {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-break: strict !important;
  font-size: clamp(10px, 2.7vw, 16px) !important;
}

@media (max-width: 760px) {
  .participate-page .page-head.with-illustration {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .participate-page .participate-head-kuma {
    width: 100% !important;
    min-height: 170px !important;
  }

  .participate-page .participate-head-kuma img {
    max-height: 170px !important;
  }

  .participate-page .web-guide-hero .lead,
  .participate-page .web-guide-hero p,
  .participate-page .web-flow-card p,
  .participate-page .guide-warning {
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.75 !important;
  }

  .participate-page .web-flow-card p {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .participate-page .apply-single-line {
    font-size: clamp(9.3px, 2.65vw, 13px) !important;
  }
}

@media (max-width: 360px) {
  .participate-page .apply-single-line {
    white-space: normal !important;
    font-size: 11px !important;
  }
}


/* kumamuchizu_118: participate illustration without frame, ~30% larger */
.participate-page .participate-head-kuma {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  min-height: 0 !important;
  box-shadow: none !important;
}

.participate-page .participate-head-kuma img {
  display: block !important;
  width: 130% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
  transform: none !important;
}

@media (max-width: 760px) {
  .participate-page .participate-head-kuma {
    justify-self: center !important;
    align-self: start !important;
  }
  .participate-page .participate-head-kuma img {
    width: 130% !important;
  }
}


/* kumamuchizu_119: enlarge participate header illustration and reserve space for it */
.participate-page .page-head.with-illustration {
  min-height: 300px !important;
}

.participate-page .page-head.with-illustration .page-head-main {
  padding-right: 360px !important;
}

.participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma {
  position: absolute !important;
  right: 8px !important;
  top: 0 !important;
  width: 300px !important;
  min-height: 250px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.participate-page .participate-head-kuma img {
  width: 200% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 auto !important;
}

@media (max-width: 1100px) {
  .participate-page .page-head.with-illustration {
    min-height: 270px !important;
  }
  .participate-page .page-head.with-illustration .page-head-main {
    padding-right: 300px !important;
  }
  .participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma {
    width: 250px !important;
    min-height: 220px !important;
    right: 0 !important;
  }
  .participate-page .participate-head-kuma img {
    width: 185% !important;
  }
}

@media (max-width: 760px) {
  .participate-page .page-head.with-illustration {
    min-height: 0 !important;
  }
  .participate-page .page-head.with-illustration .page-head-main {
    padding-right: 0 !important;
  }
  .participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    min-height: 220px !important;
    margin-top: 4px !important;
  }
  .participate-page .participate-head-kuma img {
    width: 160% !important;
  }
}


/* kumamuchizu_120: participate illustration to upper-left, no overlap; hide on mobile */
.participate-page .page-head.with-illustration {
  min-height: 300px !important;
}

.participate-page .page-head.with-illustration .page-head-main {
  padding-left: 360px !important;
  padding-right: 0 !important;
}

.participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma {
  position: absolute !important;
  left: 8px !important;
  right: auto !important;
  top: 0 !important;
  width: 300px !important;
  min-height: 250px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.participate-page .participate-head-kuma img {
  width: 200% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* Allow the bottom apply sentence to stay readable on phones */
.participate-page .guide-apply-box,
.participate-page .guide-apply-box p {
  min-width: 0 !important;
}

@media (max-width: 1100px) {
  .participate-page .page-head.with-illustration {
    min-height: 270px !important;
  }
  .participate-page .page-head.with-illustration .page-head-main {
    padding-left: 300px !important;
    padding-right: 0 !important;
  }
  .participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma {
    left: 0 !important;
    width: 250px !important;
    min-height: 220px !important;
  }
  .participate-page .participate-head-kuma img {
    width: 185% !important;
  }
}

@media (max-width: 760px) {
  .participate-page .page-head.with-illustration {
    min-height: 0 !important;
    display: block !important;
  }
  .participate-page .page-head.with-illustration .page-head-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma {
    display: none !important;
  }
  .participate-page .guide-apply-box .apply-single-line {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-break: strict !important;
    font-size: clamp(12px, 3.3vw, 14px) !important;
    line-height: 1.7 !important;
  }
}


/* kumamuchizu_121: keep participate illustration on the right side, shifted left/up, with reserved text area */
.participate-page .page-head.with-illustration {
  position: relative !important;
  min-height: 300px !important;
}

.participate-page .page-head.with-illustration .page-head-main {
  padding-left: 0 !important;
  padding-right: 560px !important;
  max-width: none !important;
}

.participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma {
  position: absolute !important;
  left: auto !important;
  right: 140px !important;
  top: -46px !important;
  width: 300px !important;
  min-height: 250px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.participate-page .participate-head-kuma img {
  width: 200% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 auto !important;
}

.participate-page .guide-apply-box,
.participate-page .guide-apply-box p {
  min-width: 0 !important;
}

@media (max-width: 1100px) {
  .participate-page .page-head.with-illustration {
    min-height: 270px !important;
  }
  .participate-page .page-head.with-illustration .page-head-main {
    padding-left: 0 !important;
    padding-right: 520px !important;
  }
  .participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma {
    left: auto !important;
    right: 100px !important;
    top: -36px !important;
    width: 270px !important;
    min-height: 220px !important;
  }
  .participate-page .participate-head-kuma img {
    width: 185% !important;
  }
}

@media (max-width: 900px) {
  .participate-page .page-head.with-illustration .page-head-main {
    padding-right: 440px !important;
  }
  .participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma {
    right: 90px !important;
    top: -24px !important;
    width: 240px !important;
  }
}

/* kumamuchizu_172: keep the accepted home-page illustration scale only. */
@media (min-width: 901px) {
  .top-page .home-duo-cards .corner-illustration img,
  .top-page .news-panel .news-illustration img {
    transform: scale(1.3);
    transform-origin: center;
  }
}

@media (max-width: 760px) {
  .participate-page .page-head.with-illustration {
    min-height: 0 !important;
    display: block !important;
  }
  .participate-page .page-head.with-illustration .page-head-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma {
    display: none !important;
  }
  .participate-page .guide-apply-box .apply-single-line {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-break: strict !important;
    font-size: clamp(12px, 3.3vw, 14px) !important;
    line-height: 1.7 !important;
  }
}


/* kumamuchizu_122: keep illustration on the right, move it upward, avoid overlap */
.participate-page .page-head.with-illustration {
  min-height: 315px !important;
  overflow: hidden !important;
}

.participate-page .page-head.with-illustration .page-head-main {
  padding-left: 0 !important;
  padding-right: 220px !important;
}

.participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma {
  position: absolute !important;
  right: 10px !important;
  left: auto !important;
  top: -42px !important;
  width: 290px !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.participate-page .participate-head-kuma img {
  width: 185% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

@media (max-width: 1100px) {
  .participate-page .page-head.with-illustration {
    min-height: 300px !important;
  }
  .participate-page .page-head.with-illustration .page-head-main {
    padding-right: 180px !important;
  }
  .participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma {
    right: 2px !important;
    top: -34px !important;
    width: 250px !important;
  }
  .participate-page .participate-head-kuma img {
    width: 175% !important;
  }
}

@media (max-width: 760px) {
  .participate-page .page-head.with-illustration {
    min-height: 0 !important;
    overflow: visible !important;
  }
  .participate-page .page-head.with-illustration .page-head-main {
    padding-right: 0 !important;
  }
  .participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma {
    display: none !important;
  }
  .participate-page .join-cta.top p,
  .participate-page .guide-apply-box .apply-single-line {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-break: strict !important;
  }
}


/* kumamuchizu_123: final override for participate header illustration.
   Keep it on the right, move the visible drawing up, reserve text space, and hide on mobile. */
.participate-page .page-head.with-illustration {
  position: relative !important;
  min-height: 330px !important;
  overflow: hidden !important;
  display: block !important;
}

.participate-page .page-head.with-illustration .page-head-main {
  position: relative !important;
  z-index: 2 !important;
  padding-left: 0 !important;
  padding-right: 390px !important;
  max-width: none !important;
}

.participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: -170px !important;
  width: 330px !important;
  height: 330px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.participate-page .participate-head-kuma img {
  display: block !important;
  width: 200% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  transform: none !important;
  object-fit: contain !important;
}

.participate-page .join-cta.top {
  position: relative !important;
  z-index: 3 !important;
  margin-top: 10px !important;
}

@media (max-width: 1100px) {
  .participate-page .page-head.with-illustration {
    min-height: 305px !important;
  }

  .participate-page .page-head.with-illustration .page-head-main {
    padding-right: 340px !important;
  }

  .participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma {
    right: 0 !important;
    top: -145px !important;
    width: 290px !important;
    height: 290px !important;
  }
}

@media (max-width: 760px) {
  .participate-page .page-head.with-illustration {
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
  }

  .participate-page .page-head.with-illustration .page-head-main {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma {
    display: none !important;
  }

  .participate-page .join-cta.top p,
  .participate-page .guide-apply-box .apply-single-line,
  .participate-page .guide-apply-box p {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-break: strict !important;
    max-width: 100% !important;
  }

  .participate-page .guide-apply-box,
  .participate-page .guide-apply-box-linkonly > div {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}


/* kumamuchizu_124: participate illustration shifted left and guaranteed fully visible */
.participate-page .page-head.with-illustration {
  position: relative !important;
  min-height: 330px !important;
  overflow: visible !important;
  display: block !important;
}

.participate-page .page-head.with-illustration .page-head-main {
  position: relative !important;
  z-index: 2 !important;
  padding-left: 0 !important;
  padding-right: 430px !important;
  max-width: none !important;
}

.participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma {
  position: absolute !important;
  right: 34px !important;
  left: auto !important;
  top: 12px !important;
  width: 360px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.participate-page .participate-head-kuma img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.participate-page .join-cta.top {
  position: relative !important;
  z-index: 3 !important;
  margin-top: 10px !important;
}

@media (max-width: 1100px) {
  .participate-page .page-head.with-illustration {
    min-height: 305px !important;
  }
  .participate-page .page-head.with-illustration .page-head-main {
    padding-right: 360px !important;
  }
  .participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma {
    right: 20px !important;
    top: 16px !important;
    width: 300px !important;
  }
}

@media (max-width: 760px) {
  .participate-page .page-head.with-illustration {
    min-height: 0 !important;
    overflow: visible !important;
  }
  .participate-page .page-head.with-illustration .page-head-main {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma {
    display: none !important;
  }
  .participate-page .join-cta.top p,
  .participate-page .guide-apply-box .apply-single-line,
  .participate-page .guide-apply-box p {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-break: strict !important;
    max-width: 100% !important;
  }
  .participate-page .guide-apply-box,
  .participate-page .guide-apply-box-linkonly > div {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}


/* kumamuchizu_125: keep the same image for “これから申し込む人へ” on PC/mobile,
   and keep the users summary stats in one horizontal row on mobile. */
.participate-page .web-guide-photo {
  min-height: 190px !important;
  max-height: 260px !important;
}

.participate-page .web-guide-photo img {
  width: 100% !important;
  height: auto !important;
  max-height: 260px !important;
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 760px) {
  .participate-page .web-guide-photo {
    min-height: 150px !important;
    max-height: 210px !important;
  }
  .participate-page .web-guide-photo img {
    max-height: 210px !important;
  }

  /* Users page top stats: 3 items in one row, not stacked vertically */
  .users-page .users-summary,
  .users-page .users-stats,
  .users-page .summary-stats,
  .users-page .stats-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .users-page .users-summary > *,
  .users-page .users-stats > *,
  .users-page .summary-stats > *,
  .users-page .stats-row > * {
    min-width: 0 !important;
  }
}


/* kumamuchizu_126: mobile adjustments requested by user */
@media (max-width: 560px) {
  .tardigrade-v89 .workflow-panel h2 {
    white-space: nowrap !important;
    font-size: clamp(18px, 5.6vw, 24px) !important;
    letter-spacing: -0.02em;
  }
}

/* Participate page: remove the frame around the “これから申し込む人へ” image but keep current size */
.participate-page .web-guide-photo {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Users page: keep top summary row on mobile, force 総採集 / 地点数 line break, restore original panel look */
@media (max-width: 760px) {
  .users-page .users-summary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .users-page .users-summary div {
    background: rgba(255,253,245,.90) !important;
    border: 1px solid rgba(31,107,67,.14) !important;
    box-shadow: 0 12px 28px rgba(35,76,38,.08) !important;
    border-radius: 24px !important;
    padding: 18px 10px !important;
  }
  .users-page .users-summary span {
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-align: center;
  }
  .users-page .users-summary strong {
    font-size: clamp(24px, 6vw, 34px) !important;
    text-align: center;
  }
}


/* kumamuchizu_127: requested mobile refinements */
.participate-page .web-guide-photo.web-guide-photo-placeholder {
  min-height: 190px !important;
  max-height: 260px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(223,248,240,.88) !important;
  border: 3px solid rgba(64,190,174,.58) !important;
  border-radius: 26px !important;
  overflow: hidden !important;
}
.participate-page .guide-illustration-placeholder {
  text-align: center;
  color: rgba(31,107,67,.72);
  font-weight: 900;
  line-height: 1.6;
  font-size: clamp(18px, 2.1vw, 24px);
}
.participate-page .guide-illustration-placeholder span {
  display: block;
  font-size: 13px;
  color: rgba(31,107,67,.58);
}

/* Users summary panels: color the three cards */
.users-page .users-summary div:nth-child(1) {
  background: linear-gradient(135deg, rgba(255,243,200,.95), rgba(255,250,233,.96)) !important;
  border-color: rgba(228,178,72,.28) !important;
}
.users-page .users-summary div:nth-child(2) {
  background: linear-gradient(135deg, rgba(223,248,240,.96), rgba(243,255,251,.96)) !important;
  border-color: rgba(64,190,174,.28) !important;
}
.users-page .users-summary div:nth-child(3) {
  background: linear-gradient(135deg, rgba(239,233,255,.96), rgba(250,248,255,.96)) !important;
  border-color: rgba(135,113,211,.22) !important;
}

@media (max-width: 560px) {
  .tardigrade-v89 .workflow-panel h2 {
    font-size: clamp(17px, 5.1vw, 22px) !important;
    letter-spacing: -0.03em;
  }

  .participate-page .web-guide-photo.web-guide-photo-placeholder {
    min-height: 150px !important;
    max-height: 210px !important;
  }

  .users-page .users-summary {
    gap: 8px !important;
  }
  .users-page .users-summary div {
    padding: 16px 8px !important;
  }
}


/* kumamuchizu_129: targeted mobile fix for home cards.
   Keep illustration frames visible; move corner frames into the flow on phones
   so headings such as “みんなの力で...” do not clip horizontally. */
@media (max-width: 760px) {
  .home-sections .has-corner-illustration {
    padding-right: 18px !important;
    overflow: visible !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .home-sections .has-corner-illustration .corner-illustration {
    display: grid !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 130px !important;
    margin: 14px 0 0 !important;
    box-sizing: border-box !important;
  }

  .home-sections .intro-card h2 {
    font-size: clamp(20px, 5.4vw, 25px) !important;
    line-height: 1.35 !important;
    letter-spacing: -0.03em;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    max-width: 100% !important;
  }

  .home-sections .has-corner-illustration h2,
  .home-sections .has-corner-illustration p {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

@media (max-width: 390px) {
  .home-sections .intro-card h2 {
    font-size: clamp(19px, 5.25vw, 23px) !important;
    line-height: 1.34 !important;
  }
}


/* kumamuchizu_130: requested home intro heading line break */
.home-intro-title-line {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .home-sections .intro-card h2 .home-intro-title-line {
    white-space: nowrap !important;
  }
  .home-sections .intro-card h2 {
    font-size: clamp(19px, 5.05vw, 24px) !important;
    line-height: 1.36 !important;
    letter-spacing: -0.035em;
  }
}

@media (max-width: 390px) {
  .home-sections .intro-card h2 {
    font-size: clamp(18px, 4.85vw, 22px) !important;
    letter-spacing: -0.04em;
  }
}


/* kumamuchizu_131: replace header and top text logo with provided image logo */
.site-nav-brand.logo-brand {
  background: transparent !important;
  color: inherit !important;
  padding: 2px 6px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  line-height: 1 !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.site-nav-brand.logo-brand img {
  display: block !important;
  width: auto !important;
  height: clamp(34px, 4.3vw, 54px) !important;
  max-width: min(240px, 42vw) !important;
  object-fit: contain !important;
}

.top-page .title-card h1.home-logo-title,
.home-logo-title {
  margin: 0 0 0.06em !important;
  padding: 0 !important;
  min-height: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  white-space: normal !important;
}

.top-page .title-card h1.home-logo-title img,
.home-logo-title img {
  display: block !important;
  width: min(620px, 92vw) !important;
  height: auto !important;
  max-height: 188px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

@media (max-width: 760px) {
  .site-nav-brand.logo-brand {
    padding: 1px 2px !important;
  }
  .site-nav-brand.logo-brand img {
    height: 34px !important;
    max-width: 150px !important;
  }
  .top-page .title-card h1.home-logo-title img,
  .home-logo-title img {
    width: min(92vw, 430px) !important;
    max-height: 130px !important;
  }
}

@media (max-width: 390px) {
  .site-nav-brand.logo-brand img {
    height: 31px !important;
    max-width: 136px !important;
  }
  .top-page .title-card h1.home-logo-title img,
  .home-logo-title img {
    width: min(92vw, 360px) !important;
    max-height: 112px !important;
  }
}

/* kumamuchizu_143: restore top hero from the last stable v131 stylesheet,
   but use Haruka's prepared three hero image variants.
   This file intentionally removes the failed v139-v142 top-hero overrides by replacing styles.css wholesale. */
.top-page .tardigrade.top-hero-tardigrade.hero-user-sprite {
  display: block !important;
  position: absolute !important;
  z-index: 9 !important;
  width: clamp(118px, 14.5vw, 182px) !important;
  height: clamp(94px, 11.5vw, 145px) !important;
  aspect-ratio: auto !important;
  left: 34%;
  top: 73.5%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: drop-shadow(0 18px 18px rgba(29, 82, 50, .22)) !important;
  transform-origin: center center !important;
  animation: topHeroKumaTravel143 5.2s cubic-bezier(.48, 0, .18, 1) .35s both !important;
}

.top-page .top-hero-tardigrade.hero-user-sprite .tardi,
.top-page .top-hero-tardigrade.hero-user-sprite .seg,
.top-page .top-hero-tardigrade.hero-user-sprite .eye,
.top-page .top-hero-tardigrade.hero-user-sprite .leg,
.top-page .top-hero-tardigrade.hero-user-sprite::before,
.top-page .top-hero-tardigrade.hero-user-sprite::after {
  content: none !important;
  display: none !important;
}

.top-page .top-hero-tardigrade.hero-user-sprite .top-kuma-bob {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  animation: topHeroKumaBob143 .55s ease-in-out infinite alternate !important;
}

.top-page .top-hero-tardigrade.hero-user-sprite .hero-kuma-frame {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 0;
  visibility: visible !important;
  background: transparent !important;
  pointer-events: none !important;
  user-select: none !important;
}

.top-page .top-hero-tardigrade.hero-user-sprite .hero-kuma-walk-1 {
  animation: topHeroWalkFrame1_143 5.2s steps(1, end) .35s both !important;
}

.top-page .top-hero-tardigrade.hero-user-sprite .hero-kuma-walk-2 {
  animation: topHeroWalkFrame2_143 5.2s steps(1, end) .35s both !important;
}

.top-page .top-hero-tardigrade.hero-user-sprite .hero-kuma-final {
  animation: topHeroFinalFrame143 5.2s steps(1, end) .35s both !important;
}

/* Keep the original v131 map path: start around western Japan and finish around northern Japan. */
@keyframes topHeroKumaTravel143 {
  0%   { left: 34%;   top: 73.5%; transform: translate(-50%, -50%) rotate(-32deg) scale(.95); }
  50%  { left: 51%;   top: 56%;   transform: translate(-50%, -50%) rotate(-24deg) scale(1.02); }
  100% { left: 62.5%; top: 31.5%; transform: translate(-50%, -50%) rotate(8deg) scale(1.08); }
}

@keyframes topHeroKumaBob143 {
  from { translate: 0 -3px; }
  to   { translate: 0 4px; }
}

/* Alternate the two walking variants while moving; switch to the third variant at the end. */
@keyframes topHeroWalkFrame1_143 {
  0%, 9.99%, 20%, 29.99%, 40%, 49.99%, 60%, 69.99%, 80%, 89.99% { opacity: 1; }
  10%, 19.99%, 30%, 39.99%, 50%, 59.99%, 70%, 79.99%, 90%, 100% { opacity: 0; }
}

@keyframes topHeroWalkFrame2_143 {
  0%, 9.99%, 20%, 29.99%, 40%, 49.99%, 60%, 69.99%, 80%, 89.99% { opacity: 0; }
  10%, 19.99%, 30%, 39.99%, 50%, 59.99%, 70%, 79.99%, 90%, 94.99% { opacity: 1; }
  95%, 100% { opacity: 0; }
}

@keyframes topHeroFinalFrame143 {
  0%, 94.99% { opacity: 0; }
  95%, 100% { opacity: 1; }
}

/* Make the title card visible using the last stable v131 layout. */
.top-page .title-card {
  z-index: 12 !important;
}

@media (max-width: 760px) {
  .top-page .tardigrade.top-hero-tardigrade.hero-user-sprite {
    width: clamp(92px, 26vw, 138px) !important;
    height: clamp(74px, 21vw, 112px) !important;
  }
}


/* kumamuchizu_145: keep the restored user-provided top hero animation,
   but show the speech bubble only after the final/turned frame appears. */
.top-page .speech {
  display: block !important;
  position: absolute !important;
  left: 77% !important;
  top: 24% !important;
  z-index: 13 !important;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) translateY(14px) scale(.94);
  animation: topSpeechBubbleIn145 .55s ease 5.65s forwards !important;
}

@keyframes topSpeechBubbleIn145 {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) translateY(14px) scale(.94);
  }
  1% {
    opacity: 0;
    visibility: visible;
    transform: translate(-50%, -50%) translateY(14px) scale(.94);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) translateY(0) scale(1);
  }
}

@media (max-width: 700px) {
  .top-page .speech {
    left: 70% !important;
    top: 22% !important;
    transform: translate(-50%, -50%) translateY(12px) scale(.82);
    animation-name: topSpeechBubbleIn145Mobile !important;
  }

  @keyframes topSpeechBubbleIn145Mobile {
    0% {
      opacity: 0;
      visibility: hidden;
      transform: translate(-50%, -50%) translateY(12px) scale(.82);
    }
    1% {
      opacity: 0;
      visibility: visible;
      transform: translate(-50%, -50%) translateY(12px) scale(.82);
    }
    100% {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, -50%) translateY(0) scale(.86);
    }
  }
}

/* kumamuchizu_146: ranking title one-line + news/blog reset. */
#rankingTitle.home-ranking-title,
.top-page .ranking-panel h2#rankingTitle.home-ranking-title {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  font-size: clamp(24px, 4.1vw, 46px) !important;
}
#rankingTitle .ranking-title-one-line {
  display: inline-block !important;
  white-space: nowrap !important;
}
@media (max-width: 760px) {
  #rankingTitle.home-ranking-title,
  .top-page .ranking-panel h2#rankingTitle.home-ranking-title {
    font-size: clamp(18px, 5.05vw, 24px) !important;
    letter-spacing: -.045em !important;
  }
}
@media (max-width: 390px) {
  #rankingTitle.home-ranking-title,
  .top-page .ranking-panel h2#rankingTitle.home-ranking-title {
    font-size: clamp(16px, 4.8vw, 20px) !important;
    letter-spacing: -.06em !important;
  }
}

.news-blog-card,
.news-empty {
  display: grid;
  grid-template-columns: minmax(160px, 260px) 1fr;
  gap: 18px;
  align-items: stretch;
  padding: 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(31, 107, 67, .12);
  box-shadow: 0 12px 26px rgba(36, 80, 47, .10);
}
.news-blog-card-compact {
  grid-template-columns: 128px 1fr;
  gap: 14px;
  padding: 12px;
}
.news-thumb-wrap {
  min-width: 0;
}
.news-thumb {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 136px;
  object-fit: cover;
  border-radius: 18px;
  background: rgba(232, 244, 223, .8);
}
.news-blog-card-compact .news-thumb {
  min-height: 94px;
}
.news-image-caption {
  display: block;
  margin-top: 7px;
  color: rgba(20, 61, 42, .62);
  font-size: 12px;
  line-height: 1.5;
}
.news-blog-body {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}
.news-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.news-meta time,
.news-blog-body time {
  color: rgba(20, 61, 42, .62);
  font-weight: 900;
}
.news-meta .tag,
.news-blog-body .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: #e8f4df;
  color: var(--green);
  font-weight: 900;
  font-size: 12px;
}
.news-blog-body strong,
.news-blog-body h2 {
  margin: 0;
  color: var(--green);
  font-size: clamp(19px, 2.4vw, 28px);
  line-height: 1.28;
}
.news-blog-card-compact .news-blog-body strong {
  font-size: clamp(16px, 2vw, 22px);
}
.news-blog-body p,
.news-detail p {
  margin: 0;
  color: #405540;
  line-height: 1.8;
}
.news-empty {
  grid-template-columns: 1fr;
  text-align: left;
}
.news-empty strong {
  color: var(--green);
  font-size: clamp(20px, 3vw, 30px);
}
.news-empty span {
  color: rgba(20, 61, 42, .68);
}
.news-page-body {
  padding: 32px 16px 72px;
}
.news-page {
  width: min(980px, 100%);
  margin: 0 auto;
}
.news-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin: 110px 0 20px;
}
.news-header h1 {
  margin: .1em 0 .15em;
  color: var(--green);
  font-size: clamp(38px, 7vw, 78px);
  line-height: 1.04;
}
.news-header p:last-child {
  margin: 0;
  color: rgba(20, 61, 42, .72);
}
.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: var(--green);
  font-weight: 900;
  border: 1px solid rgba(31,107,67,.14);
  white-space: nowrap;
}
.news-blog-list {
  display: grid;
  gap: 16px;
}
@media (max-width: 760px) {
  .news-header {
    display: grid;
    margin-top: 96px;
  }
  .news-blog-card,
  .news-blog-card-compact {
    grid-template-columns: 1fr;
  }
  .news-thumb,
  .news-blog-card-compact .news-thumb {
    height: auto;
    min-height: 0;
    max-height: 260px;
  }
}

/* kumamuchizu_147: news gallery supports multiple photos per post. */
.news-gallery {
  display: grid;
  gap: 10px;
  align-content: start;
}
.news-gallery .news-photo-item {
  margin: 0;
  min-width: 0;
}
.news-gallery-multi {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.news-gallery-multi .news-photo-item:first-child {
  grid-column: 1 / -1;
}
.news-gallery-multi .news-thumb {
  height: 128px;
  min-height: 0;
}
.news-gallery-multi .news-photo-item:first-child .news-thumb {
  min-height: 156px;
  height: 176px;
}
.news-blog-card-compact .news-thumb-wrap {
  position: relative;
}
.news-image-count {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(20, 61, 42, .82);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 8px 18px rgba(20, 61, 42, .18);
}
@media (max-width: 760px) {
  .news-gallery-multi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .news-gallery-multi .news-photo-item:first-child {
    grid-column: 1 / -1;
  }
  .news-gallery-multi .news-thumb,
  .news-gallery-multi .news-photo-item:first-child .news-thumb {
    height: auto;
    max-height: 260px;
  }
}

/* kumamuchizu_150: news detail body and click-to-enlarge photos. */
.news-blog-card .news-detail {
  display: block;
}
.news-image-button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  cursor: zoom-in;
  text-align: inherit;
  font: inherit;
  overflow: hidden;
}
.news-image-button .news-thumb {
  transition: transform .18s ease, filter .18s ease;
}
.news-image-button:hover .news-thumb,
.news-image-button:focus-visible .news-thumb {
  transform: scale(1.025);
  filter: brightness(1.02);
}
.news-image-button:focus-visible {
  outline: 3px solid rgba(31, 107, 67, .45);
  outline-offset: 3px;
}
.news-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: min(5vw, 40px);
}
.news-lightbox.open {
  display: flex;
}
.news-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 31, 22, .72);
  backdrop-filter: blur(5px);
}
.news-lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(960px, 96vw);
  max-height: 92vh;
  margin: 0;
  padding: 14px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}
.news-lightbox-image {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 18px;
  background: rgba(232, 244, 223, .72);
}
.news-lightbox-caption {
  margin-top: 10px;
  color: #405540;
  line-height: 1.7;
  font-weight: 700;
}
.news-lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--green);
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(20, 61, 42, .22);
}
body.news-lightbox-open {
  overflow: hidden;
}
@media (max-width: 760px) {
  .news-lightbox {
    padding: 14px;
  }
  .news-lightbox-panel {
    padding: 10px;
    border-radius: 18px;
  }
  .news-lightbox-close {
    top: 6px;
    right: 6px;
  }
}
/* kumamuchizu_151: replace the specified illustration placeholders with supplied artwork. */
.corner-illustration img,
.tardi-illo-slot img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.corner-illustration:has(img),
.tardi-illo-slot:has(img) {
  border: 0;
  background: transparent;
  padding: 0;
}

.top-page .news-panel.has-corner-illustration {
  padding-right: clamp(22px, 3.6vw, 34px) !important;
}

.top-page .news-panel .news-illustration {
  position: relative !important;
  inset: auto !important;
  width: min(220px, 48%) !important;
  min-height: 0 !important;
  aspect-ratio: 1;
  margin: 0 auto 18px !important;
}

.top-page .news-panel .news-list,
.top-page .news-panel .news-more,
.top-page .news-panel .news-pager-controls {
  margin-right: 0 !important;
}

/* kumamuchizu_152: enlarge supplied artwork and keep the home news art at top-right. */
.top-page .japan-map {
  transform: scale(1.08);
}

.top-page .intro-card .corner-illustration {
  width: 228px !important;
  min-height: 146px !important;
}

.top-page .home-duo-cards .corner-illustration {
  width: 180px !important;
  min-height: 118px !important;
}

.tardigrade-v89 .tardi-info-card {
  padding-right: 142px;
}

.tardigrade-v89 .tardi-illo-slot,
.tardigrade-v87 .tardi-illo-slot,
.tardi-illo-slot {
  width: 106px;
  height: 138px;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.top-page .news-panel.has-corner-illustration {
  position: relative !important;
  padding-right: clamp(22px, 3.6vw, 34px) !important;
}

.top-page .news-panel .news-illustration {
  position: absolute !important;
  inset: 18px 24px auto auto !important;
  width: 250px !important;
  min-height: 0 !important;
  aspect-ratio: 1;
  margin: 0 !important;
}

.top-page .news-panel .news-list {
  padding-right: 270px;
}

.top-page .news-panel .news-more,
.top-page .news-panel .news-pager-controls {
  margin-right: 0 !important;
}

@media (max-width: 760px) {
  .top-page .intro-card .corner-illustration {
    width: min(100%, 250px) !important;
    min-height: 154px !important;
  }

  .top-page .home-duo-cards .corner-illustration {
    width: 100% !important;
    min-height: 116px !important;
  }

  .top-page .news-panel .news-illustration {
    inset: 18px 18px auto auto !important;
    width: 132px !important;
  }

  .top-page .news-panel .news-list {
    padding-right: 140px;
  }
}

@media (max-width: 560px) {
  .tardigrade-v89 .tardi-info-card,
  .tardigrade-v87 .tardi-info-card {
    padding: 18px;
  }

  .tardigrade-v89 .tardi-illo-slot,
  .tardigrade-v87 .tardi-illo-slot,
  .tardi-illo-slot {
    width: 100%;
    height: 112px;
  }
}

@media (max-width: 390px) {
  .top-page .news-panel .news-illustration {
    width: 112px !important;
    right: 14px !important;
  }

  .top-page .news-panel .news-list {
    padding-right: 116px;
  }
}

/* kumamuchizu_153: keep supplied artwork at its natural aspect ratio.
   Undo the oversized v152 home artwork while retaining the larger Japan map. */
.corner-illustration img,
.tardi-illo-slot img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.top-page .intro-card .corner-illustration {
  width: 190px !important;
  min-height: 122px !important;
}

.top-page .home-duo-cards .corner-illustration {
  width: 150px !important;
  min-height: 98px !important;
}

.top-page .news-panel .news-illustration {
  width: 205px !important;
  aspect-ratio: auto;
}

.top-page .news-panel .news-list {
  padding-right: 220px;
}

.tardigrade-v89 .tardi-illo-slot,
.tardigrade-v87 .tardi-illo-slot,
.tardi-illo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

@media (max-width: 760px) {
  .top-page .intro-card .corner-illustration {
    width: min(100%, 205px) !important;
    min-height: 126px !important;
  }

  .top-page .home-duo-cards .corner-illustration {
    width: 100% !important;
    min-height: 96px !important;
  }

  .top-page .news-panel .news-illustration {
    width: 112px !important;
  }

  .top-page .news-panel .news-list {
    padding-right: 120px;
  }
}

@media (max-width: 390px) {
  .top-page .news-panel .news-illustration {
    width: 96px !important;
  }

  .top-page .news-panel .news-list {
    padding-right: 100px;
  }
}

/* kumamuchizu_154: enlarge only the About artwork and keep tardigrade art visible. */
.top-page .intro-card .corner-illustration {
  width: 228px !important;
  min-height: 146px !important;
}

.tardigrade-page .tardi-illo-slot img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

@media (max-width: 760px) {
  .top-page .intro-card .corner-illustration {
    width: min(100%, 246px) !important;
    min-height: 151px !important;
  }
}

/* kumamuchizu_158: stable, cache-busted home artwork placement. */
@media (min-width: 901px) {
  .top-page .intro-card.has-corner-illustration {
    min-height: 360px;
    padding-right: 370px !important;
  }

  .top-page .intro-card .corner-illustration {
    top: auto !important;
    right: 14px !important;
    bottom: 4px !important;
    width: 340px !important;
    height: 340px !important;
    min-height: 0 !important;
    aspect-ratio: auto;
    margin: 0 !important;
    overflow: visible;
  }

  .top-page .intro-card .corner-illustration img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: right bottom;
  }
}

/* kumamuchizu_163: supplied illustrations and neutral image placeholders */
.page-head-illustration:has(img),
.site-card-illustration:has(img),
.inline-illustration:has(img),
.research-illo-large:has(img),
.participate-page .web-guide-photo.web-guide-photo-placeholder:has(img) {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  overflow: hidden;
}

.page-head-illustration img,
.site-card-illustration img,
.inline-illustration img,
.research-illo-large img,
.participate-page .guide-illustration-placeholder img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.site-card-illustration:has(img) {
  min-height: 106px;
  height: 106px;
}

.page-head.with-illustration .page-head-illustration:has(img),
.records-header.with-illustration .page-head-illustration:has(img) {
  min-height: 150px;
  height: 150px;
}

.tardigrade-page .research-illo-large:has(img) {
  min-height: 360px;
}

.tardigrade-page .workflow-panel .corner-illustration:has(img) {
  width: min(220px, 30%);
  aspect-ratio: 1;
}

.tardigrade-page .inline-illustration:has(img) {
  min-height: 220px;
}

.participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma:has(img) {
  width: min(280px, 34vw) !important;
  height: 180px !important;
  min-height: 180px !important;
}

.participate-page .web-guide-photo.web-guide-photo-placeholder:has(img) {
  min-height: 220px !important;
  max-height: 260px !important;
}

.participate-page .guide-illustration-placeholder:has(img) {
  width: 100%;
  height: 100%;
}

@media (max-width: 700px) {
  .site-card-illustration:has(img) {
    height: 150px;
  }
  .tardigrade-page .workflow-panel .corner-illustration:has(img) {
    width: min(260px, 72%);
  }
}

@media (max-width: 900px) {
  .top-page .intro-card.has-corner-illustration {
    padding-bottom: 280px !important;
  }

  .top-page .intro-card .corner-illustration {
    top: auto !important;
    right: 10px !important;
    bottom: 4px !important;
    width: min(280px, calc(100% - 20px)) !important;
    height: 280px !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .top-page .intro-card .corner-illustration img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: right bottom;
  }
}

/* kumamuchizu_173: illustration-only corrections.
   Text structure and existing card composition remain unchanged. */
.classification-two-lines .keep-together {
  display: inline-block;
  white-space: nowrap;
}

@media (min-width: 981px) {
  .tardigrade-page .classification-two-lines {
    font-size: .93rem;
    letter-spacing: -.01em;
  }
}

@media (min-width: 901px) {
  .page-illustration-body .page-head.with-illustration,
  .page-illustration-body .records-header.with-illustration {
    grid-template-columns: minmax(0, 1fr) 280px auto !important;
    align-items: start !important;
  }

  .page-illustration-body .page-head.with-illustration .page-head-illustration,
  .page-illustration-body .records-header.with-illustration .page-head-illustration {
    position: static !important;
    inset: auto !important;
    width: 280px !important;
    height: 280px !important;
    min-height: 280px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: none !important;
    align-self: start !important;
    justify-self: center !important;
  }

  .page-illustration-body .page-head-illustration img,
  .page-illustration-body .records-header .page-head-illustration img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  .users-page .page-head.with-illustration {
    min-height: 280px !important;
  }

  .sitemap-page .site-card.with-sitemap-illustration {
    grid-template-columns: minmax(0, 1fr) 160px;
    align-items: center;
  }

  .sitemap-page .site-card-illustration:has(img) {
    width: 160px;
    height: 160px;
    min-height: 160px;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .sitemap-page .site-card-illustration img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  .tardigrade-page .tardi-info-card .tardi-illo-slot {
    top: auto !important;
    right: 14px !important;
    bottom: 14px !important;
    width: 120px !important;
    height: 120px !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .tardigrade-page .tardi-info-card .tardi-illo-slot img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }
}

/* kumamuchizu_174: clickable sitemap cards, aligned statistics, and moss ranking. */
.sitemap-page a.site-card {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.sitemap-page a.site-card:hover {
  transform: translateY(-3px);
  border-color: rgba(31, 107, 67, .30);
  box-shadow: 0 22px 54px rgba(35, 76, 38, .16);
}

.sitemap-page a.site-card:focus-visible {
  outline: 4px solid rgba(31, 107, 67, .30);
  outline-offset: 4px;
}

.top-page .stat-links .quick-link {
  grid-template-rows: 3.2em minmax(0, 1fr) auto !important;
}

.top-page .stat-links .quick-link > span {
  height: 3.2em !important;
  min-height: 3.2em !important;
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
}

.user-stat-grid > div,
.users-summary > div {
  display: grid !important;
  grid-template-rows: 3em auto !important;
  align-content: start !important;
}

.user-stat-grid > div > span,
.users-summary > div > span {
  height: 3em !important;
  min-height: 3em !important;
  line-height: 1.5 !important;
}

.user-stat-grid > div > strong,
.users-summary > div > strong {
  margin-top: 8px !important;
}

#rankingTitle.home-ranking-title[data-ranking-key="foundMoss"],
.top-page .ranking-panel h2#rankingTitle.home-ranking-title[data-ranking-key="foundMoss"] {
  white-space: normal !important;
  font-size: clamp(24px, 3.2vw, 36px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
}

#rankingTitle[data-ranking-key="foundMoss"] .ranking-title-two-lines {
  display: inline-block !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  #rankingTitle.home-ranking-title[data-ranking-key="foundMoss"],
  .top-page .ranking-panel h2#rankingTitle.home-ranking-title[data-ranking-key="foundMoss"] {
    font-size: clamp(16px, 4.5vw, 20px) !important;
    line-height: 1.22 !important;
    letter-spacing: -.035em !important;
  }
}

/* kumamuchizu_180: smartphone layout pass.
   Keep the accepted desktop layout while removing mobile-only fixed heights,
   clipping and overlaps reported from the live phone view. */
.stat-mobile-break {
  display: none;
}

.home-duo-cards .home-duo-description {
  margin: 0;
  color: #405540;
  line-height: 1.85;
}

.tardigrade-page .research-heading span {
  display: inline;
}

@keyframes topHeroKumaTravel180Mobile {
  0% {
    translate: -92px 70px;
  }
  52% {
    translate: -48px 34px;
  }
  100% {
    translate: 0 0;
  }
}

@media (max-width: 760px) {
  /* Keep the whole title and all three actions in the first phone viewport. */
  .top-page .site-nav {
    width: calc(100% - 16px) !important;
    margin: 6px auto !important;
    padding: 7px 8px !important;
  }

  .top-page .site-nav-brand.logo-brand img {
    height: 29px !important;
    max-width: 132px !important;
  }

  .top-page .site-nav-links {
    gap: 3px !important;
  }

  .top-page .site-nav-links a {
    padding: 5px 7px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }

  .top-page .hero {
    padding: 0 0 20px !important;
  }

  .top-page .map-wrap {
    width: min(100%, 460px) !important;
    height: clamp(485px, calc(100svh - 132px), 610px) !important;
    min-height: 0 !important;
    padding: 0 8px 6px !important;
    overflow: hidden !important;
  }

  .top-page .map-area {
    inset: 0 -18px auto -18px !important;
    width: auto !important;
    height: 68% !important;
    transform: rotate(-2deg) scale(1) !important;
    opacity: .90 !important;
  }

  .top-page .japan-map {
    transform: scale(.96) !important;
    transform-origin: center !important;
    object-fit: contain !important;
  }

  .top-page .title-card {
    left: 8px !important;
    right: 8px !important;
    bottom: 6px !important;
    width: auto !important;
    padding: 9px 11px 11px !important;
    border-radius: 22px !important;
  }

  .top-page .project-name {
    margin-bottom: 0 !important;
    font-size: 9.5px !important;
    line-height: 1.15 !important;
  }

  .top-page .title-card h1.home-logo-title img,
  .top-page .home-logo-title img {
    width: min(78vw, 292px) !important;
    max-height: 84px !important;
  }

  .top-page .subtitle {
    margin: 0 0 7px !important;
    font-size: clamp(14px, 4vw, 17px) !important;
    line-height: 1.25 !important;
  }

  .top-page .actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .top-page .actions .button {
    min-height: 38px !important;
    padding: 8px 8px !important;
    font-size: 13px !important;
  }

  .top-page .hero-tardigrade-link {
    margin-top: 6px !important;
  }

  .top-page .hero-tardigrade-link a {
    min-height: 36px !important;
    padding: 7px 10px !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
  }

  /* The mascot now travels to the speech bubble and stops just before it. */
  .top-page .tardigrade.top-hero-tardigrade.hero-user-sprite {
    left: 50% !important;
    top: 142px !important;
    width: clamp(72px, 21vw, 88px) !important;
    height: clamp(58px, 17vw, 72px) !important;
    transform: translate(-50%, -50%) rotate(8deg) !important;
    animation: topHeroKumaTravel180Mobile 5.2s cubic-bezier(.48, 0, .18, 1) .35s both !important;
  }

  .top-page .speech,
  .top-page .speech-bubble,
  .top-page .bubble {
    left: auto !important;
    right: 4px !important;
    top: 38px !important;
    width: clamp(108px, 32vw, 142px) !important;
    transform: none !important;
    padding: 0 !important;
    font-size: clamp(11.5px, 3.4vw, 14px) !important;
    line-height: 1.18 !important;
  }

  .top-page .speech .speech-text,
  .top-page .speech-bubble .speech-text,
  .top-page .bubble .speech-text {
    left: 52%;
    top: 46%;
    width: 69%;
    position: absolute;
    transform: translate(-50%, -50%);
  }

  /* About: remove the duplicated image-height padding below the illustration. */
  .top-page .intro-card.has-corner-illustration {
    padding: 22px !important;
    overflow: hidden !important;
  }

  .top-page .intro-card .corner-illustration {
    position: relative !important;
    inset: auto !important;
    width: min(100%, 230px) !important;
    height: 220px !important;
    min-height: 0 !important;
    margin: 12px auto 0 !important;
    overflow: visible !important;
  }

  /* Three deliberate lines and a shared label height keep all figures aligned. */
  .stat-mobile-break {
    display: block;
  }

  .top-page .stat-links .quick-link {
    grid-template-rows: 4.4em minmax(0, 1fr) auto !important;
  }

  .top-page .stat-links .quick-link > span {
    height: 4.4em !important;
    min-height: 4.4em !important;
    line-height: 1.45 !important;
    word-break: keep-all !important;
  }

  /* Compact home cards: heading, image, description, then buttons. */
  .top-page .home-duo-cards .tardigrade-card.has-corner-illustration,
  .top-page .home-duo-cards .participation-card.has-corner-illustration {
    contain: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 9px !important;
    padding: 18px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .top-page .home-duo-cards .home-duo-heading {
    order: 1 !important;
    min-width: 0 !important;
  }

  .top-page .home-duo-cards .home-duo-heading h2 {
    margin-bottom: 0 !important;
  }

  .top-page .home-duo-cards .corner-illustration {
    order: 2 !important;
    position: relative !important;
    inset: auto !important;
    width: min(100%, 205px) !important;
    height: 148px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  .top-page .home-duo-cards .home-duo-description {
    order: 3 !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  .top-page .home-duo-cards .button-row {
    order: 4 !important;
    position: static !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  .top-page .home-duo-cards .participation-card .button-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .top-page .home-duo-cards .button-row a {
    min-height: 40px !important;
    padding: 8px 8px !important;
    font-size: 13px !important;
  }

  /* News artwork also stays fully inside its own in-flow box. */
  .top-page .news-panel.has-corner-illustration {
    padding: 20px !important;
    overflow: hidden !important;
  }

  .top-page .news-panel .news-illustration {
    position: relative !important;
    inset: auto !important;
    width: min(100%, 140px) !important;
    height: 128px !important;
    min-height: 0 !important;
    margin: 0 auto 10px !important;
    overflow: visible !important;
  }

  .top-page .news-panel .news-list {
    padding-right: 0 !important;
  }

  .top-page .news-panel .news-list,
  .top-page .news-panel .news-more,
  .top-page .news-panel .news-pager-controls {
    margin-right: 0 !important;
  }

  .top-page .intro-card .corner-illustration img,
  .top-page .home-duo-cards .corner-illustration img,
  .top-page .news-panel .news-illustration img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  /* Tardigrade hero: title, video, copy, actions. Desktop remains two columns. */
  .tardigrade-page .tardi-hero-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 20px !important;
  }

  .tardigrade-page .tardi-hero-text {
    display: contents !important;
  }

  .tardigrade-page .tardi-hero-text > .kicker {
    order: 1;
    margin: 0 !important;
  }

  .tardigrade-page .tardi-hero-text > h1 {
    order: 2;
    margin: 0 !important;
  }

  .tardigrade-page .tardi-hero-visual {
    order: 3;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .tardigrade-page .tardi-hero-visual video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    border-radius: 20px !important;
    object-fit: contain !important;
  }

  .tardigrade-page .tardi-hero-copy {
    order: 4;
    min-width: 0;
  }

  .tardigrade-page .tardi-hero-copy p {
    margin: 0 0 14px !important;
  }

  .tardigrade-page .tardi-hero-text > .button-row {
    order: 5;
    margin-top: 0 !important;
  }

  /* Long research copy may shrink and wrap instead of widening the card. */
  .tardigrade-page .research-story-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .tardigrade-page .research-story-panel > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .tardigrade-page .research-story-panel .research-heading {
    max-width: 100% !important;
    white-space: normal !important;
    font-size: clamp(27px, 7.8vw, 34px) !important;
    line-height: 1.2 !important;
    letter-spacing: -.025em !important;
    overflow-wrap: normal !important;
  }

  .tardigrade-page .research-story-panel .research-heading span {
    display: block !important;
    white-space: nowrap !important;
  }

  .tardigrade-page .research-story-panel p {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  .tardigrade-page .research-illustration-single,
  .tardigrade-page .research-illo-large {
    width: 100% !important;
    min-height: 210px !important;
    height: 230px !important;
    overflow: visible !important;
  }

  /* Workflow artwork is in normal flow, so it cannot cover “地図と図鑑へ”. */
  .tardigrade-page .workflow-panel.has-corner-illustration {
    padding: 20px !important;
    overflow: hidden !important;
  }

  .tardigrade-page .workflow-panel .corner-illustration {
    position: relative !important;
    inset: auto !important;
    width: min(100%, 220px) !important;
    height: 180px !important;
    min-height: 0 !important;
    margin: 12px auto 6px !important;
    overflow: visible !important;
  }

  .tardigrade-page .workflow-panel .role-diagram {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    margin-top: 12px !important;
  }

  .tardigrade-page .workflow-panel .role-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  .tardigrade-page .workflow-panel .role-arrow {
    transform: rotate(90deg) !important;
  }

  .tardigrade-page .research-illo-large img,
  .tardigrade-page .workflow-panel .corner-illustration img,
  .tardigrade-page .tardi-info-card .tardi-illo-slot img,
  .tardigrade-page .inline-illustration img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  /* Sitemap panels reserve a safe inset around every complete illustration. */
  .sitemap-page .site-card.with-sitemap-illustration {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .sitemap-page .site-card-illustration:has(img) {
    width: min(100%, 190px) !important;
    height: 150px !important;
    min-height: 0 !important;
    margin: 4px auto 0 !important;
    overflow: visible !important;
  }

  .sitemap-page .site-card-illustration img {
    display: block !important;
    width: 92% !important;
    height: 92% !important;
    max-width: 92% !important;
    max-height: 92% !important;
    margin: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  .sitemap-page .page-head-illustration:has(img) {
    height: 150px !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .sitemap-page .page-head-illustration img {
    width: 92% !important;
    height: 92% !important;
    margin: auto !important;
    object-fit: contain !important;
    transform: none !important;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .top-page .tardigrade.top-hero-tardigrade.hero-user-sprite {
    animation: none !important;
    translate: 0 0 !important;
  }

  .top-page .top-hero-tardigrade .hero-kuma-walk-1,
  .top-page .top-hero-tardigrade .hero-kuma-walk-2 {
    animation: none !important;
    opacity: 0 !important;
  }

  .top-page .top-hero-tardigrade .hero-kuma-final {
    animation: none !important;
    opacity: 1 !important;
  }

  .top-page .speech {
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* kumamuchizu_181: requested smartphone corrections.
   These rules intentionally override the previous v180 mobile pass only. */
.top-page .stat-links .quick-link {
  cursor: pointer;
}

.top-page .stat-links .quick-link:focus-visible {
  outline: 4px solid rgba(31, 107, 67, .30);
  outline-offset: 4px;
}

.top-page .news-heading-row {
  display: contents;
}

.top-page .home-records-title {
  white-space: nowrap;
}

.top-page .footer-sns a.sns-dot {
  color: var(--green);
  text-decoration: none;
}

@media (max-width: 760px) {
  /* Move only the horizontal travel path to the right; preserve v180 height and vertical motion. */
  .top-page .tardigrade.top-hero-tardigrade.hero-user-sprite {
    left: 64% !important;
  }

  /* The full statistic panel is the control; no separate arrow row is used. */
  .top-page .stat-links .quick-link {
    grid-template-rows: 4.4em minmax(0, 1fr) !important;
    align-content: center !important;
  }

  .top-page .stat-links .quick-link::after {
    content: none !important;
    display: none !important;
  }

  .top-page .stat-links .quick-link > strong {
    align-self: center !important;
  }

  .top-page .home-records-title {
    max-width: 100% !important;
    font-size: clamp(21px, 6.2vw, 27px) !important;
    letter-spacing: -.03em !important;
    white-space: nowrap !important;
  }

  /* Home duo cards: all copy first, then the complete illustration, then the action. */
  .top-page .home-duo-cards .home-duo-heading {
    order: 1 !important;
  }

  .top-page .home-duo-cards .home-duo-description {
    order: 2 !important;
  }

  .top-page .home-duo-cards .corner-illustration {
    order: 3 !important;
    position: relative !important;
    inset: auto !important;
    width: min(100%, 205px) !important;
    height: 148px !important;
    min-height: 148px !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  .top-page .home-duo-cards .button-row {
    order: 4 !important;
  }

  /* Keep the current news artwork size, but place it beside the title. */
  .top-page .news-panel.has-corner-illustration {
    display: block !important;
  }

  .top-page .news-heading-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 140px !important;
    gap: 8px !important;
    align-items: center !important;
    margin-bottom: 10px !important;
  }

  .top-page .news-heading-text {
    min-width: 0 !important;
  }

  .top-page .news-heading-text h2 {
    margin-bottom: 0 !important;
  }

  .top-page .news-panel .news-illustration {
    position: relative !important;
    inset: auto !important;
    width: 140px !important;
    height: 128px !important;
    min-height: 128px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .top-page .news-panel .news-list {
    padding-right: 0 !important;
  }

  /* Research card must never establish a wider min-content column than the phone. */
  .tardigrade-page .research-story-panel,
  .tardigrade-page .research-story-panel > *,
  .tardigrade-page .research-story-panel > div > * {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .tardigrade-page .research-story-panel {
    padding: 20px !important;
    overflow: hidden !important;
  }

  .tardigrade-page .research-story-panel .research-heading {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(24px, 7vw, 30px) !important;
    line-height: 1.22 !important;
    letter-spacing: -.03em !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  .tardigrade-page .research-story-panel .research-heading span {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .tardigrade-page .research-story-panel p {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  /* Workflow illustration stays in normal flow with a full square box. */
  .tardigrade-page .workflow-panel.has-corner-illustration {
    padding: 20px !important;
    overflow: hidden !important;
  }

  .tardigrade-page .workflow-panel .corner-illustration {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: min(100%, 230px) !important;
    height: 230px !important;
    min-height: 230px !important;
    margin: 12px auto 8px !important;
    overflow: visible !important;
    clear: both !important;
  }

  .tardigrade-page .workflow-panel .corner-illustration img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  /* Every illustrated page header gets enough square height for the complete 1:1 artwork. */
  .page-illustration-body .page-head.with-illustration,
  .page-illustration-body .records-header.with-illustration {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
    overflow: visible !important;
  }

  .page-illustration-body .page-head.with-illustration .page-head-main,
  .page-illustration-body .records-header.with-illustration .page-head-main {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .page-illustration-body .page-head.with-illustration .page-head-illustration,
  .page-illustration-body .records-header.with-illustration .page-head-illustration {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    place-items: center !important;
    width: min(100%, 240px) !important;
    height: 240px !important;
    min-height: 240px !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .page-illustration-body .page-head-illustration img,
  .page-illustration-body .records-header .page-head-illustration img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  /* Sitemap card images use a square box as well, so no lower edge is cut off. */
  .sitemap-page .site-card-illustration:has(img) {
    width: min(100%, 190px) !important;
    height: 190px !important;
    min-height: 190px !important;
    margin: 4px auto 0 !important;
    overflow: visible !important;
  }

  .sitemap-page .site-card-illustration img,
  .sitemap-page .page-head-illustration img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }
}

@media (max-width: 350px) {
  .top-page .news-heading-row {
    grid-template-columns: minmax(0, 1fr) 124px !important;
  }

  .top-page .news-panel .news-illustration {
    width: 124px !important;
    height: 113px !important;
    min-height: 113px !important;
  }

  .top-page .home-records-title {
    font-size: 20px !important;
  }
}
/* kumamuchizu_181 final validation adjustments */
.top-page .stat-links .quick-link {
  grid-template-rows: 3.2em minmax(0, 1fr) !important;
}

.top-page .stat-links .quick-link::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 350px) {
  .top-page .intro-card h2 {
    padding-right: 0 !important;
    font-size: 17px !important;
    letter-spacing: -.045em !important;
  }

  .top-page .intro-card h2 .home-intro-title-line {
    white-space: nowrap !important;
  }

  #rankingTitle.home-ranking-title,
  .top-page .ranking-panel h2#rankingTitle.home-ranking-title,
  #rankingTitle.home-ranking-title *,
  .top-page .ranking-panel h2#rankingTitle.home-ranking-title * {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  #rankingTitle.home-ranking-title,
  .top-page .ranking-panel h2#rankingTitle.home-ranking-title {
    font-size: 15px !important;
    line-height: 1.22 !important;
    letter-spacing: -.035em !important;
  }
}


/* kumamuchizu_182: focused mobile refinements and common footer alignment. */

/* Desktop keeps the established two-line classification sentence. */
.tardigrade-page .classification-two-lines .classification-line-1 {
  display: block;
}
.tardigrade-page .classification-two-lines .classification-line-2,
.tardigrade-page .classification-two-lines .classification-line-3 {
  display: inline;
}

/* X and IG use the same fixed circular box on every viewport. */
.site-footer .footer-sns .sns-dot,
.footer-sns .sns-dot {
  box-sizing: border-box !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  line-height: 1 !important;
}

@keyframes topHeroKumaTravel182Mobile {
  0% {
    translate: -104px 94px;
  }
  52% {
    translate: -55px 43px;
  }
  100% {
    translate: 0 0;
  }
}

@media (max-width: 760px) {
  /* Shift the entire mobile route slightly right and make its diagonal steeper. */
  .top-page .tardigrade.top-hero-tardigrade.hero-user-sprite {
    left: 68% !important;
    transform: translate(-50%, -50%) rotate(-8deg) !important;
    animation: topHeroKumaTravel182Mobile 5.2s cubic-bezier(.48, 0, .18, 1) .35s both !important;
  }

  /* Keep the sentence to exactly three deliberate lines on smartphones. */
  .tardigrade-page .classification-two-lines {
    font-size: clamp(11.5px, 3.45vw, 14px) !important;
    line-height: 1.8 !important;
    letter-spacing: -.045em !important;
  }
  .tardigrade-page .classification-two-lines .classification-line {
    display: block !important;
    white-space: nowrap !important;
  }

  /* Restore the same participation header illustration used on desktop. */
  .participate-page .page-head.with-illustration {
    min-height: 0 !important;
    overflow: visible !important;
  }
  .participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma,
  .participate-page .page-head.with-illustration .page-head-illustration.participate-head-kuma:has(img) {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: min(74vw, 280px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 8px auto 2px !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .participate-page .participate-head-kuma img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    transform: none !important;
  }

  /* Preserve the current artwork dimensions, but lift it away from the buttons. */
  .top-page .home-duo-cards .corner-illustration {
    transform: translateY(-10px) !important;
  }
}

@media (max-width: 350px) {
  .tardigrade-page .classification-two-lines {
    font-size: 11.2px !important;
    letter-spacing: -.055em !important;
  }
}


/* kumamuchizu_183: focused smartphone spacing, research panel, footer order and user title. */
@media (max-width: 760px) {
  /* Preserve the v182 illustration size, but reserve empty space below it so the artwork never touches the buttons. */
  .top-page .home-duo-cards .corner-illustration {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: min(100%, 205px) !important;
    height: 172px !important;
    min-height: 172px !important;
    margin: -8px auto 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .top-page .home-duo-cards .corner-illustration img {
    flex: 0 0 auto !important;
    display: block !important;
    width: 205px !important;
    max-width: 100% !important;
    height: 148px !important;
    min-height: 148px !important;
    max-height: 148px !important;
    object-fit: contain !important;
    object-position: center top !important;
    transform: none !important;
  }

  .top-page .home-duo-cards .button-row {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 0 !important;
  }

  /* One-line research heading without widening the panel on narrow phones. */
  .tardigrade-page .research-story-panel .research-heading {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(18px, 5.5vw, 30px) !important;
    line-height: 1.2 !important;
    letter-spacing: -.05em !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  /* Show the complete square illustration, including its lower edge. */
  .tardigrade-page .research-story-panel {
    overflow: visible !important;
    padding-bottom: 22px !important;
  }

  .tardigrade-page .research-illustration-single {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 12px !important;
    overflow: visible !important;
  }

  .tardigrade-page .research-illo-large,
  .tardigrade-page .research-illo-large:has(img) {
    display: block !important;
    width: min(100%, 320px) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .tardigrade-page .research-illo-large img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  /* Give the dynamic “○○ のページ” title the full row and keep it on one line. */
  .user-page .page-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .user-page .page-head-main {
    width: 100% !important;
    max-width: 100% !important;
  }

  .user-page #userNameTitle {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 1.36em !important;
    font-size: clamp(24px, 7.5vw, 32px) !important;
    line-height: 1 !important;
    letter-spacing: -.04em !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  .user-page .page-back-button {
    align-self: flex-start !important;
  }
}

/* kumamuchizu_184: mobile-only 2 x 2 layout for My Page statistics. */
@media (max-width: 760px) {
  .user-page .user-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 18px 0 24px !important;
  }

  .user-page .user-stat-grid > div {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 152px !important;
    padding: 16px 14px !important;
    border-radius: 22px !important;
    grid-template-rows: minmax(2.8em, auto) auto !important;
    align-content: start !important;
  }

  .user-page .user-stat-grid > div > span {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 2.8em !important;
    font-size: clamp(14px, 4vw, 17px) !important;
    line-height: 1.4 !important;
    letter-spacing: -.035em !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  .user-page .user-stat-grid > div:nth-child(2) > span {
    font-size: clamp(11px, 3.2vw, 14px) !important;
    letter-spacing: -.055em !important;
  }

  .user-page .user-stat-grid > div > strong {
    margin-top: 10px !important;
    font-size: clamp(38px, 12vw, 52px) !important;
    line-height: 1 !important;
  }
}

@media (max-width: 350px) {
  .user-page .user-stat-grid {
    gap: 10px !important;
  }

  .user-page .user-stat-grid > div {
    min-height: 144px !important;
    padding: 14px 12px !important;
  }

  .user-page .user-stat-grid > div > span {
    font-size: 13px !important;
    letter-spacing: -.045em !important;
  }

  .user-page .user-stat-grid > div:nth-child(2) > span {
    font-size: 10.5px !important;
    letter-spacing: -.065em !important;
  }
}


/* kumamuchizu_186: hide selected manual text breaks on smartphones only. */
@media (max-width: 760px) {
  br.desktop-text-break {
    display: none !important;
  }
}


/* kumamuchizu_187: restore normal mobile copy size, control wrapping, and keep the moss sentence on one line. */
@media (max-width: 760px) {
  /* Keep the requested sentence at the existing 15px size. The span uses the card's padding area,
     while the card is widened slightly but remains inside the phone viewport. */
  .top-page .intro-card.has-corner-illustration {
    width: calc(100% + 16px) !important;
    max-width: none !important;
    margin-left: -8px !important;
    margin-right: -8px !important;
  }

  .top-page .home-moss-one-line {
    position: static !important;
    display: block !important;
    width: max-content !important;
    max-width: none !important;
    margin-left: 0 !important;
    transform: none !important;
    white-space: nowrap !important;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: -.04em !important;
  }

  /* The span already starts a new line on smartphones, so hide the extra BR. */
  .top-page br.after-moss-break {
    display: none !important;
  }

  /* Restore the same 16px size as the preceding paragraph. Horizontal padding is reduced only
     in this hero card so each phrase can wrap at a natural semantic boundary. */
  .tardigrade-page .tardi-hero-card {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .tardigrade-page .classification-two-lines {
    font-size: 16px !important;
    line-height: 1.85 !important;
    letter-spacing: normal !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .tardigrade-page .classification-two-lines .classification-segment {
    white-space: nowrap !important;
  }

  .tardigrade-page .classification-two-lines .classification-segment-a,
  .tardigrade-page .classification-two-lines .classification-segment-d,
  .tardigrade-page .classification-two-lines .classification-segment-e {
    display: block !important;
  }

  .tardigrade-page .classification-two-lines .classification-segment-b,
  .tardigrade-page .classification-two-lines .classification-segment-c {
    display: inline !important;
  }
}

/* Desktop keeps the established two-line sentence. */
@media (min-width: 761px) {
  .tardigrade-page .classification-two-lines .classification-segment-a,
  .tardigrade-page .classification-two-lines .classification-segment-b,
  .tardigrade-page .classification-two-lines .classification-segment-d,
  .tardigrade-page .classification-two-lines .classification-segment-e {
    display: inline !important;
  }

  .tardigrade-page .classification-two-lines .classification-segment-c {
    display: inline !important;
  }

  .tardigrade-page .classification-two-lines .classification-segment-c::before {
    content: "";
    display: block;
  }
}


/* kumamuchizu_189: zukan media sizing and Chrome/Windows Leaflet seam handling. */
.taxon-visuals,
.taxon-visuals .media-box {
  min-width: 0;
  width: 100%;
}
.taxon-visuals figure.media-box {
  margin: 0;
}
.taxon-real-map .leaflet-tile-pane img.leaflet-tile {
  border: 0 !important;
  outline: 0 !important;
  width: 256px !important;
  height: 256px !important;
  max-width: none !important;
  box-sizing: content-box !important;
  image-rendering: auto;
  mix-blend-mode: plus-lighter;
}
.kumamuchizu-leaflet-marker-shell {
  display: grid !important;
  place-items: center;
  background: transparent !important;
  border: 0 !important;
}
.kumamuchizu-leaflet-marker {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #e85d04;
  box-shadow: 0 2px 7px rgba(20, 61, 42, .38);
}
.kumamuchizu-leaflet-marker.teacher {
  background: #8a63c7;
  border-color: #f7f1ff;
}

/* kumamuchizu_196: unified footer, official social glyphs, illustration credit. */
.site-footer {
  width: min(1120px, calc(100% - 28px)) !important;
  margin: 38px auto 42px !important;
  padding: 16px 18px !important;
  box-sizing: border-box !important;
  border-radius: 28px !important;
  background: rgba(255, 253, 245, .82) !important;
  border: 1px solid rgba(31, 107, 67, .12) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px 20px !important;
  color: rgba(20, 61, 42, .72) !important;
}
.site-footer .footer-links {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.site-footer .footer-links > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: #edf7df !important;
  border: 1px solid rgba(31, 107, 67, .12) !important;
  color: var(--green) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}
.site-footer .footer-links > a[href="./contact.html"] {
  background: var(--green) !important;
  color: #fff !important;
}
.site-footer .footer-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px 16px !important;
}
.site-footer .footer-sns {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
}
.site-footer .footer-sns-label {
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
}
.site-footer .sns-icon-link {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 8px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .88) !important;
  border: 1px solid rgba(31, 107, 67, .16) !important;
  color: #111 !important;
  text-decoration: none !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}
.site-footer .sns-icon-link:hover,
.site-footer .sns-icon-link:focus-visible {
  transform: translateY(-1px) !important;
  background: #fff !important;
  box-shadow: 0 7px 16px rgba(31, 107, 67, .14) !important;
}
.site-footer .sns-icon-link:focus-visible {
  outline: 3px solid rgba(31, 107, 67, .22) !important;
  outline-offset: 2px !important;
}
.site-footer .sns-icon-link img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.site-footer .illustration-credit {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  color: rgba(20, 61, 42, .74) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
@media (max-width: 760px) {
  .site-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: start !important;
    padding: 14px !important;
    gap: 12px !important;
  }
  .site-footer .footer-links {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .site-footer .footer-links > a {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    padding: 8px 7px !important;
  }
  .site-footer .footer-meta {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 8px 12px !important;
  }
}
@media (max-width: 360px) {
  .site-footer .footer-links > a {
    font-size: 11px !important;
    letter-spacing: -.02em !important;
  }
  .site-footer .illustration-credit {
    font-size: 11px !important;
    padding-inline: 4px !important;
  }
}

/* Keep the top-page footer consistent with the unified mobile footer above. */
@media (max-width: 760px) {
  .top-page footer.site-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: start !important;
    width: calc(100% - 28px) !important;
    max-width: 1120px !important;
    padding: 14px !important;
    gap: 12px !important;
  }
  .top-page footer.site-footer > .footer-links {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
  .top-page footer.site-footer > .footer-links > a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 8px 7px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
  }
  .top-page footer.site-footer > .footer-meta {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px 12px !important;
  }
}
@media (max-width: 360px) {
  .top-page footer.site-footer > .footer-links > a {
    font-size: 11px !important;
    letter-spacing: -.02em !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}


/* kumamuchizu_199: align the moss sentence with the paragraph and remove the mobile blank line before the closing sentence. */

/* kumamuchizu_221: rich text in news posts */
.news-detail ul,.news-detail ol{margin:.7em 0;padding-left:1.7em}.news-detail li{margin:.25em 0}.news-detail a{color:#176f99;text-decoration:underline;font-weight:700}.news-detail a:hover{text-decoration-thickness:2px}.news-detail p{margin:.65em 0}.news-detail div[style*="text-align"]{margin:.65em 0}


/* v222: top-page news titles link to individual article views */
.news-title-link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: .18em;
}
.news-title-link:hover,
.news-title-link:focus-visible {
  text-decoration: underline;
}
.news-title-link:focus-visible {
  outline: 3px solid rgba(255, 184, 77, .55);
  outline-offset: 4px;
  border-radius: 5px;
}
.news-detail-navigation {
  margin-bottom: 14px;
}
.news-list-back {
  display: inline-flex;
  margin-top: 10px;
}

/* v225: show the image-folder ID on each zukan card */
.taxon-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.taxon-card-heading .kicker {
  margin-bottom: 0;
}
.taxon-id {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(31, 107, 67, .08);
  color: rgba(20, 61, 42, .78);
  border: 1px solid rgba(31, 107, 67, .14);
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  user-select: all;
}
@media (max-width: 760px) {
  .taxon-card-heading {
    align-items: flex-start;
  }
}

/* kumamuchizu_229: users search */
.users-search {
  margin: 0 0 24px;
  padding: 20px 22px;
  border-radius: 24px;
  background: rgba(255,253,245,.92);
  border: 1px solid rgba(31,107,67,.14);
  box-shadow: 0 12px 28px rgba(35,76,38,.08);
}
.users-search > label {
  display: block;
  margin-bottom: 9px;
  color: var(--green);
  font-weight: 900;
}
.users-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}
.users-search input[type="search"] {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid rgba(31,107,67,.22);
  border-radius: 16px;
  background: #fff;
  color: #143d2a;
  font: inherit;
  font-weight: 700;
  outline: none;
}
.users-search input[type="search"]:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(31,107,67,.10);
}
.users-search-clear {
  min-height: 48px;
  margin: 0 !important;
  align-self: stretch !important;
}
.users-search-help,
.users-search-result {
  margin: 8px 2px 0;
  color: rgba(20,61,42,.68);
  font-size: 13px;
}
.users-search-result {
  min-height: 1.4em;
  font-weight: 800;
  color: var(--green);
}
.users-search-empty {
  grid-column: 1 / -1;
  padding: 24px;
  text-align: center;
}
@media(max-width: 640px) {
  .users-search {
    padding: 16px;
  }
  .users-search-row {
    grid-template-columns: 1fr;
  }
  .users-search-clear {
    justify-self: start;
    min-height: 42px;
  }
}


/* v232: JP / EN language switch */
.lang-switch{display:inline-flex;align-items:center;gap:5px;margin-left:4px;padding:4px 7px;border:1px solid rgba(31,107,67,.20);border-radius:999px;background:rgba(255,255,255,.72);white-space:nowrap;font-size:12px;font-weight:800;line-height:1}
.lang-switch a{padding:2px 3px!important;min-height:0!important;color:rgba(20,61,42,.62)!important;text-decoration:none!important}
.lang-switch a.active{color:var(--green)!important;font-weight:900;text-decoration:underline!important;text-underline-offset:3px}
.lang-switch>span{color:rgba(20,61,42,.30)}
html[lang="en"] body{word-break:normal;overflow-wrap:anywhere}
html[lang="en"] .site-nav-links{gap:clamp(7px,1vw,14px)}
html[lang="en"] .site-nav-links>a{font-size:clamp(11px,1vw,14px)}
html[lang="en"] .button,html[lang="en"] .ghost-button,html[lang="en"] .more-link{white-space:normal;text-align:center}
html[lang="en"] .quick-link span{line-height:1.2}
@media(max-width:900px){.lang-switch{margin:4px 0}.site-nav-links .lang-switch{align-self:center}}


/* kumamuchizu_235: English layout safeguards */
html[lang="en"] .tardigrade-page .tardi-info-grid > *,
html[lang="en"] .tardigrade-page .tardi-info-card { min-width: 0; }
html[lang="en"] .tardigrade-v89 .tardi-info-card h2 {
  width: 100%;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  font-size: clamp(18px, 1.75vw, 25px) !important;
  line-height: 1.18;
}
html[lang="en"] .taxon-card,
html[lang="en"] .taxon-card > *,
html[lang="en"] .taxon-card-heading { min-width: 0; }
html[lang="en"] .taxon-id { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 760px) {
  html[lang="en"] .tardigrade-v89 .tardi-info-card h2 { font-size: clamp(20px, 6vw, 28px) !important; }
}


/* kumamuchizu_236: English localization polish */
html[lang="en"] .taxonomy-path,
html[lang="en"] .taxonomy-path-row,
html[lang="en"] .taxon-line { overflow-wrap: normal; word-break: normal; }
html[lang="en"] .taxon-line { line-height: 1.55; }
html[lang="en"] .mini-map-title { white-space: normal; }
html[lang="en"] .user-stats span { line-height: 1.25; }
html[lang="en"] .stat-card .label,
html[lang="en"] .stat-card p { white-space: normal; }


/* kumamuchizu_237: English readability and layout corrections */
html[lang="en"] .top-page .intro-card.has-corner-illustration {
  padding-right: 245px !important;
}
html[lang="en"] .top-page .intro-card h2 {
  max-width: 100%;
  line-height: 1.22;
  margin-bottom: 18px;
}
html[lang="en"] .top-page .home-duo-heading h2 {
  line-height: 1.2;
  margin-bottom: 12px;
}
html[lang="en"] .tardigrade-page .tardi-hero-text > h1 {
  margin-bottom: 20px !important;
  line-height: 1.15;
}
html[lang="en"] .tardigrade-v89 .tardi-info-card:nth-child(3) h2 {
  white-space: nowrap !important;
  width: calc(100% + 110px) !important;
  max-width: none !important;
  font-size: clamp(15px, 1.2vw, 19px) !important;
  letter-spacing: -0.025em;
  overflow-wrap: normal !important;
}
html[lang="en"] .taxonomy-path span {
  grid-template-columns: 4.8em minmax(0,1fr) !important;
  gap: 10px !important;
}
html[lang="en"] .taxonomy-path b,
html[lang="en"] .taxonomy-path em {
  min-width: 0;
}
html[lang="en"] .taxon-line {
  line-height: 1.6;
}
@media (max-width: 760px) {
  html[lang="en"] .top-page .intro-card.has-corner-illustration {
    padding-right: clamp(22px, 3.6vw, 34px) !important;
  }
  html[lang="en"] .tardigrade-v89 .tardi-info-card:nth-child(3) h2 {
    white-space: normal !important;
    width: 100% !important;
    font-size: clamp(18px, 5.4vw, 24px) !important;
  }
}

/* kumamuchizu_238: English title spacing adjustments only */
html[lang="en"] .top-page .intro-card h2 {
  font-size: clamp(30px, 3.15vw, 42px) !important;
  line-height: 1.24 !important;
  letter-spacing: -0.018em;
  max-width: 760px !important;
  margin-top: 22px !important;
}

html[lang="en"] .tardigrade-page .tardi-hero-text > h1 {
  font-size: clamp(34px, 3.4vw, 46px) !important;
  line-height: 1.16 !important;
  margin-top: 20px !important;
  margin-bottom: 28px !important;
}

@media (max-width: 760px) {
  html[lang="en"] .top-page .intro-card h2 {
    font-size: clamp(26px, 7.4vw, 36px) !important;
    max-width: 100% !important;
    margin-top: 16px !important;
  }
  html[lang="en"] .tardigrade-page .tardi-hero-text > h1 {
    font-size: clamp(30px, 8vw, 40px) !important;
    margin-top: 14px !important;
    margin-bottom: 22px !important;
  }
}