.az-research {
  --az-research-ink: #26342d;
  --az-research-muted: #58635d;
  --az-research-line: #ded8cd;
  --az-research-paper: #fff;
  --az-research-soft: #f7f3eb;
  --az-research-accent: #9b4d31;
  --az-research-accent-soft: #f3dfd2;
  width: 100%;
  min-width: 0;
  color: var(--az-research-ink);
  font-family: "Noto Sans JP", sans-serif;
  overflow-wrap: anywhere;
}

.az-research,
.az-research * {
  box-sizing: border-box;
}

.az-research .az-research__container {
  width: min(100% - 40px, 1120px);
  min-width: 0;
  margin-inline: auto;
  padding-block: 30px 64px;
}

.az-research .az-research__read {
  max-width: 860px;
}

.az-research .az-research__breadcrumbs {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0 0 24px;
  color: var(--az-research-muted);
  font-size: 12px;
  line-height: 1.6;
}

.az-research .az-research__breadcrumbs a,
.az-research .az-research__back-link {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--az-research-accent);
}

.az-research .az-research__archive-header {
  max-width: 760px;
  margin-bottom: 28px;
}

.az-research .az-research__archive-header h1,
.az-research .az-research__article-header h1,
.az-research > .az-research__container > h1 {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--az-research-ink);
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: clamp(21px, 3.4vw, 42px);
  line-height: 1.35;
  /*
   * 「結／局」「ど／ちら」のように意味の途中で折れるのを防ぐ。
   * keep-all で日本語の任意位置の改行を止め、テンプレートが入れた <wbr>（意味の切れ目）だけで折る。
   * 1つの意味単位が幅に収まらない場合だけ anywhere が働き、はみ出しは起こさない。
   */
  word-break: keep-all;
  /*
   * anywhere は「収まらないとき」以外でも単語内改行の候補を作るため、
   * 「立地・／エリア」のように意味単位の途中で割れる。break-word は
   * その意味単位が単独でも行に収まらない場合だけ働くので、割れ方が自然になる。
   */
  overflow-wrap: break-word;
}

.az-research .az-research__archive-header > p {
  margin: 16px 0 0;
  color: var(--az-research-muted);
  font-size: 16px;
  line-height: 1.9;
}

.az-research .az-research__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 30px;
}

.az-research .az-research__filters button {
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 9px 18px;
  border: 1px solid var(--az-research-line);
  border-radius: 999px;
  background: var(--az-research-paper);
  color: var(--az-research-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}

.az-research .az-research__filters button[aria-pressed="true"] {
  border-color: var(--az-research-ink);
  background: var(--az-research-ink);
  color: #fff;
}

.az-research .az-research__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.az-research .az-research__card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--az-research-line);
  border-radius: 18px;
  background: var(--az-research-paper);
  box-shadow: 0 8px 26px rgba(38, 52, 45, 0.08);
}

/*
 * カードのアイキャッチ。写真の代わりに、その調査に実在する代表数値を1つ見せる。
 * 高さはPCで約150px。数値が増えてもカードが縦長にならないよう上限を持たせる。
 */
.az-research .az-research__cover {
  display: flex;
  min-height: 150px;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--az-research-line, #e3ddd2);
  background: var(--az-research-thumb-bg, #eef2ec);
  color: var(--az-research-ink);
  text-decoration: none;
}

.az-research .az-research__cover .az-research__cover-topic {
  color: var(--az-research-thumb-accent, #2f6b45);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* 分類ごとの弱いアクセント。色だけで判別させないため、分類名の文字は必ず併記する。 */
.az-research [data-research-topic="home-money"] {
  --az-research-thumb-bg: #eaf1ea;
  --az-research-thumb-accent: #2f6b45;
  --az-research-thumb-bar: #4f8a63;
}

.az-research [data-research-topic="family-life"] {
  --az-research-thumb-bg: #f6ece2;
  --az-research-thumb-accent: #9b4d31;
  --az-research-thumb-bar: #bf7550;
}

.az-research [data-research-topic="work-digital"] {
  --az-research-thumb-bg: #e9edf1;
  --az-research-thumb-accent: #3f5a72;
  --az-research-thumb-bar: #6b8199;
}

/* データサムネイル本体 */
.az-research .az-research__metric {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.az-research .az-research__metric-value {
  margin: 0;
  color: var(--az-research-thumb-accent, #2f6b45);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.az-research .az-research__metric-label {
  margin: 0;
  min-width: 0;
  color: var(--az-research-ink);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.az-research .az-research__metric-bar {
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  margin-top: 2px;
  background: rgba(38, 52, 45, 0.1);
}

.az-research .az-research__metric-fill {
  display: block;
  height: 100%;
  background: var(--az-research-thumb-bar, #4f8a63);
}

.az-research .az-research__metric-fill--second {
  background: rgba(38, 52, 45, 0.28);
}

.az-research .az-research__metric-second {
  margin: 0;
  color: var(--az-research-muted);
  font-size: 12px;
}

/* 個別ページ冒頭の「注目データ」。カードより一段大きく置く。 */
.az-research .az-research__keydata {
  margin: 22px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--az-research-line, #e3ddd2);
  border-left: 4px solid var(--az-research-thumb-accent, #2f6b45);
  border-radius: 12px;
  background: var(--az-research-thumb-bg, #eef2ec);
}

.az-research .az-research__keydata-caption {
  margin: 0 0 8px;
  color: var(--az-research-thumb-accent, #2f6b45);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.az-research .az-research__metric--keydata .az-research__metric-value {
  font-size: 40px;
}

.az-research .az-research__metric--keydata .az-research__metric-label {
  font-size: 15px;
}

.az-research .az-research__metric--keydata .az-research__metric-bar {
  height: 10px;
  max-width: 420px;
}

.az-research .az-research__cover-topic,
.az-research .az-research__card-topic,
.az-research .az-research__topic {
  color: var(--az-research-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.az-research .az-research__cover-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
}

.az-research .az-research__card-body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  padding: 20px;
}

.az-research .az-research__card-topic {
  margin: 0 0 7px;
}

.az-research .az-research__card h2,
.az-research .az-research__card h3 {
  display: -webkit-box;
  min-height: 3em;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  font-size: 18px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.az-research .az-research__card h2 a,
.az-research .az-research__card h3 a {
  display: flex;
  min-height: 44px;
  align-items: flex-start;
  color: var(--az-research-ink);
  text-decoration: none;
}

.az-research .az-research__card-summary {
  display: -webkit-box;
  margin: 12px 0 0;
  overflow: hidden;
  color: var(--az-research-muted);
  font-size: 14px;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.az-research .az-research__card-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 14px;
  color: var(--az-research-accent);
  font-size: 14px;
  font-weight: 700;
}

.az-research .az-research__empty {
  margin: 28px 0;
  padding: 22px;
  border-radius: 14px;
  background: var(--az-research-soft);
  color: var(--az-research-muted);
  text-align: center;
}

.az-research .az-research__cta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--az-research-line);
}

.az-research .az-research__cta-card {
  min-width: 0;
  padding: 24px;
  border-radius: 16px;
  background: var(--az-research-soft);
}

.az-research .az-research__cta-card h3 {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--az-research-ink);
  font-size: 19px;
}

.az-research .az-research__cta-card p {
  margin: 10px 0 16px;
  color: var(--az-research-muted);
  font-size: 14px;
  line-height: 1.75;
}

.az-research .az-research__cta-card a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--az-research-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.az-research .az-research__article-header {
  margin-bottom: 30px;
}

.az-research .az-research__topic {
  margin: 0 0 10px;
}

.az-research .az-research__lead {
  margin: 20px 0 0;
  color: var(--az-research-muted);
  font-size: 17px;
  line-height: 1.9;
}

.az-research .az-research__feature-cover {
  display: flex;
  min-height: 270px;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 28px;
  padding: clamp(24px, 5vw, 48px);
  border-radius: 22px;
  background: linear-gradient(135deg, #dce9df, #f4dfcf);
}

.az-research .az-research__feature-cover span {
  color: var(--az-research-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.az-research .az-research__feature-cover strong {
  max-width: 680px;
  color: var(--az-research-ink);
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: clamp(25px, 4vw, 38px);
  line-height: 1.45;
}

.az-research .az-research__article > p,
.az-research .az-research__article > section > p,
.az-research .az-research__result > p,
.az-research .az-research__voices > p {
  margin: 0 0 1.35em;
  font-size: 16px;
  line-height: 1.95;
}

.az-research .az-research__article h2 {
  margin: 54px 0 20px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 2px solid var(--az-research-line);
  background: none;
  color: var(--az-research-ink);
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: clamp(23px, 3.2vw, 30px);
  line-height: 1.5;
}

.az-research .az-research__article h3 {
  margin: 28px 0 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--az-research-ink);
  font-size: 20px;
  line-height: 1.5;
}

.az-research .az-research__article h4 {
  margin: 0 0 10px;
  color: var(--az-research-ink);
  font-size: 16px;
}

.az-research .az-research__highlights ul {
  margin: 0;
  padding: 22px 24px 22px 44px;
  border-radius: 16px;
  background: var(--az-research-soft);
}

.az-research .az-research__highlights li {
  margin: 0 0 10px;
  line-height: 1.75;
}

.az-research .az-research__highlights li:last-child {
  margin-bottom: 0;
}

.az-research .az-research__toc {
  margin-top: 42px;
  padding: 22px 24px;
  border: 1px solid var(--az-research-line);
  border-radius: 16px;
  background: var(--az-research-paper);
}

.az-research .az-research__toc h2 {
  margin-top: 0;
}

.az-research .az-research__toc ol {
  margin: 0;
  padding-left: 24px;
}

.az-research .az-research__toc li {
  margin: 2px 0;
}

.az-research .az-research__toc a {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  padding-right: 10px;
  align-items: center;
  color: var(--az-research-accent);
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-break: anywhere;
}

.az-research .az-research__chart {
  min-width: 0;
  margin: 28px 0 34px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--az-research-line);
  border-radius: 18px;
  background: var(--az-research-paper);
}

.az-research .az-research__chart figcaption {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 22px;
}

.az-research .az-research__chart-title {
  color: var(--az-research-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
}

.az-research .az-research__chart-note {
  color: var(--az-research-muted);
  font-size: 12px;
  line-height: 1.6;
}

.az-research .az-research__bars {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * PCの行構成：順位 / ラベル / バー / 数値。
 * ラベル列を 1fr で伸ばすと、幅が広い画面でラベルとバーの間が200px近く空き、
 * どのラベルがどのバーか追いにくくなる。列幅に上限を付け、ラベルは右寄せにして
 * バーの始点へ寄せる（間隔は gap の16px）。
 */
.az-research .az-research__bars li {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) 72px;
  gap: 16px;
  align-items: center;
  margin: 0;
}

.az-research .az-research__bars li.az-research__bar--ranked {
  grid-template-columns: 34px minmax(220px, 280px) minmax(0, 1fr) 72px;
}

.az-research .az-research__bars li .az-research__bar-label {
  text-align: right;
}

/* 1位だけ一段濃く。同率1位は全てに付くので順位の重みは崩れない。 */
.az-research .az-research__bar--top .az-research__bar-fill {
  background: var(--az-research-accent);
}

.az-research .az-research__bar--top .az-research__bar-value {
  color: var(--az-research-accent);
}

.az-research .az-research__bar-rank {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--az-research-accent-soft);
  color: var(--az-research-accent);
  font-size: 12px;
  font-weight: 700;
}

.az-research .az-research__bar-label {
  min-width: 0;
  padding-right: 10px;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-all;
  line-break: anywhere;
}

.az-research .az-research__bar-track {
  display: block;
  width: 100%;
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9e5de;
}

.az-research .az-research__bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--az-research-accent);
}

.az-research .az-research__bar-value {
  color: var(--az-research-ink);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}

.az-research .az-research__bar-value small {
  display: block;
  color: var(--az-research-muted);
  font-size: 11px;
  font-weight: 400;
}

.az-research .az-research__chart-groups {
  display: grid;
  gap: 24px;
}

.az-research .az-research__chart-group h3 {
  margin-top: 0;
  font-size: 16px;
}

.az-research .az-research__table-block {
  min-width: 0;
  margin: 28px 0 34px;
}

.az-research .az-research__table-scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--az-research-line);
  border-radius: 14px;
  -webkit-overflow-scrolling: touch;
}

.az-research .az-research__table-scroll table {
  width: max-content;
  min-width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 12px;
}

.az-research .az-research__table-scroll caption {
  padding: 16px;
  color: var(--az-research-ink);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}

.az-research .az-research__table-scroll th,
.az-research .az-research__table-scroll td {
  min-width: 88px;
  padding: 10px;
  border: 1px solid var(--az-research-line);
  text-align: right;
  vertical-align: top;
}

.az-research .az-research__table-scroll th:first-child {
  min-width: 210px;
  text-align: left;
}

.az-research .az-research__table-note,
.az-research .az-research__overview-note {
  margin: 10px 0 0;
  color: var(--az-research-muted);
  font-size: 12px;
  line-height: 1.7;
}

.az-research .az-research__voice-group blockquote {
  margin: 16px 0;
  padding: 18px 20px;
  border: 0;
  border-left: 4px solid var(--az-research-accent);
  background: var(--az-research-soft);
}

.az-research .az-research__voice-group blockquote p {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
}

.az-research .az-research__voice-group cite {
  display: block;
  margin-top: 10px;
  color: var(--az-research-muted);
  font-size: 12px;
  font-style: normal;
}

.az-research .az-research__overview-table {
  max-width: 100%;
  overflow-x: auto;
}

.az-research .az-research__overview-table table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.az-research .az-research__overview-table th,
.az-research .az-research__overview-table td {
  padding: 13px 14px;
  border: 1px solid var(--az-research-line);
  text-align: left;
  vertical-align: top;
}

.az-research .az-research__overview-table th {
  width: 28%;
  background: var(--az-research-soft);
}

.az-research .az-research__respondents {
  display: grid;
  gap: 14px;
}

.az-research .az-research__respondents section {
  padding: 18px;
  border-radius: 14px;
  background: var(--az-research-soft);
}

.az-research .az-research__respondents ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  margin: 0;
  padding-left: 20px;
}

.az-research .az-research__respondents li {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.az-research .az-research__grid--related {
  margin-top: 22px;
}

@media (max-width: 680px) {
  /*
   * 回答者の属性は1行で意味が完結する短文。実際のWebフォントで描画すると
   * 390〜430px で数px足りず、末尾の括弧が切れる。折り返し規則を強めるより
   * 1段小さくして1行に収めるほうが数値を読み違えない。
   */
  .az-research .az-research__respondents li {
    font-size: 14px;
  }

  .az-research .az-research__container {
    width: min(100% - 28px, 1120px);
    padding-block: 22px 46px;
  }

  .az-research .az-research__grid,
  .az-research .az-research__cta-grid {
    grid-template-columns: 1fr;
  }

  .az-research .az-research__filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .az-research .az-research__filters button {
    padding-inline: 8px;
    font-size: 12px;
  }

  .az-research .az-research__lead {
    font-size: 15px;
  }

  .az-research .az-research__feature-cover {
    min-height: 210px;
  }

  .az-research .az-research__bars li,
  .az-research .az-research__bars li.az-research__bar--ranked {
    grid-template-columns: 28px minmax(0, 1fr) minmax(76px, auto);
    gap: 7px;
  }

  /* スマホは現行どおり、ラベルと数値を上段・バーを下段に置き、左寄せを保つ。 */
  .az-research .az-research__bars li .az-research__bar-label {
    text-align: left;
  }

  .az-research .az-research__cover {
    min-height: 132px;
    padding: 16px 18px;
  }

  .az-research .az-research__metric-value {
    font-size: 26px;
  }

  .az-research .az-research__metric--keydata .az-research__metric-value {
    font-size: 32px;
  }

  .az-research .az-research__keydata {
    padding: 16px 18px;
  }

  .az-research .az-research__bars li:not(.az-research__bar--ranked) .az-research__bar-label {
    grid-column: 1 / 3;
  }

  .az-research .az-research__bars li.az-research__bar--ranked .az-research__bar-label {
    grid-column: 2;
  }

  .az-research .az-research__bar-value {
    grid-column: 3;
    grid-row: 1;
  }

  .az-research .az-research__bar-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .az-research .az-research__bar-rank {
    grid-column: 1;
    grid-row: 1;
  }

  .az-research .az-research__bar-value small {
    display: inline;
  }

  .az-research .az-research__overview-table th,
  .az-research .az-research__overview-table td {
    padding: 10px;
    font-size: 13px;
  }
}

@media (max-width: 400px) {
  /* 390px帯では14pxでも数px足りないため、もう1段だけ小さくする。 */
  .az-research .az-research__respondents li {
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  /*
   * データサムネイルのラベルは1行で意味が完結する短文。320〜360pxでは既定サイズだと
   * 数px足りず末尾の「」が切れるため、1段小さくして1行に収める（数値は途中で割らない）。
   */
  .az-research .az-research__metric-label {
    font-size: 12px;
  }

  .az-research .az-research__metric--keydata .az-research__metric-label {
    font-size: 14px;
  }

  .az-research .az-research__container {
    width: min(100% - 20px, 1120px);
  }

  .az-research .az-research__chart {
    padding-inline: 12px;
  }

  .az-research .az-research__bar-label,
  .az-research .az-research__bar-value {
    font-size: 12px;
  }

  /*
   * 回答者の属性は「3〜5年未満：46人（15.3％）」のような1行で意味が完結する短文。
   * 320〜360px では既定の13pxだと数px足りず、閉じ括弧が切れたり
   * 「（25.」「0％）」のように数値が行をまたいで割れていた。
   * 折り返し規則を強めるより1段小さくして1行に収めるほうが、数値が読みやすい。
   */
  .az-research .az-research__respondents li {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .az-research .az-research__toc {
    scroll-behavior: auto;
  }
}