/* サービス領域：左の図を固定し、右の詳細をスクロールさせる。 */
.service {
  overflow: clip;
  background:
    radial-gradient(circle at 8% 42%, rgba(31, 25, 122, 0.045), transparent 28%),
    var(--color-bg);
}

.service__layout {
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-12));
  margin-top: clamp(var(--space-10), 5vw, var(--space-16));
  align-items: start;
}

.service__figure {
  width: 100%;
  min-width: 0;
}

.service__figure-title {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  color: var(--navy-700);
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
}

.service__figure-title::before,
.service__figure-title::after {
  width: clamp(1.75rem, 4vw, 3.5rem);
  height: 1px;
  content: "";
  background: var(--navy-300);
}

.service-prism {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.service-prism__item {
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.service-prism__item:focus,
.service-prism__item:focus-visible {
  outline: none !important;
}

.service-prism__segment {
  fill: rgba(49, 43, 151, 0.075);
  stroke: rgba(49, 43, 151, 0.2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: fill 480ms ease, stroke 480ms ease, filter 480ms ease;
}

.service-prism__item.is-current .service-prism__segment,
.service-prism__item:hover .service-prism__segment,
.service-prism__item:focus-visible .service-prism__segment {
  fill: var(--navy-800);
  stroke: var(--navy-800);
  filter: drop-shadow(0 18px 22px rgba(8, 6, 74, 0.18));
}

.service-prism__icon {
  fill: none;
  stroke: var(--navy-400);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 420ms ease;
}

.service-prism__label {
  fill: var(--navy-700);
  font-family: var(--font-sans);
  /* ★16 → 17 → 18px（三嶋指示）。
     demo/b1/index.php 側のラベル配置計算（1 文字 19・行高 26+22×(行数−1)）は
     この 18px を前提にした実測値。ここを変えたら向こうも測り直すこと。 */
  font-size: 18px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  transition: fill 420ms ease;
}

.service-prism__item.is-current .service-prism__icon,
.service-prism__item:hover .service-prism__icon,
.service-prism__item:focus-visible .service-prism__icon {
  stroke: #fff;
}

.service-prism__item.is-current .service-prism__label,
.service-prism__item:hover .service-prism__label,
.service-prism__item:focus-visible .service-prism__label {
  fill: #fff;
}

.service-prism__core circle {
  fill: var(--color-bg);
  stroke: var(--navy-200);
  stroke-width: 2;
}

.service-prism__core text {
  fill: var(--navy-800);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.13em;
}

.service-prism__core .service-prism__core-ja {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}

.service__meter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  width: min(82%, 27rem);
  margin: var(--space-3) auto 0;
  color: var(--navy-700);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
}

.service__meter-track {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: var(--color-border);
}

.service__meter-track i {
  position: absolute;
  inset: 0;
  background: var(--navy-700);
  transform: scaleX(var(--service-progress, 0.1667));
  transform-origin: left center;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.service__feed {
  min-width: 0;
}

/*
  節の説明文。**見出しの直下に置いている**（三嶋指示で .service__feed から上げた）。

  ★以前は円環図の横（.service__feed の先頭）にあり、下に大きな padding を持たせて
    «スクロール連動の送り量» を作っていた。見出しの下に移したのでその役目は無くなり、
    .sec-head__lead と同じ «見出しに続く一段» の余白に付け替えている。
  ★max-width は --measure（798px）。和文 1 行 42 字の上限。
    左の列は 835px あるが、行が長くなるほど読みにくくなるのでここで止める。
    結果として、右に置いた動画との空きが 85px に収まる（実測）。
*/
.service__text {
  max-width: var(--measure);
  margin-top: var(--space-6);
}

.service__text > p {
  font-size: var(--text-base);
  line-height: var(--lh-body);
  line-break: strict;
}

.service__text > p + p {
  margin-top: var(--space-6);
}

.service__list {
  display: grid;
  /* ★8rem → 4.75rem（1440px で 128px → 76px） */
  gap: clamp(2.75rem, 5.5vw, 4.75rem);
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

/*
  スクロールに連れて «今どの領域を読んでいるか» を示す。

  ★項目全体の opacity（0.58）はやめた。
    本文まで薄くなり、実測で 3.59:1 まで落ちていた（AA は 4.5:1）。
    さらに見出しを navy-400 にすると 1.85:1 になり、まず読めない。
    薄さは «透明度» ではなく «色» で作る。色なら状態ごとに実測できる。

  非アクティブ／アクティブ の 2 状態（白地に対するコントラスト）：
    見出し（番号＋領域名・32px 太字）  navy-400  3.21:1  →  navy-800 17.90:1
    約束の一文（22px 太字）            gray-600  5.68:1  →  navy-800 17.90:1
    本文（16px）                       gray-600  5.68:1  →  gray-800 13.13:1
  ★どの状態もそれぞれの基準（大きい文字 3:1／本文 4.5:1）を満たしている。
*/
.service__item {
  position: relative;
  scroll-margin-top: 6rem;
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.service__item::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 2px;
  content: "";
  background: var(--navy-700);
  transition: width 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* アクティブ側の色は各要素の規則で指定している（下記） */

.service__item.is-current::before {
  width: 100%;
}

@media (min-width: 900px) {
  .service__item.is-current {
    transform: translateX(0.75rem);
  }
}

.service__item-head {
  display: flex;
  gap: var(--space-5);
  align-items: baseline;
}

/*
  ★番号は円環図のしずくと同じ色（--mix）にしていたが、状態表示に譲った。
    «今どこを読んでいるか» の方が、番号と弁の色を対応させることより優先度が高い。
    図との対応は、図側で該当の弁が濃くなることで取れている。
*/
.service__no,
.service__name {
  color: var(--navy-400);
  transition: color 420ms ease;
}

.service__item.is-current .service__no,
.service__item.is-current .service__name {
  color: var(--color-text-strong);
}

.service__no {
  /* 領域名と同じ大きさ。baseline 揃えなので、片方だけ大きいと組が崩れる */
  font-size: clamp(var(--text-2xl), 2.2vw, var(--text-3xl));
  font-weight: var(--fw-medium);
  line-height: 1;
}

/*
  領域名。ここが項目の見出し（h3）。
  ★三嶋指示で «約束の一文» より大きくした。
    読み手は「採用を改善したい」→「採用強化」と領域名で探すので、
    先に目に入るべきなのは領域名の方。約束の一文はその中身の説明にあたる。
  ★番号（--text-2xl）と baseline を揃えているので、
    ここを大きくすると番号が小さく見える。番号も同じ clamp に合わせてある。
*/
.service__name {
  font-size: clamp(var(--text-2xl), 2.2vw, var(--text-3xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: 0.02em;
}

/*
  約束の一文。見出しではなくなったので h3 → p。
  ★領域名より一段下げる（32px → 20px）。上下が同じ大きさだと
    どちらが見出しなのか分からなくなる。太字は残して本文とは区別する。
*/
.service__title {
  max-width: 30rem;
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  transition: color 420ms ease;
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  text-wrap: balance;
  word-break: auto-phrase;
  line-break: strict;
}

.service__item.is-current .service__title {
  color: var(--color-text-strong);
}

.service__item.is-current .service__body {
  color: var(--color-text);
}

.service__body {
  max-width: var(--measure);
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  transition: color 420ms ease;
  font-size: 1rem;
  line-height: var(--lh-body);
  text-wrap: pretty;
  word-break: normal;
  line-break: strict;
}

/* 詳細ページへの導線（2026-10-15）。サービストップの .svc-item__more（pages/service.css）と同じ見た目 */
.service__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  margin-top: var(--space-3);
  color: var(--color-link);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.service__more::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-top: var(--border-width-thick) solid currentColor;
  border-right: var(--border-width-thick) solid currentColor;
  transform: rotate(45deg);
}

.service__more:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (min-width: 900px) {
  .service__layout {
    /* ★左右 50:50（三嶋指示）。
       右カラムの minmax(24rem, …) は外している。下限が効くと
       左右が等分にならず、右が 24rem を確保するぶん左が痩せるため。 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* ★6.5rem → 4.5rem（1440px で 86px → 58px） */
    gap: clamp(2.5rem, 4vw, 4.5rem);
  }

  .service__sticky {
    position: sticky;
    top: clamp(6.5rem, 12vh, 8.5rem);
    max-height: calc(100vh - 8rem);
  }

  .service__sticky .service-prism {
    max-height: calc(100vh - 12rem);
  }
}

@media (max-width: 899px) {
  .service__layout {
    margin-top: var(--space-8);
  }

  .service__figure {
    position: relative;
    top: auto;
  }

  .service__meter {
    display: none;
  }


  .service__text > p {
    font-size: var(--text-base);
  }

  .service__list {
    gap: var(--space-10);
  }

  /*
    SP には «今どこを読んでいるか» の連動がない（メーターも隠している）ので、
    全項目をアクティブ側の色で出す。薄いままだと読めないだけになる。
  */
  .service__no,
  .service__name,
  .service__title {
    color: var(--color-text-strong);
  }

  .service__body {
    color: var(--color-text);
  }

  .service__item::before {
    width: 100%;
    height: 1px;
  }

  .service__title {
    font-size: var(--text-xl);
  }

  .service__body {
    font-size: var(--text-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-prism__segment,
  .service-prism__icon,
  .service-prism__label,
  .service__meter-track i,
  .service__item,
  .service__item::before {
    transition: none;
  }
}