.section {
  padding: var(--space-9) 0;
}
.panel {
  background: var(--panel-bg);
  border-radius: var(--panel-radius);
  margin: var(--panel-inset);
}
.panel--beige {
  --panel-bg: var(--color-page);
}
.panel--bluegray {
  --panel-bg: var(--color-bluegray);
}
.panel--surface {
  --panel-bg: var(--color-surface);
}
.center {
  text-align: center;
}
.problem {
  min-height: 130px;
  text-decoration: none;
}
.steps {
  counter-reset: steps;
}
.steps > *:before {
  counter-increment: steps;
  content: counter(steps);
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tag-rehab);
  margin-right: var(--space-2);
}
.search-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  gap: var(--space-7);
}
.search-layout > * {
  min-width: 0;
}
.filters {
  align-self: start;
}
/* 項目名・件数を別の列に分け、件数だけが次の行へ泣き別れないようにする */
.filters label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}
.filters label .count {
  color: var(--color-text-muted);
}
.filters h2 {
  font-size: 1.35rem;
  white-space: nowrap;
}
.filter-bar {
  display: none;
}
.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
.sheet-apply,
#sheet-close {
  display: none;
}
.result-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
}
.result-head,
.chips,
.provider-name,
.provider-detail .facts,
.provider-detail .template-thumbnail,
.detail-price-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.chips {
  display: flex;
  flex-wrap: wrap;
}
.result-head h1 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-7);
}
.pagination button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
}
.table-wrap {
  overflow: auto;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
}
.compare-table th,
.compare-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
  text-align: left;
}
.compare-table th {
  background: var(--color-page);
}
.compare-name {
  display: block;
  margin-top: var(--space-2);
  font-weight: 700;
}
.provider-name {
  margin-top: var(--space-5);
}
.compare-table .compare-contact,
.quiz .button.action {
  border-color: var(--color-accent);
  background: var(--color-surface);
  color: var(--color-accent);
}
.provider-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--detail-aside);
  gap: var(--space-9);
  align-items: start;
}
.detail-main {
  min-width: 0;
}
.detail-summary {
  position: sticky;
  top: var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-m);
  padding: var(--space-5);
}
.detail-summary dl {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0;
}
.detail-summary dl div {
  display: grid;
  gap: var(--space-1);
}
.detail-summary dt,
.detail-summary dd,
.detail-price {
  margin: 0;
}
.detail-price-text {
  margin: 0;
}
.detail-price {
  font-size: 1.5rem;
  font-weight: 700;
}
.detail-summary .button {
  display: block;
  margin: var(--space-5) 0;
}
.detail-verified {
  margin-bottom: 0;
  color: var(--color-text-muted);
}
.provider-detail .template-thumbnail {
  aspect-ratio: 21 / 9;
  max-width: 100%;
}
.provider-detail .compare-table th {
  width: 9.5em;
}
.quiz {
  max-width: 760px;
  margin: var(--space-8) auto;
}
.quiz fieldset {
  border: 0;
  padding: 0;
}
.quiz legend {
  font: 700 clamp(1.4rem, 4vw, 2.3rem) var(--font-display);
  margin-bottom: var(--space-6);
}
.quiz legend:focus {
  outline: none;
}
.quiz-top {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--color-page);
  padding: var(--space-3) 0;
}
.quiz .option {
  position: relative;
  min-height: 100px;
}
/* 選んだ状態は背景と ✓ で示す。入力は残してキーボードと読み上げに使う */
.quiz .option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.quiz .option:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.quiz fieldset ~ p {
  margin-top: var(--space-6);
}
.quiz-option-art {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: var(--space-2);
  object-fit: cover;
  border-radius: var(--blob-shape-1);
}
.form {
  max-width: 720px;
  margin: auto;
  display: grid;
  gap: var(--space-5);
}
/* #form は .form の grid の子。margin:auto を付けると中身の幅まで縮むので付けない */
#form {
  display: grid;
  gap: var(--space-5);
}
.form fieldset {
  border: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.form legend {
  padding: 0;
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.form fieldset label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
}
#form > label {
  display: grid;
  gap: var(--space-2);
  font-weight: 700;
}
#form > label input,
#form > label select,
#form > label textarea {
  width: 100%;
  font-weight: 400;
  min-height: 44px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-s);
  background: var(--color-surface);
}
.confirm-list {
  background: var(--color-surface);
  padding: var(--space-5);
  border-radius: var(--radius-m);
}
.problem-grid {
  grid-template-columns: repeat(4, 1fr);
}
.problem-art {
  aspect-ratio: 1;
  overflow: hidden;
  margin-bottom: var(--space-3);
  background: var(--tag-rehab);
}
/* index-reveal.js が .blob を足したら、形と絵の寸法は dotbg.css の .blob に任せる。
   pages.css は後から読まれるので、ここで上書きすると枠が四角いまま回る */
.problem-art:not(.blob) {
  border-radius: var(--radius-s);
}
.problem-art:not(.blob) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.top-hero {
  background: var(--color-page);
  padding-top: var(--top-hero-copy-padding);
}
/* pin する要素に margin があると、GSAP が margin 抜きの幅で測り直して右へはみ出す。
   ヒーローだけは margin を持たせず、角丸の地を ::before に描く */
.top-hero.panel {
  background: none;
  border-radius: 0;
  margin: 0;
}
.top-hero.panel::before {
  background: var(--panel-bg);
  border-radius: var(--panel-radius);
  content: "";
  inset: var(--panel-inset);
  position: absolute;
  z-index: -1;
}
.top-hero.panel > .dotbg {
  border-radius: var(--panel-radius);
  inset: var(--panel-inset);
}
.top-hero-copy > * {
  max-width: 780px;
}
.top-hero-copy > .top-hero-title {
  max-width: none;
}
.top-hero-title {
  font-size: var(--top-hero-title-size);
  line-height: 1.12;
  letter-spacing: 0.02em;
  margin: 0;
}
.top-hero-line {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.08em;
  vertical-align: top;
}
.top-hero-line > span {
  display: inline-block;
}
.top-hero-mark {
  position: relative;
  color: var(--color-accent);
  padding: 0 0.06em;
}
/* 「自由に」の下に手で引いたような線。見出しが上がりきってから左から右へ引く */
.top-hero-line:has(.top-hero-mark) {
  padding-bottom: 0.24em;
}
.top-hero-swash {
  position: absolute;
  left: 0;
  bottom: -0.2em;
  width: 100%;
  height: 0.26em;
  overflow: visible;
}
.top-hero-swash path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.top-hero-lead {
  margin-top: var(--space-3);
  font-size: 1.0625rem;
  color: var(--color-text-muted);
}
.top-hero-lead strong {
  color: var(--color-text);
}
.top-hero-art {
  position: relative;
  width: min(
    var(--top-hero-art-max),
    calc(100% - var(--top-hero-art-gutter) * 2)
  );
  height: var(--top-hero-art-height);
  overflow: hidden;
  border-radius: var(--radius-m);
}
.top-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--top-hero-art-position);
  opacity: 0;
  transition: opacity var(--hero-slide-fade) ease;
}
.top-hero-slide.is-active {
  opacity: 1;
}
.scroll-cue {
  position: absolute;
  right: var(--space-6);
  bottom: calc(var(--top-searchbar-overlap) + var(--space-4));
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}
.scroll-cue-arrow {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-surface);
}
.scroll-cue-arrow svg {
  animation: scroll-cue-bob var(--scroll-cue-period) ease-in-out infinite;
}
.scroll-cue:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.hero-pager {
  position: absolute;
  left: var(--space-6);
  bottom: calc(var(--top-searchbar-overlap) + var(--space-4));
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}
.hero-pager-dot,
.hero-pager-toggle {
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  place-items: center;
  cursor: pointer;
}
.hero-pager-dot {
  background: none;
}
.hero-pager-dot span {
  position: relative;
  width: 18px;
  height: 3px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-line);
}
.hero-pager-dot span::after {
  position: absolute;
  inset: 0;
  content: "";
  background: var(--color-text);
  transform: scaleX(0);
  transform-origin: left;
}
.hero-pager-toggle {
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-surface);
}
.hero-pager-play {
  display: none;
}
.hero-pager.is-paused .hero-pager-pause {
  display: none;
}
.hero-pager.is-paused .hero-pager-play {
  display: block;
}
.hero-pager.is-paused .hero-pager-dot.is-active span::after,
.top-hero-art.is-paused .top-hero-slide.is-active {
  animation-play-state: paused;
}
.hero-pager-dot:focus-visible,
.hero-pager-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
@keyframes hero-pager-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes scroll-cue-bob {
  0%,
  100% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue-arrow svg {
    animation: none;
  }
  .hero-pager-dot.is-active span::after {
    transform: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .top-hero-line > span {
    animation: hero-line-up 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .top-hero-line + .top-hero-line > span {
    animation-delay: 0.12s;
  }
  .top-hero-lead {
    animation: hero-fade-in 0.9s ease-out 0.35s both;
  }
  .top-hero-slide.is-active {
    animation: hero-slide-zoom var(--hero-slide-interval) linear both;
  }
  .hero-pager-dot.is-active span::after {
    animation: hero-pager-fill var(--hero-slide-interval) linear forwards;
  }
  .top-hero-swash path {
    stroke-dasharray: 1;
    animation: hero-swash-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.95s both;
  }
  /* ScrollTrigger は refresh のたびに .top-hero を .pin-spacer へ出し入れし、そのたびにアニメが頭から再生される。
     最初の refresh まで止めておき（index.html の head で付ける）、描き終えたらアニメ自体を外す */
  .is-hero-waiting .top-hero-line > span,
  .is-hero-waiting .top-hero-lead,
  .is-hero-waiting .top-hero-swash path {
    animation-play-state: paused;
  }
  .is-hero-intro-done .top-hero-line > span,
  .is-hero-intro-done .top-hero-lead,
  .is-hero-intro-done .top-hero-swash path {
    animation: none;
  }
}
@keyframes hero-swash-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes hero-line-up {
  from {
    transform: translateY(105%);
  }
  to {
    transform: none;
  }
}
@keyframes hero-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes hero-slide-zoom {
  from {
    transform: scale(var(--hero-slide-zoom));
  }
  to {
    transform: none;
  }
}
.top-search ~ .section {
  padding-block: var(--top-section-space);
}
.top-hero-copy p:not(.eyebrow),
.top-search ~ .section > p,
.about-block p:not(.about-number),
.about-block li {
  line-height: var(--leading-prose);
  letter-spacing: var(--tracking-prose);
}
.top-search {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--top-searchbar-overlap) * -1);
}
.recent-grid {
  grid-template-columns: repeat(3, 1fr);
}
.recent-link {
  margin-top: var(--space-6);
  text-align: center;
}
.about-lead {
  max-width: 760px;
}
/* ケアマネの切り抜きを見出しと導入文の右に立たせる。狭い画面では出さない */
.about-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  column-gap: var(--space-6);
  align-items: end;
}
.about-head > :not(.about-caremane) {
  grid-column: 1;
}
.about-caremane {
  grid-column: 2;
  grid-row: 1 / span 2;
  height: auto;
  width: 120px;
}
@media (max-width: 640px) {
  .about-head {
    grid-template-columns: 1fr;
  }
  .about-caremane {
    display: none;
  }
}
.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-9);
}
.about-block {
  padding: 0;
}
.about-number {
  margin-bottom: var(--space-2);
  color: var(--color-accent);
  font: 700 2rem/1 var(--font-display);
}
.about-block ol {
  margin: 0;
  padding-left: var(--space-5);
}
.about-quiz-link {
  display: block;
  width: fit-content;
  margin: var(--space-7) auto 0;
}
.consult-band {
  padding: var(--space-7);
  display: flex;
  gap: var(--space-5);
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 1025px) {
  .consult-band {
    padding-right: max(var(--space-7), calc((100vw - 1180px) / 2));
    padding-left: max(var(--space-7), calc((100vw - 1180px) / 2));
  }
}
.has-hero-motion {
  overflow-x: hidden;
}
/* 全幅の覆いが縦スクロールバーの幅だけはみ出すので、body で切る（clip はスクロール領域を作らない） */
.has-hero-motion body {
  overflow-x: clip;
}
.has-hero-motion .top-hero {
  position: relative;
  z-index: 0;
}
.has-hero-motion .top-hero-art {
  will-change: width, height, left, top, opacity, transform;
}
.has-hero-motion .top-hero-copy .top-hero-lead {
  animation: none;
}
.has-hero-motion .top-search {
  margin-top: 0;
}
/* pin すると .top-hero は .pin-spacer に包まれ兄弟でなくなるので、後続は .top-search から数える */
.has-hero-motion .top-search,
.has-hero-motion .top-search ~ * {
  position: relative;
  z-index: 1;
}
/* パネルは画面端から内側に寄せてあるので、その余白からも絵がのぞく。裏に余白まで届く地を敷く。
   パネルは z-index: 1 で重なりの文脈を作り、負の z-index は自分の地より上に描かれる。
   だからパネルの地も ::after に移し、余白の地 → パネルの地 → 水玉（.dotbg は -1）の順に重ねる */
.has-hero-motion .top-search ~ .panel {
  background: none;
}
.has-hero-motion .top-search ~ .panel::before,
.has-hero-motion .top-search ~ .panel::after {
  content: "";
  position: absolute;
}
.has-hero-motion .top-search ~ .panel::before {
  background: var(--color-page);
  inset: calc(var(--panel-inset) * -1);
  z-index: -3;
}
.has-hero-motion .top-search ~ .panel::after {
  background: var(--panel-bg);
  border-radius: var(--panel-radius);
  inset: 0;
  z-index: -2;
}
@media (min-width: 1025px) {
  .top-hero-lead {
    margin: var(--space-3) 0 var(--space-6);
    font-size: 1.1875rem;
  }
}
@media (max-width: 1024px) {
  .problem-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 960px) {
  /* 1列では本文の箱を開き、サマリーを画像と表のあいだに差し込む */
  .provider-detail {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .detail-main {
    display: contents;
  }
  .detail-summary {
    position: static;
    order: 1;
  }
  .detail-main > .compare-table,
  .detail-main > details {
    order: 2;
  }
  .provider-detail .template-thumbnail {
    aspect-ratio: 16 / 9;
  }
}
@media (max-width: 640px) {
  .scroll-cue {
    right: var(--space-4);
  }
  .search-layout {
    grid-template-columns: 1fr;
  }
  .filters {
    display: none;
  }
  .filter-bar {
    position: sticky;
    top: 0;
    z-index: var(--z-filter-bar);
    display: block;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    background: var(--color-page);
  }
  .filters.open {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--z-sheet);
    display: block;
    max-height: var(--sheet-max-height);
    overflow-y: auto;
    border-radius: var(--radius-m) var(--radius-m) 0 0;
  }
  #sheet-backdrop:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-sheet) - 1);
    background: var(--color-backdrop);
  }
  body.sheet-open {
    overflow: hidden;
  }
  .sheet-head {
    margin-bottom: var(--space-4);
  }
  #sheet-close,
  .sheet-apply {
    display: inline-block;
  }
  .sheet-apply {
    width: 100%;
    margin-top: var(--space-4);
  }
  .result-head {
    align-items: start;
    flex-direction: column;
  }
  .hero-copy {
    padding: var(--space-5);
  }
  .problem-grid {
    grid-template-columns: 1fr;
  }
  .recent-grid,
  .about-grid {
    grid-template-columns: 1fr;
  }
  .top-hero {
    padding-top: var(--space-6);
  }
  /* 字間は body から 0.8px で継承される。スマホは13字を1行に収めるため 0 にする */
  .top-hero-copy > .top-hero-title {
    max-width: calc(100vw - var(--space-8));
    letter-spacing: 0;
  }
  .hero-pager {
    top: var(--space-4);
    right: auto;
    bottom: auto;
    left: var(--space-4);
  }
  .quiz {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
  }
  .consult-band {
    flex-direction: column;
    align-items: start;
  }
}
/* 職種の挿絵。切り抜き（img/cutout）と歩く GIF（img/walk）を横に並べ、少し重ねる */
.cast {
  --cast-overlap: var(--space-4);
  display: flex;
  align-items: flex-end;
}
.cast img {
  display: block;
  width: 100%;
  height: auto;
}
.cast > * {
  flex: 1 1 0;
  min-width: 0;
}
.cast > * + * {
  margin-left: calc(var(--cast-overlap) * -1);
}
.listing-guide {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-7);
  align-items: center;
}
.listing-guide > .button {
  justify-self: start;
}
/* 4職種を見出しの下に横一列で並べる。1枚に2人いるので重ねない */
.about-cast {
  --cast-overlap: 0px;
  column-gap: var(--space-4);
  margin: var(--space-6) auto var(--space-7);
  max-width: 880px;
}
.listing-cast {
  grid-column: 2;
  grid-row: 1 / span 3;
  width: min(300px, 28vw);
}
/* GIF は 560px 四方の真ん中に人がいるので、大きく重ねる */
.consult-cast {
  --cast-overlap: 80px;
  flex: none;
  width: 400px;
}
@media (max-width: 960px) {
  .listing-guide {
    grid-template-columns: 1fr;
  }
  .about-cast {
    flex-wrap: wrap;
    gap: var(--space-4);
    max-width: 480px;
  }
  .about-cast > * {
    flex-basis: calc(50% - var(--space-4) / 2);
  }
  .listing-cast {
    grid-column: auto;
    grid-row: auto;
    width: min(360px, 100%);
    margin: var(--space-5) 0;
  }
  .consult-cast {
    width: 240px;
    --cast-overlap: 48px;
  }
}

/* 運営者情報（company.html）。色は tokens.css のものだけ */
.company {
  --company-width: 720px;
  --company-img-width: 220px;
}
.company-hero,
.company-block {
  margin: 0 auto;
  max-width: var(--company-width);
  width: calc(100% - 28px);
}
.company-hero {
  align-items: center;
  display: flex;
  gap: var(--space-8);
  padding: var(--space-10) 0 var(--space-6);
}
.company-hero__copy {
  flex: 1;
}
.company-hero__img {
  border-radius: var(--radius-m);
  flex: none;
  height: auto;
  width: 280px;
}
.company-nw {
  white-space: nowrap;
}
.company-hero h1 {
  overflow-wrap: anywhere;
  white-space: nowrap;
}
.company-kicker {
  color: var(--color-accent);
  font-weight: 700;
  margin: 0 0 var(--space-2);
}
.company-tagline {
  color: var(--color-text-muted);
  margin: var(--space-3) 0 0;
}
.company-letter {
  align-items: flex-start;
  display: flex;
  gap: var(--space-8);
}
.company-letter__img {
  border-radius: var(--radius-m);
  flex: none;
  height: auto;
  position: sticky;
  top: var(--space-6);
  width: var(--company-img-width);
}
.company-letter__body {
  flex: 1;
  line-height: 2;
  max-width: 36em;
  min-width: 0;
}
.company-letter__body p {
  margin: 0 0 var(--space-4);
}
.company-letter__body .company-letter__kicker {
  color: var(--color-accent);
  font-weight: 700;
  margin: 0;
}
.company-letter h2 {
  margin: var(--space-1) 0 var(--space-6);
}
.company-letter__body .company-letter__quote {
  border-left: 4px solid var(--color-action);
  color: var(--color-action);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  margin: var(--space-6) 0;
  padding-left: var(--space-4);
}
.company-letter__body .company-letter__sign {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.6;
  margin: var(--space-8) 0 0;
}
.company-letter__role {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.company-letter__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
}
.company-info {
  border-top: 1px solid var(--color-line);
  margin: var(--space-6) 0 0;
}
.company-info > div {
  border-bottom: 1px solid var(--color-line);
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}
.company-info dt {
  color: var(--color-text-muted);
  flex: none;
  font-weight: 700;
  width: 9em;
}
.company-info dd {
  flex: 1;
  margin: 0;
  min-width: 0;
}
.todo-fill {
  background: var(--color-beige-deep);
  border-bottom: 2px dotted var(--color-stale);
  color: var(--color-text);
  font-weight: 700;
}
@media (max-width: 640px) {
  .company-hero,
  .company-letter,
  .company-info > div {
    flex-direction: column;
  }
  .company-hero {
    align-items: stretch;
    padding-top: var(--space-8);
  }
  .company-hero__img {
    width: 100%;
  }
  .company-letter__img {
    max-width: 100%;
    position: static;
  }
  .company-info > div {
    gap: var(--space-1);
  }
  .company-info dt {
    width: auto;
  }
}

/* 規程ページ（privacy / terms / listing-policy）。長文なので本文幅を絞って行間を広げる */
.legal-body {
  line-height: 2;
  max-width: 36em;
  overflow-wrap: anywhere;
}
.legal-body h1 {
  margin: 0 0 var(--space-5);
}
.legal-body h2 {
  margin: var(--space-7) 0 var(--space-3);
}
.legal-body p,
.legal-body ul {
  margin: 0 0 var(--space-4);
}
.legal-body ul {
  padding-left: 1.5em;
}
.legal-body a,
.consent a {
  text-decoration: underline;
}
.source-badge {
  position: relative;
  z-index: 3; /* 行全体を覆う .card-link::after より上に出して、開閉を押せるようにする */
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.source-badge summary {
  cursor: pointer;
  color: var(--color-text-muted);
}
.source-badge p,
.source-badge ul {
  margin: var(--space-2) 0;
}
.verified-legend {
  margin: var(--space-3) 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.verified-legend .source-badge {
  display: inline-block;
  margin-left: var(--space-2);
}
.verified-check {
  position: relative;
  z-index: 3;
  display: inline-block;
  margin-bottom: var(--space-2);
}
.verified-check-button {
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--tag-rehab);
  padding: 2px 6px;
  color: var(--color-text);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.verified-check-tip {
  position: absolute;
  z-index: 4;
  left: 0;
  top: calc(100% + var(--space-2)); /* 上に開くと事業所名を隠すので下に開く */
  display: none;
  width: min(18rem, calc(100vw - var(--space-4)));
  padding: var(--space-3);
  border-radius: var(--radius-s);
  background: var(--color-text);
  color: var(--color-surface);
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: left;
}
.verified-check-button:focus-visible,
.verified-check-button[aria-expanded="true"] {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.verified-check-button:focus-visible + .verified-check-tip,
.verified-check-button[aria-expanded="true"] + .verified-check-tip {
  display: block;
}
@media (hover: hover) {
  .verified-check:hover .verified-check-tip {
    display: block;
  }
}
.contact {
  max-width: 720px;
}
.contact-caution {
  border-left: 4px solid var(--color-accent);
  padding-left: var(--space-4);
  margin: var(--space-6) 0;
}
.contact-actions {
  display: grid;
  gap: var(--space-3);
}
.contact-actions .button {
  width: 100%;
}
.form-hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.form-error {
  flex-basis: 100%;
  margin: 0;
  color: var(--color-action);
  font-weight: 700;
}
.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
/* 問い合わせフォームの同意欄。#form > label の規則に巻き込まれないよう div で包んでいる */
.consent label {
  align-items: flex-start;
  display: flex;
  gap: var(--space-3);
  min-height: 44px;
}
.consent input {
  flex: none;
  margin: 0.45em 0 0;
}
