/* 業務とICTの健康診断 /kaigo/healthcheck/
   kaigo.css のデザイン言語を継承し、このページ固有の構造だけを定義する。 */

/*
 * 目次まわりの基準値。クリックの停止位置、sticky INDEXの固定位置、
 * kaigo.js の active 判定線を、すべてこの2つから導く。個別の数値は置かない。
 * kaigo.js の判定線も header の実高さ + 28px なので、--hc-anchor と一致する。
 */
.care-healthcheck {
  --hc-anchor: calc(var(--header-height) + 28px);
  --hc-section-pad: clamp(48px, 4.5vw, 68px);
}

.care-healthcheck .care-page-index {
  top: var(--hc-anchor);
}

/*
 * このページだけの縦密度。説明が長いページなので、SERVICE・APPROACHと同じ
 * 見出し階層と同じ段落の詰まり方に合わせる。/kaigo/ 側の余白は変えない。
 *
 * scroll-margin-top から上パディングを引いているのは、section の箱の上端と
 * 「本文が見え始める位置」が padding 分ずれているため。引かないと、目次を
 * 押したときに見出しが HEADER のはるか下へ着地する。
 */
.care-healthcheck .care-section {
  padding: var(--hc-section-pad) 0;
  scroll-margin-top: calc(var(--hc-anchor) - var(--hc-section-pad));
}

.care-healthcheck .care-section-heading {
  margin-bottom: clamp(24px, 2.5vw, 34px);
}

.care-healthcheck .care-task {
  font-size: 1rem;
}

.care-healthcheck .hc-hero {
  padding: clamp(48px, 4.2vw, 66px) 0 clamp(44px, 3.8vw, 60px);
}

/*
 * HEROは /kaigo/ と同じ2カラムの組み方にする。右側を装飾で埋めるのではなく、
 * 見出しの隣に本文そのものを置くことで、版面を端まで使いながら全高が下がる。
 */
.care-healthcheck .hc-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .78fr);
  column-gap: clamp(36px, 3.6vw, 60px);
  align-items: center;
}

.care-healthcheck .hc-hero-head {
  min-width: 0;
}

/* ------------------------------------------------------------------ */
/* HERO右：診断で見るものの図                                          */
/* ------------------------------------------------------------------ */

/*
 * HOMEのHERO図と同じ文法。同心円と細い放射線の上に、白地のノードを置く。
 * 中心が「今の仕事の流れ」で、その周りが健康診断で確認する5つ。
 *
 * 円と線はSVGで描く。viewBox 440x420 の中で、中心 (220,200)、ノードの環
 * r=132、内側の環 r=52。放射線は内環の縁からノード中心までを結ぶので、
 * 円との接点にも端にも隙間が出ない。
 *
 * 文字だけHTMLのまま重ねているのは、SVGのtextはviewBoxと一緒に縮むため、
 * 幅の狭い画面で読めなくなるのを避けるため。ノードの位置はSVGと同じ座標を
 * パーセントへ直したものなので、線の先端とノード中心は必ず一致する。
 */
.care-healthcheck .hc-hero-map {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin-inline: auto;
  aspect-ratio: 440 / 420;
}

.care-healthcheck .hc-map-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.care-healthcheck .hc-map-ring {
  fill: none;
  stroke: #d9d6cf;
  stroke-width: 1;
}

.care-healthcheck .hc-map-ray {
  stroke: #c8c4bd;
  stroke-width: 1;
}

.care-healthcheck .hc-map-node {
  position: absolute;
  z-index: 2;
  padding: 7px 13px;
  border: 1px solid #bcb8b0;
  background: var(--white);
  color: var(--ink);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

/* SVG座標をそのままパーセントへ。220/440, 200/420 が中心。 */
.care-healthcheck .hc-map-node--core {
  top: 47.619%;
  left: 50%;
  padding: 10px 17px;
  border-color: var(--brand-yellow);
  font-size: .85rem;
}

.care-healthcheck .hc-map-node--1 { top: 16.190%; left: 50%; }
.care-healthcheck .hc-map-node--2 { top: 37.907%; left: 78.535%; }
.care-healthcheck .hc-map-node--3 { top: 73.045%; left: 67.634%; }
.care-healthcheck .hc-map-node--4 { top: 73.045%; left: 32.366%; }
.care-healthcheck .hc-map-node--5 { top: 37.907%; left: 21.466%; }

.care-healthcheck .hc-hero h1 {
  max-width: none;
  margin: 0 0 16px;
  font-size: clamp(1.62rem, 2.28vw, 2.05rem);
}

.care-healthcheck .hc-lead {
  max-width: 860px;
  margin: 0 0 clamp(13px, 1.35vw, 18px);
  color: var(--ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(.96rem, 1.3vw, 1.14rem);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.56;
}

.care-healthcheck .hc-lead > span {
  display: block;
}

.care-healthcheck .hc-hero-lead {
  max-width: none;
  /*
   * キャッチコピーと、その説明本文を切り離すための間隔。段落の間隔ではなく
   * 役割の切り替わりなので、本文同士の 11px よりはっきり広く取る。
   * キャッチ内部の行間（line-height 1.56）と文字サイズは変えない。
   */
  margin-bottom: clamp(20px, 2.2vw, 32px);
  font-size: clamp(1.04rem, 1.46vw, 1.28rem);
}

.care-healthcheck .hc-hero-copy,
.care-healthcheck .hc-copy {
  max-width: 880px;
}

.care-healthcheck .hc-hero-copy p,
.care-healthcheck .hc-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.care-healthcheck .hc-hero-copy p + p,
.care-healthcheck .hc-copy p + p {
  margin-top: 11px;
}

.care-healthcheck .hc-question-lines {
  margin-top: 18px;
  margin-bottom: 16px;
  color: var(--ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: .96rem;
  line-height: 1.42;
}

.care-healthcheck .hc-question-lines > span {
  display: block;
}

.care-healthcheck .hc-keep {
  white-space: nowrap;
}

.care-healthcheck .hc-marked-list {
  max-width: 760px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.care-healthcheck .hc-marked-list li {
  position: relative;
  padding-left: 24px;
  color: var(--ink);
  line-height: 1.75;
}

.care-healthcheck .hc-marked-list li + li {
  margin-top: 12px;
}

.care-healthcheck .hc-marked-list li::before {
  position: absolute;
  top: 13px;
  left: 0;
  width: 10px;
  height: 2px;
  background: var(--brand-yellow);
  content: "";
}

.care-healthcheck .hc-aside {
  max-width: 860px;
  margin-top: clamp(64px, 7vw, 100px);
  padding-top: 30px;
  border-top: 1px solid var(--line-strong);
}

.care-healthcheck .hc-aside h3 {
  margin: 0 0 20px;
  color: var(--ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(.95rem, 1.28vw, 1.1rem);
  font-weight: 500;
  line-height: 1.45;
}

.care-healthcheck .hc-aside .hc-marked-list + .hc-copy {
  margin-top: 26px;
}

/* 01 こんなことはありませんか */

.care-healthcheck .hc-signal-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(40px, 6vw, 90px);
  row-gap: 0;
  max-width: 980px;
}

.care-healthcheck .hc-signal {
  position: relative;
  margin: 0;
  padding: 22px 0 21px 24px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  line-height: 1.68;
}

.care-healthcheck .hc-signal::before {
  position: absolute;
  top: 32px;
  left: 0;
  width: 10px;
  height: 2px;
  background: var(--brand-yellow);
  content: "";
}

.care-healthcheck .hc-signal-note {
  margin-top: clamp(38px, 4vw, 54px);
}

/* 02 業務とICTの健康診断とは */

.care-healthcheck .hc-what-points {
  margin-top: 26px;
  margin-bottom: 28px;
}

/* 03 何を見るのか */

.care-healthcheck .hc-view-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(44px, 6vw, 96px);
  row-gap: clamp(44px, 5vw, 66px);
}

.care-healthcheck .hc-view {
  min-width: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
}

.care-healthcheck .hc-view p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.care-healthcheck .hc-view p + p {
  margin-top: 10px;
}

.care-healthcheck .hc-view-num {
  margin: 0 0 12px;
  color: #6d645b;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  line-height: 1.42;
}

.care-healthcheck .hc-view h3 {
  margin: 0 0 16px;
  color: var(--ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(.95rem, 1.28vw, 1.1rem);
  font-weight: 500;
  line-height: 1.42;
}

/* 04 診断で整理すること */

.care-healthcheck .hc-organize-diagram {
  --hc-organize-gap: clamp(24px, 3vw, 40px);
  margin: clamp(52px, 6vw, 78px) 0 clamp(52px, 6vw, 78px);
}

/*
 * 「診断で整理」を中心に、残す・活かす・変える・補うを同じ距離で並べる。
 * 上下の階層ではなく、4つを並べて考えるための図。HERO図と同じ描き方だが、
 * あちらは5点の環、こちらは4点のひし形で別の図として読めるようにしている。
 */
.care-healthcheck .hc-organize-map {
  position: relative;
  width: 100%;
  /*
   * 図の大きさは箱の幅だけで決める。viewBox とノードの % 配置は共通なので、
   * 拡大しても円・線・ノードの接続はずれない。ノードの文字は rem 指定のまま
   * なので、図だけが大きくなり、文字は大きくなりすぎない。
   */
  max-width: 560px;
  /* 下の4つの説明は、この図の4項目を受けたもの。離しすぎない。 */
  margin: 0 auto clamp(24px, 2.4vw, 34px);
  aspect-ratio: 440 / 300;
}

.care-healthcheck .hc-organize-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.care-healthcheck .hc-organize-ring,
.care-healthcheck .hc-organize-hub {
  fill: none;
  stroke: #d9d6cf;
  stroke-width: 1;
}

.care-healthcheck .hc-organize-ray {
  stroke: #c8c4bd;
  stroke-width: 1;
}

.care-healthcheck .hc-organize-node {
  position: absolute;
  z-index: 2;
  padding: 7px 13px;
  border: 1px solid #bcb8b0;
  background: var(--white);
  color: var(--ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: .92rem;
  line-height: 1.4;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

/* SVG座標をそのままパーセントへ。220/440, 150/300 が中心。 */
.care-healthcheck .hc-organize-node--core {
  top: 50%;
  left: 50%;
  padding: 10px 16px;
  border-color: var(--brand-orange);
  font-size: .98rem;
}

.care-healthcheck .hc-organize-node--1 { top: 14.667%; left: 50%; }
.care-healthcheck .hc-organize-node--2 { top: 50%; left: 84.545%; }
.care-healthcheck .hc-organize-node--3 { top: 85.333%; left: 50%; }
.care-healthcheck .hc-organize-node--4 { top: 50%; left: 15.455%; }

.care-healthcheck .hc-organize-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hc-organize-gap);
}

.care-healthcheck .hc-organize-item {
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.care-healthcheck .hc-organize-item h3 {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(.94rem, 1.24vw, 1.08rem);
  font-weight: 500;
  line-height: 1.42;
}

.care-healthcheck .hc-organize-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.care-healthcheck .hc-organize-item p + p {
  margin-top: 8px;
}

/* 05 診断の進め方 */

.care-healthcheck .hc-step-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.care-healthcheck .hc-step {
  display: grid;
  grid-template-columns: minmax(0, 370px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(28px, 3vw, 38px) 0;
  border-bottom: 1px solid var(--line);
}

.care-healthcheck .hc-step-head,
.care-healthcheck .hc-step-body {
  min-width: 0;
}

.care-healthcheck .hc-step-num {
  margin: 0 0 12px;
  color: #6d645b;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  line-height: 1.42;
}

.care-healthcheck .hc-step-head h3 {
  margin: 0;
  color: var(--ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(.93rem, 1.22vw, 1.06rem);
  font-weight: 500;
  line-height: 1.45;
}

.care-healthcheck .hc-step-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.care-healthcheck .hc-step-body p + p {
  margin-top: 10px;
}

/* 06 対象となる事業所 */

.care-healthcheck .hc-target-list {
  margin-top: 26px;
}

.care-healthcheck .hc-target-note {
  margin-top: clamp(38px, 4vw, 52px);
}

/* 07 はじめての方へ */

.care-healthcheck .hc-voices {
  max-width: 760px;
  margin: 0 0 clamp(34px, 4vw, 46px);
  padding: 10px 0 10px 30px;
  border-left: 2px solid var(--brand-yellow);
}

.care-healthcheck .hc-voices p {
  margin: 0;
  color: var(--ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(.96rem, 1.22vw, 1.08rem);
  line-height: 1.85;
}

/* 07 内の無料セルフ診断への導線 */

.care-healthcheck .hc-selfcheck {
  max-width: 760px;
  margin-top: clamp(40px, 4.5vw, 56px);
  padding-top: clamp(32px, 3.5vw, 44px);
  border-top: 1px solid var(--line);
}

.care-healthcheck .hc-selfcheck-lead {
  margin: 0 0 14px;
  color: var(--ink);
  font-weight: 700;
}

.care-healthcheck .hc-selfcheck-text {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.care-healthcheck .hc-selfcheck-link {
  margin-top: 30px;
}

/* 最終CTA */

.care-healthcheck .hc-section-cta {
  padding-top: clamp(64px, 7vw, 96px);
  border-top: 1px solid var(--line);
}

.care-healthcheck .hc-cta-main {
  min-height: 62px;
  margin-top: 0;
  padding: 14px 26px;
  color: var(--ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(.9rem, 1.2vw, 1.02rem);
  font-weight: 500;
  letter-spacing: .02em;
}

.care-healthcheck .hc-cta-back {
  margin: 30px 0 0;
}

.care-healthcheck .hc-cta-back a {
  color: var(--muted);
  font-weight: 700;
}

.care-healthcheck .hc-cta-back a span {
  margin-left: 8px;
  color: var(--brand-red);
}

.care-healthcheck .hc-cta-back a:hover {
  color: var(--brand-red);
}

.care-healthcheck .hc-cta-back a:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 3px;
}

@media (min-width: 921px) {
  .care-healthcheck .care-body {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .care-healthcheck .hc-lead > span {
    white-space: nowrap;
  }
}

@media (max-width: 1100px) {
  .care-healthcheck .hc-organize-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(38px, 5vw, 48px);
    margin-top: 30px;
  }

  .care-healthcheck .hc-organize-item {
    padding-top: 22px;
    border-top: 1px solid var(--line-strong);
  }

  .care-healthcheck .hc-step {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 980px) {
  .care-healthcheck .hc-hero-inner {
    grid-template-columns: 1fr;
    row-gap: 26px;
  }
}

@media (max-width: 920px) {
  /* 目次が横棒になる幅。停止位置の考え方は kaigo.css 側と同じ。 */
  .care-healthcheck {
    /* 固定INDEXはWindows/Chrome実測で72px（上下padding 25px + リンク36px + 境界1px + 横scrollbar10px）。 */
    --care-index-height: 72px;
    --hc-anchor: calc(var(--header-height) + var(--care-index-height) + 20px);
    /*
     * この幅だけ上パディングを戻している。scroll-margin-top は
     * 「停止位置 − 上パディング」なので、着地したときの section の箱の上端は
     * その値になる。kaigo.js は箱の上端が header + 28px（= 100px）の線を
     * 越えたかで active を決めるため、
     *
     *   上パディング > 停止位置(164px) − 判定線(100px) = 64px
     *
     * を満たさないと、着地しても active が前の項目に残る。
     * PC側は停止位置が 100px なのでこの制約は生じない。
     */
    --hc-section-pad: 72px;
  }

  /* 横棒の目次は HEADER の直下に貼り付く。停止位置と同じ値にはしない。 */
  .care-healthcheck .care-page-index {
    top: var(--header-height);
  }

  .care-healthcheck .hc-signal-list,
  .care-healthcheck .hc-view-list {
    grid-template-columns: 1fr;
  }

  .care-healthcheck .hc-view-list {
    row-gap: 42px;
  }
}

@media (max-width: 680px) {
  .care-healthcheck .hc-hero {
    padding: 52px 0 58px;
  }

  /* 図は縮めるがノードの文字は縮めきらない。SVG側は比率のまま追従する。 */
  .care-healthcheck .hc-hero-map {
    max-width: 350px;
  }

  .care-healthcheck .hc-map-node {
    padding: 5px 9px;
    font-size: .71rem;
  }

  .care-healthcheck .hc-map-node--core {
    padding: 7px 12px;
    font-size: .76rem;
  }

  .care-healthcheck .hc-hero h1 {
    font-size: clamp(1.95rem, 8vw, 2.4rem);
  }

  .care-healthcheck .hc-hero-lead {
    font-size: clamp(1.28rem, 6vw, 1.6rem);
  }

  .care-healthcheck .hc-lead {
    font-size: clamp(1.2rem, 5.4vw, 1.45rem);
  }

  .care-healthcheck .hc-question-lines {
    font-size: 1.08rem;
  }

  .care-healthcheck .hc-organize-items {
    grid-template-columns: 1fr;
    row-gap: 26px;
  }

  .care-healthcheck .hc-organize-map {
    max-width: 340px;
  }

  .care-healthcheck .hc-organize-node {
    padding: 5px 10px;
    font-size: .84rem;
  }

  .care-healthcheck .hc-organize-node--core {
    padding: 7px 12px;
    font-size: .9rem;
  }

  .care-healthcheck .hc-voices {
    padding-left: 20px;
  }

  .care-healthcheck .hc-voices p {
    font-size: 1rem;
  }

  .care-healthcheck .hc-cta-main {
    display: block;
    padding: 16px 18px;
    font-size: clamp(.88rem, 3.6vw, 1rem);
  }

  .care-healthcheck .hc-cta-main span {
    margin-left: 10px;
  }
}