.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  background: rgb(255 255 255 / 96%);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(0.75rem);
}

.site-header__primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.8rem;
  gap: 1rem;
}

.site-header > .site-header__logo,
.site-header > a > .site-header__logo,
.site-header__brand .site-header__logo {
  width: clamp(9.25rem, 18vw, 12.75rem);
}

.site-header__brand,
.site-header > a[aria-label] {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.site-header__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.65rem, 1.35vw, 1.15rem);
}

.site-header__nav > a:not(.cta-line) {
  color: var(--color-navy);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.site-header__nav > a:not(.cta-line):hover,
.site-header__nav > a[aria-current="page"] {
  color: var(--color-teal-dark);
}

.menu-button {
  display: none;
  min-width: 2.9rem;
  min-height: 2.9rem;
  color: var(--color-navy);
  font-size: 0.82rem;
  font-weight: 800;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  cursor: pointer;
}

.context-nav {
  position: relative;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  min-height: 3.25rem;
  padding: 0.5rem max(1rem, calc((100% - var(--content)) / 2));
  overflow-x: auto;
  color: var(--color-navy);
  background: var(--color-teal-soft);
  border-bottom: 1px solid var(--color-border);
  scrollbar-width: thin;
}

.context-nav > a,
.context-nav summary {
  flex: 0 0 auto;
  padding: 0.45rem 0.7rem;
  color: var(--color-navy);
  font-size: 0.87rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  border-radius: var(--radius-pill);
}

.context-nav > a:hover,
.context-nav summary:hover {
  color: var(--color-paper);
  background: var(--color-teal);
}

.region-menu {
  position: relative;
  flex: 0 0 auto;
}

.region-menu summary {
  cursor: pointer;
  list-style: none;
}

.region-menu summary::-webkit-details-marker {
  display: none;
}

.region-menu summary::after {
  display: inline-block;
  margin-left: 0.35rem;
  content: "▼";
  transform: translateY(-0.05em);
}

.region-menu[open] summary {
  color: var(--color-paper);
  background: var(--color-teal);
}

.region-menu ul {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.35rem);
  left: 0;
  width: max-content;
  min-width: 11rem;
  padding: 0.55rem;
  margin: 0;
  list-style: none;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  box-shadow: var(--shadow-small);
}

.region-menu li + li {
  border-top: 1px solid var(--color-sand);
}

.region-menu li a {
  display: block;
  padding: 0.55rem 0.65rem;
  color: var(--color-navy);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0.35rem;
}

.region-menu li a:hover {
  background: var(--color-teal-soft);
}

.breadcrumbs {
  padding-block: 1rem;
  color: var(--color-muted);
  font-size: 0.82rem;
  border-bottom: 1px solid var(--color-sand);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}

.breadcrumbs li + li::before {
  margin-right: 0.35rem;
  color: var(--color-muted);
  content: "/";
}

.button,
.cta-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.75rem 1.1rem;
  font-family: var(--font-utility);
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.button--primary {
  color: var(--color-paper);
  background: var(--color-navy);
}

.button--secondary {
  color: var(--color-navy);
  background: var(--color-paper);
  border-color: var(--color-navy);
}

.button:hover,
.cta-line:hover {
  color: inherit;
  transform: translateY(-0.1rem);
}

.button--primary:hover {
  color: var(--color-paper);
  background: var(--color-navy-deep);
}

.button--secondary:hover {
  color: var(--color-navy);
  background: var(--color-teal-soft);
}

.cta-line {
  color: var(--color-line-ink);
  background: var(--color-line);
  box-shadow: 0 0.55rem 1.15rem rgb(6 199 85 / 19%);
}

.cta-line:hover {
  color: var(--color-line-ink);
  background: #21d36a;
  box-shadow: 0 0.75rem 1.5rem rgb(6 199 85 / 28%);
}

.line-friend-link {
  display: block;
  width: min(100%, 22rem);
  margin-inline: auto;
  padding: 0.25rem;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.line-friend-link img {
  display: block;
  width: 100%;
  transition: transform 180ms ease;
}

.line-friend-link:hover img {
  transform: scale(1.025);
}

.line-friend-link:focus-visible {
  outline: 3px solid var(--color-yellow);
  outline-offset: 0.3rem;
}

.service-selector,
.trust-panel,
.article-card-grid,
.price-plans,
.office-visit,
.hub-problem-index {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.service-selector {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-card,
.trust-panel__item,
.article-card,
.price-plan,
.hub-problem-index > li,
.article-callout {
  min-width: 0;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-small);
}

.service-card,
.article-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  color: inherit;
  text-decoration: none;
}

.service-card:hover,
.article-card:hover {
  color: inherit;
  border-color: var(--color-teal);
  box-shadow: var(--shadow);
  transform: translateY(-0.15rem);
}

.service-card__label,
.article-card__label,
.price-plan__label {
  color: var(--color-teal-dark);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.service-card h2,
.service-card h3,
.article-card h2,
.article-card h3 {
  margin-block: 0.55rem 0.75rem;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.service-card p,
.article-card p {
  margin-bottom: 0;
}

.service-card__action,
.article-card__action {
  margin-top: auto;
  padding-top: 1.25rem;
  color: var(--color-teal-dark);
  font-weight: 800;
}

.trust-panel {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.trust-panel__item {
  padding: 1.35rem;
  box-shadow: none;
}

.trust-panel__item h3 {
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
}

.trust-panel__item p {
  margin-bottom: 0;
  color: var(--color-muted);
  font-size: 0.93rem;
}

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

.price-plan {
  padding: clamp(1.5rem, 3vw, 2.35rem);
}

.price-plan--featured {
  color: var(--color-paper);
  background: var(--color-navy);
  border-color: var(--color-navy);
}

.price-plan--featured :is(h2, h3, p, strong) {
  color: inherit;
}

.price-plan__amount {
  margin-block: 0.65rem;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.25rem);
  line-height: 1;
}

.price-plan__note {
  margin-bottom: 0;
  font-size: 0.9rem;
}

.step-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.step-list li {
  position: relative;
  min-width: 0;
  padding: 1.5rem;
  background: var(--color-paper);
}

.step-list li + li {
  border-left: 1px solid var(--color-border);
}

.step-list__number {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  margin-bottom: 0.75rem;
  color: var(--color-paper);
  font-size: 0.85rem;
  font-weight: 800;
  background: var(--color-teal);
  border-radius: 50%;
}

.step-list h3 {
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
}

.step-list p {
  margin-bottom: 0;
  color: var(--color-muted);
  font-size: 0.92rem;
}

.office-visit {
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
  align-items: stretch;
  overflow: hidden;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.office-visit__media {
  min-height: 20rem;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.office-visit__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.office-visit__content {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.office-visit__content h2,
.office-visit__content h3 {
  margin-bottom: 0.75rem;
}

.office-visit__content > :last-child {
  margin-bottom: 0;
}

.service-areas {
  max-width: var(--content-narrow);
  padding-left: 1.25rem;
  border-left: 0.3rem solid var(--color-teal);
}

.service-areas p:last-child {
  margin-bottom: 0;
}

.article-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.article-card {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.article-card__image {
  width: calc(100% + 2.5rem);
  max-height: 12rem;
  margin: -1.25rem -1.25rem 1.25rem;
  object-fit: cover;
  border-radius: calc(var(--radius) - 0.25rem) calc(var(--radius) - 0.25rem) 0 0;
}

.article-card-grid .article-card:nth-child(n+5) {
  grid-column: span 1;
}

.article-callout {
  padding: 1.25rem 1.5rem;
  border-left: 0.3rem solid var(--color-teal);
}

.article-callout--warning {
  border-left-color: var(--color-danger);
  background: #fffafa;
}

details[data-faq] {
  padding: 1rem 1.25rem;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
}

details[data-faq] + details[data-faq] {
  margin-top: 0.75rem;
}

details[data-faq] summary {
  color: var(--color-navy);
  font-weight: 800;
  cursor: pointer;
}

details[data-faq].is-open {
  border-color: var(--color-teal);
}

.site-footer {
  padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
  color: #eaf5f3;
  background: var(--color-navy-deep);
}

.site-footer__eyebrow {
  margin-bottom: 1.25rem;
  color: #9cd5cf;
  font-family: var(--font-utility);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.site-footer a {
  color: inherit;
}

/* コラムが増えて列が6本になったため、固定5列から自動折り返しに変えた。
   事務所情報だけは住所が折り返さない幅が要るので、1行目を占有させる。 */
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.6rem) clamp(1.25rem, 2.5vw, 2.6rem);
}

.site-footer__brand {
  grid-column: 1 / -1;
}

.site-footer__brand .site-header__logo {
  width: clamp(9rem, 18vw, 12rem);
  filter: brightness(0) invert(1);
}

.site-footer__heading {
  margin-bottom: 0.85rem;
  color: #9cd5cf;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 800;
}

.site-footer__links {
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-footer__links li + li {
  margin-top: 0.55rem;
}

.site-footer__links a {
  font-size: 0.9rem;
  text-decoration: none;
}

.site-footer__links a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.site-footer__meta {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  font-size: 0.8rem;
  border-top: 1px solid rgb(229 241 239 / 18%);
}

.knowledge-index,
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}

.card {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-small);
}

/* Local office shell ----------------------------------------------------- */

.site-header {
  position: sticky;
  z-index: 200;
  top: 0.75rem;
  width: min(calc(100% - 1.5rem), 86rem);
  margin: 0.75rem auto 0;
  overflow: visible;
  background: rgb(255 255 255 / 94%);
  border: 2px solid rgb(31 90 157 / 12%);
  border-radius: var(--radius-pill);
  box-shadow: 0 0.6rem 1.7rem rgb(38 38 38 / 9%);
  backdrop-filter: blur(0.7rem);
}

.site-header__primary.container {
  width: min(100% - 1.25rem, var(--content-wide));
}

.site-header__primary {
  min-height: 4.2rem;
  gap: 0.85rem;
}

.site-header > .site-header__logo,
.site-header > a > .site-header__logo,
.site-header__brand .site-header__logo {
  width: clamp(9.4rem, 17vw, 13rem);
}

.site-header__nav {
  gap: clamp(0.45rem, 1.1vw, 1rem);
}

.site-header__nav > a:not(.cta-line) {
  color: var(--color-navy-deep);
  font-size: 0.84rem;
  font-weight: 900;
  white-space: nowrap;
}

.site-header__nav > a:not(.cta-line):hover,
.site-header__nav > a[aria-current="page"] {
  color: var(--color-coral);
}

.menu-button {
  color: var(--color-paper);
  background: var(--color-navy);
  border: 0;
  border-radius: 50%;
}

/* This is deliberately a real disclosure—not an overflow-clipped faux menu. */
.context-nav {
  position: relative;
  z-index: 150;
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  width: min(calc(100% - 1.5rem), 86rem);
  min-height: 3.1rem;
  padding: 0.4rem 0.65rem;
  margin: 0.65rem auto 0;
  overflow: visible;
  isolation: isolate;
  color: var(--color-navy-deep);
  background: var(--color-yellow);
  border: 2px solid var(--color-navy);
  border-radius: var(--radius);
  box-shadow: 0 0.32rem 0 var(--color-navy);
  scrollbar-width: auto;
}

.context-nav > a,
.context-nav summary {
  padding: 0.45rem 0.75rem;
  color: var(--color-navy-deep);
  font-size: 0.84rem;
  font-weight: 900;
  border-radius: var(--radius-pill);
}

.context-nav > a:hover,
.context-nav summary:hover,
.context-nav > a:focus-visible,
.context-nav summary:focus-visible {
  color: var(--color-paper);
  background: var(--color-navy);
}

.region-menu {
  position: relative;
  z-index: 210;
}

.region-menu summary::after {
  margin-left: 0.4rem;
  color: currentcolor;
  font-size: 0.72em;
}

.region-menu[open] summary {
  color: var(--color-paper);
  background: var(--color-navy);
}

.region-menu ul {
  z-index: 220;
  top: calc(100% + 0.55rem);
  left: 50%;
  width: min(18rem, calc(100vw - 2rem));
  min-width: 13rem;
  padding: 0.5rem;
  margin: 0;
  overflow: visible;
  background: var(--color-paper);
  border: 2px solid var(--color-navy);
  border-radius: var(--radius);
  box-shadow: 0 0.5rem 0 var(--color-navy), var(--shadow-small);
  transform: translateX(-50%);
}

.region-menu li + li {
  border-top-color: var(--color-border);
}

.region-menu li a {
  padding: 0.6rem 0.7rem;
  color: var(--color-navy-deep);
  font-size: 0.88rem;
  font-weight: 900;
  border-radius: var(--radius-small);
}

.region-menu li a:hover,
.region-menu li a:focus-visible {
  color: var(--color-paper);
  background: var(--color-navy);
}

.breadcrumbs {
  width: min(100% - 2rem, var(--content));
  padding-block: 0.85rem;
  margin-inline: auto;
  color: var(--color-muted);
  border-bottom: 0;
}

.breadcrumbs ol {
  width: auto;
}

/* Action controls are intentionally simple and easy to spot. */
.button,
.cta-line {
  min-height: 3.15rem;
  padding: 0.72rem 1.15rem;
  border-width: 2px;
  border-radius: var(--radius);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.button--primary {
  color: var(--color-paper);
  background: var(--color-navy);
  border-color: var(--color-navy);
}

.button--primary:hover {
  color: var(--color-paper);
  background: var(--color-navy-deep);
}

.button--secondary {
  color: var(--color-navy-deep);
  background: var(--color-paper);
  border-color: rgb(31 90 157 / 45%);
}

.button--secondary:hover {
  color: var(--color-navy-deep);
  background: var(--color-cream);
  border-color: var(--color-navy);
}

.cta-line {
  color: var(--color-paper);
  background: var(--color-line);
  border-color: var(--color-line);
  box-shadow: 0 0.45rem 0 rgb(7 57 27 / 22%);
}

.cta-line:hover {
  color: var(--color-paper);
  background: #05b64e;
  border-color: #05b64e;
  box-shadow: 0 0.58rem 0 rgb(7 57 27 / 22%);
  transform: translateY(-0.1rem);
}

.line-friend-link {
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Selectable services and prices retain a tactile panel; reading links do not. */
.service-selector,
.price-plans {
  gap: 1rem;
}

.service-card {
  min-width: 0;
  padding: clamp(1.25rem, 2.5vw, 1.8rem);
  color: var(--color-ink);
  background: var(--color-paper);
  border: 2px solid rgb(31 90 157 / 22%);
  border-radius: var(--radius);
  box-shadow: 0 0.38rem 0 rgb(31 90 157 / 13%);
}

.service-card::before {
  display: block;
  width: 3rem;
  height: 0.34rem;
  margin-bottom: 1rem;
  content: "";
  background: var(--color-coral);
  border-radius: var(--radius-pill);
}

.service-card:hover {
  color: var(--color-ink);
  background: #fffdfa;
  border-color: var(--color-navy);
  box-shadow: 0 0.5rem 0 rgb(31 90 157 / 18%);
  transform: translateY(-0.12rem);
}

.service-card__label,
.article-card__label,
.price-plan__label {
  color: var(--color-navy);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.07em;
}

.service-card__action,
.article-card__action {
  color: var(--color-navy-deep);
  font-weight: 900;
}

.trust-panel {
  gap: 0;
  border-top: 2px solid var(--color-navy);
  border-bottom: 2px solid var(--color-navy);
}

.trust-panel__item {
  padding: 1.25rem 1.15rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.trust-panel__item + .trust-panel__item {
  border-left: 1px solid var(--color-border);
}

.trust-panel__item h3 {
  margin-bottom: 0.55rem;
  color: var(--color-navy-deep);
}

.price-plan {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--color-paper);
  border: 2px solid rgb(31 90 157 / 25%);
  border-radius: var(--radius);
  box-shadow: 0 0.4rem 0 rgb(31 90 157 / 13%);
}

.price-plan--featured {
  color: var(--color-paper);
  background: var(--color-navy-deep);
  border-color: var(--color-navy-deep);
  box-shadow: 0 0.4rem 0 var(--color-coral);
}

.step-list {
  border: 2px solid var(--color-navy);
  border-radius: var(--radius);
  box-shadow: none;
}

.step-list li {
  background: var(--color-paper);
}

.step-list__number {
  color: var(--color-paper);
  background: var(--color-navy);
  border-radius: var(--radius-small);
}

/* Images are self-contained columns.  Text is never allowed to sit over them. */
.office-visit {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 0;
  overflow: hidden;
  background: var(--color-paper);
  border: 2px solid var(--color-navy);
  border-radius: var(--radius);
  box-shadow: 0 0.45rem 0 rgb(31 90 157 / 14%);
}

.office-visit > * {
  min-width: 0;
}

.office-visit__media {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-self: start;
  min-width: 0;
  height: clamp(18rem, 30vw, 24rem);
  min-height: 0;
  overflow: hidden;
  background: var(--color-sand);
  aspect-ratio: auto;
}

.office-visit__media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}

.office-visit__content {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: clamp(1.5rem, 3.3vw, 2.8rem);
  background: var(--color-paper);
}

.office-visit__caption,
.office-visit__media .office-visit__caption {
  position: static;
  grid-column: 1 / -1;
  padding: 0.7rem 1rem;
  margin: 0;
  color: var(--color-navy-deep);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
  background: var(--color-cream);
  border-top: 1px solid var(--color-border);
}

.service-areas {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--color-paper);
  border-top: 2px solid var(--color-navy);
  border-bottom: 2px solid var(--color-navy);
  border-left: 0;
}

/* Editorial links are a reading rail, not a wall of generic cards. */
.article-card-grid {
  gap: 0;
  border-top: 2px solid var(--color-navy);
}

.article-card {
  display: flex;
  min-height: 0;
  padding: 1.25rem 0;
  color: var(--color-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  transition: color 160ms ease, background-color 160ms ease;
}

.article-card:hover {
  color: var(--color-navy-deep);
  background: transparent;
  border-color: var(--color-navy);
  box-shadow: none;
  transform: none;
}

.article-card h2,
.article-card h3 {
  margin-block: 0.38rem 0.5rem;
  color: var(--color-navy-deep);
}

.article-card__image {
  width: 100%;
  height: 10rem;
  max-height: none;
  margin: 0 0 0.85rem;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
}

.article-card__action {
  padding-top: 0.7rem;
}

.article-callout {
  padding: 1.25rem 1.4rem;
  background: var(--color-cream);
  border: 0;
  border-left: 0.35rem solid var(--color-coral);
  border-radius: 0;
  box-shadow: none;
}

.article-callout--warning {
  background: #fff8f5;
  border-left-color: var(--color-danger);
}

.hub-problem-index > li,
.card {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--color-navy);
  border-radius: 0;
  box-shadow: none;
}

details[data-faq] {
  padding: 1rem 1.15rem;
  background: var(--color-paper);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-small);
  box-shadow: none;
}

details[data-faq].is-open,
details[data-faq][open] {
  border-color: var(--color-navy);
}

details[data-faq] summary {
  color: var(--color-navy-deep);
}

.editorial-reading-list {
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 2px solid var(--color-navy);
}

.editorial-reading-list__item,
.editorial-reading-list > li {
  min-width: 0;
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}

.editorial-reading-list > a.editorial-reading-list__item,
.editorial-reading-list__item > a,
.editorial-reading-list > li > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 1rem;
  align-items: center;
  padding: 1.05rem 0.15rem;
  color: var(--color-ink);
  text-decoration: none;
}

.editorial-reading-list > a.editorial-reading-list__item::after,
.editorial-reading-list__item > a::after,
.editorial-reading-list > li > a::after {
  grid-column: 2;
  grid-row: 1 / span 3;
  color: var(--color-coral);
  font-family: var(--font-display);
  font-size: 1.5rem;
  content: "→";
}

.editorial-reading-list :is(h2, h3, h4) {
  margin: 0;
  color: var(--color-navy-deep);
  font-family: var(--font-body);
  font-size: 1.05rem;
}

.editorial-reading-list p {
  grid-column: 1;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.editorial-reading-list__label {
  display: block;
  color: var(--color-navy);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.editorial-reading-list > a.editorial-reading-list__item:hover,
.editorial-reading-list__item > a:hover,
.editorial-reading-list > li > a:hover {
  color: var(--color-navy-deep);
  background: rgb(255 227 107 / 28%);
}

.site-footer {
  color: #edf5ff;
  background: var(--color-navy-deep);
}

.site-footer__eyebrow,
.site-footer__heading {
  color: var(--color-yellow);
}

.site-footer__links a:hover {
  color: var(--color-yellow);
}

/* The cats are small wayfinding marks, never a competing illustration layer. */
.cat-marker {
  display: inline-block;
  width: clamp(2.2rem, 5vw, 4.2rem);
  max-width: 22vw;
  height: auto;
  margin-inline: 0.25rem;
  vertical-align: middle;
  pointer-events: none;
  user-select: none;
}

.cat-marker img,
img.cat-marker {
  width: 100%;
  height: auto;
}

.hero .cat-marker {
  position: absolute;
  z-index: 1;
  right: clamp(1rem, 7vw, 6rem);
  bottom: clamp(1.25rem, 7vw, 5rem);
  width: clamp(4rem, 10vw, 8.5rem);
  margin: 0;
  transform: rotate(6deg);
}

/* The hand-drawn marks are square where the retired SVGs were portrait, so the
   widths rise to keep the same visual weight in the same corner. */
.hero__cat {
  position: absolute;
  z-index: 1;
  right: clamp(0.75rem, 3vw, 3rem);
  bottom: clamp(1.25rem, 7vw, 5rem);
  width: clamp(5rem, 12vw, 10.5rem);
  height: auto;
  margin: 0;
  pointer-events: none;
  transform: rotate(6deg);
}

.cta-band__cat {
  align-self: end;
  justify-self: center;
  width: clamp(4rem, 8vw, 7rem);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0.22rem 0.25rem 0 rgb(0 0 0 / 15%));
  transform: rotate(-5deg);
}

.cat-marker--left,
.hero .cat-marker--left {
  right: auto;
  left: clamp(1rem, 7vw, 6rem);
  transform: rotate(-6deg);
}

/* Hand-drawn spots ride alongside copy that already holds the line, so they
   never open a band of empty page.  They carry no information. */
.spot-illustration {
  height: auto;
  margin: 0;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0.2rem 0.24rem 0 rgb(31 90 157 / 12%));
}

.spot-row {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(0.9rem, 2.5vw, 2.25rem);
  align-items: center;
  justify-content: space-between;
}

.spot-row__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.spot-row__copy > :last-child {
  margin-bottom: 0;
}

/* The tilt is a transform, so it does not enlarge the layout box: a rotated
   corner would otherwise reach about 6px past it, into whatever follows the
   row.  The margin reserves that bleed instead of letting it escape. */
.spot-row .spot-illustration {
  flex: 0 0 auto;
  width: clamp(6rem, 12vw, 11rem);
  margin-block: 0.45rem;
  transform: rotate(4deg);
}

/* Half-width columns and callouts get the same spot at a calmer scale. */
.spot-row--compact .spot-illustration {
  width: clamp(5rem, 8vw, 8rem);
}

/* A centred .section-heading stops at --content-narrow, so the corner beside it
   is reliably free above 64rem.  The anchor wraps the heading alone and the
   spot hangs from its bottom edge, so however short the heading gets the spot
   grows up into the section padding and never reaches the content below. */
.spot-anchor {
  position: relative;
}

.spot-illustration--corner {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(7rem, 10vw, 11rem);
  transform: rotate(5deg);
}

/* 記事本文の対話。ゆき（白猫）が読者の側から尋ね、たすけ（黒猫）が答える。
   届出の相談は「こんなことを訊いていいのか」という迷いから始まることが
   多いので、先に疑問のほうを言葉にしてから答えを置く。
   絵は hero と CTA で既に読み込む2枚と同じファイルなので、何往復
   増やしても新しいリクエストは発生しない。 */
.cat-talk {
  display: grid;
  gap: 1rem;
}

.cat-talk__turn {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

/* 問いが左、答えが右。LINEの会話と同じ向きなので、読み始める前に
   どちらが尋ねていてどちらが答えているかが分かる。 */
.cat-talk__turn--answer {
  flex-direction: row-reverse;
}

.cat-talk__avatar {
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  background: var(--color-paper);
  border: 2px solid var(--color-border);
  border-radius: 50%;
}

/* 元絵は全身の立ち絵なので、丸窓の中で1.5倍に拡大して顔を出す。
   縦のずらし幅がキャラクターごとに違うのは、頭の位置が違うため。 */
.cat-talk__avatar img {
  display: block;
  width: 150%;
  height: 150%;
  max-width: none;
  margin-inline-start: -25%;
}

.cat-talk__turn--ask .cat-talk__avatar img {
  margin-block-start: -3%;
}

.cat-talk__turn--answer .cat-talk__avatar img {
  margin-block-start: 0;
}

.cat-talk__bubble {
  position: relative;
  min-width: 0;
  padding: 0.9rem 1.15rem;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.cat-talk__turn--answer .cat-talk__bubble {
  background: var(--color-teal-soft);
  border-color: #bcd3ee;
}

.cat-talk__name {
  margin: 0 0 0.3rem;
  color: var(--color-muted);
  font-family: var(--font-utility);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cat-talk__bubble p:last-child {
  margin-bottom: 0;
}

.cat-talk__bubble p + p {
  margin-top: 0.65rem;
}

/* 吹き出しの尻尾。純粋な装飾なので content は空にしてある。 */
.cat-talk__bubble::before {
  position: absolute;
  top: 1.2rem;
  width: 0;
  height: 0;
  border-block: 0.45rem solid transparent;
  content: "";
}

.cat-talk__turn--ask .cat-talk__bubble::before {
  left: -0.5rem;
  border-right: 0.5rem solid var(--color-border);
}

.cat-talk__turn--answer .cat-talk__bubble::before {
  right: -0.5rem;
  border-left: 0.5rem solid #bcd3ee;
}