:root {
  --color-white: #fff;
  --color-txt: #1e2855;
  --color-accent: #1e78eb;
  --color-accent02: #5e9cf8;
  --color-accent03: #2b7ade;
  --color-gray: #aaa;
  --color-gray02: #c8c8c8;
  --color-gray03: #f6f6f6;
  --color-consulting: #5e9cf8;
  --color-bg: #f4f3ef;
  --color-yellow: #e2f174;
  --color-navy: #47505f;
  --color-dark-navy: #1e2855;
  --color-beige: #f4f3ef;
  --color-red: #e15555;
}

/* =======================================================
service
======================================================= */
.l-service {
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  .l-service {
    width: 83.75rem;
  }
}
@media screen and (min-width: 769px) {
  .l-service .l-inner {
    display: grid;
    grid-template-columns: 1fr 62.5rem;
    width: 83.75rem;
    padding: 0 7.5rem 9.375rem 0;
  }
}
@media screen and (max-width: 768px) {
  .l-service .l-inner {
    padding-bottom: 5rem;
  }
}

.p-service__conts-wrapper {
  padding-top: 6.25rem;
}
@media screen and (max-width: 768px) {
  .p-service__conts-wrapper {
    padding-top: 3.75rem;
  }
}
.p-service__overview {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10.3125rem;
  margin-bottom: 8.875rem;
}
@media screen and (max-width: 768px) {
  .p-service__overview {
    grid-template-columns: auto;
    gap: 1.25rem;
    margin-bottom: 3.75rem;
  }
}
.p-service__overview-ttl {
  font-size: 2rem;
  line-height: calc(60/32);
}
@media screen and (max-width: 768px) {
  .p-service__overview-ttl {
    font-size: 1.375rem;
    line-height: calc(38/22);
  }
}
.p-service__overview-txt {
  padding-top: 0.5625rem;
}
@media screen and (max-width: 768px) {
  .p-service__overview-txt {
    padding-top: 0;
  }
}
.p-service__cont {
  display: grid;
  grid-template: "picture picture" "ttl body";
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 768px) {
  .p-service__cont {
    grid-template: "picture" "ttl" "body";
    grid-template-columns: auto;
  }
}
.p-service__cont.--sns, .p-service__cont.--lp {
  margin-bottom: 7.5rem;
}
@media screen and (max-width: 768px) {
  .p-service__cont.--sns, .p-service__cont.--lp {
    margin-bottom: 3.75rem;
  }
}
.p-service__cont.--consulting {
  margin-bottom: 6.625rem;
}
@media screen and (max-width: 768px) {
  .p-service__cont.--consulting {
    margin-bottom: 3.75rem;
  }
}
.p-service__cont-picture {
  grid-area: picture;
  margin-bottom: 2.9375rem;
}
@media screen and (min-width: 769px) {
  .p-service__cont-picture {
    margin-bottom: 2.4375rem; /* Figma 269:7688: 画像(280)直下からタイトルまで39px */
  }
}
@media screen and (max-width: 768px) {
  .p-service__cont-picture {
    margin-bottom: 1.25rem;
  }
}
.p-service__cont-ttl {
  grid-area: ttl;
  align-self: start;
}
@media screen and (max-width: 768px) {
  .p-service__cont-ttl {
    margin-bottom: 0.9375rem;
  }
}
.p-service__cont-body {
  display: grid;
  grid-area: body;
  gap: 1.875rem;
  padding-top: 0.1875rem;
}
@media screen and (max-width: 768px) {
  .p-service__cont-body {
    gap: 0.9375rem;
    padding-top: 0;
  }
}
.p-service__cont-link {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  justify-self: start;
  font-size: 1rem;
  line-height: calc(26/16);
  letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  .p-service__cont-link {
    font-size: 0.875rem;
    line-height: calc(26/14);
    letter-spacing: 0.05em;
  }
}
.p-service__cont-link::after {
  width: 2.5rem;
  height: 2.5rem;
  content: "";
  background: url("../images/common/arrow-circle.svg") top center/contain no-repeat;
}
@media screen and (max-width: 768px) {
  .p-service__cont-link::after {
    width: 2.25rem;
    height: 2.25rem;
  }
}
@media (hover: hover) {
  .p-service__cont-link:hover {
    gap: 1.25rem;
  }
  .p-service__cont-link:hover::after {
    background: url("../images/common/arrow-circle--hover.svg") top center/contain no-repeat;
  }
}
.p-service__cont-card-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
@media screen and (max-width: 768px) {
  .p-service__cont-card-list {
    grid-template-columns: auto;
    gap: 0.9375rem;
    margin-top: 0.9375rem;
  }
}
.p-service__cont-card-link {
  display: block;
  height: 100%;
  padding: 1.375rem 1.3125rem 1.25rem;
  border: 1px solid var(--color-gray02);
  border-radius: 0.9375rem;
}
@media screen and (max-width: 768px) {
  .p-service__cont-card-link {
    display: flex;
    gap: 0.875rem;
    align-items: center;
    padding: 1.3125rem 1.1875rem;
  }
}
@media (hover: hover) {
  .p-service__cont-card-link:hover {
    border-color: var(--color-accent);
  }
  .p-service__cont-card-link:hover .p-service__cont-card-figure::before {
    opacity: 0;
  }
  .p-service__cont-card-link:hover .p-service__cont-card-figure::after {
    opacity: 1;
  }
  .p-service__cont-card-link:hover .p-service__cont-card-deco {
    color: var(--color-accent);
  }
}
.p-service__cont-card-figure {
  position: relative;
  width: 6.875rem;
  padding: 0.3125rem;
  margin: 0 auto 0.5625rem;
}
@media screen and (max-width: 768px) {
  .p-service__cont-card-figure {
    flex: 0 1 auto;
    width: 5.375rem;
    margin-bottom: 0;
  }
}
.p-service__cont-card-figure::before, .p-service__cont-card-figure::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  content: "";
  border-radius: 50%;
  transition: all 0.5s ease;
  transform: translate(-50%, -50%);
}
.p-service__cont-card-figure::before {
  border: 1px solid var(--color-gray);
}
.p-service__cont-card-figure::after {
  border: 2px solid var(--color-accent);
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .p-service__cont-card-body {
    flex: 1;
  }
}
.p-service__cont-card-ttl {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6875rem;
  font-size: 1rem;
  line-height: calc(26/16);
  text-align: center;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  .p-service__cont-card-ttl {
    gap: 0.3125rem;
    justify-content: start;
    margin-bottom: 0.375rem;
    text-align: left;
    letter-spacing: 0.05em;
  }
}
.p-service__cont-card-ttl::after {
  width: 1.125rem;
  height: 1.125rem;
  content: "";
  background: url("../images/common/icon-instagram--navy.svg") top center/contain no-repeat;
}
@media screen and (max-width: 768px) {
  .p-service__cont-card-ttl::after {
    width: 1rem;
    height: 1rem;
  }
}
.p-service__cont-card-txt {
  font-size: 0.75rem;
  line-height: calc(20/12);
  color: var(--color-gray);
  letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  .p-service__cont-card-txt {
    font-size: 0.75rem;
    line-height: calc(18/12);
    letter-spacing: 0.05em;
  }
}

/* =======================================================
p-service__wheel（両輪図・サービス概要）
======================================================= */
.p-service__wheel {
  display: grid;
  gap: 2.5rem;
  justify-items: center;
  margin-bottom: 7.5rem;
}
@media screen and (max-width: 768px) {
  .p-service__wheel {
    gap: 1.875rem;
    margin-bottom: 3.75rem;
  }
}
.p-service__wheel-ttl {
  width: 100%;
  font-size: 2rem;
  line-height: calc(60/32);
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .p-service__wheel-ttl {
    font-size: 1.375rem;
    line-height: calc(38/22);
  }
}
.p-service__wheel-diagram {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.875rem;
  align-items: center;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .p-service__wheel-diagram {
    grid-template-columns: auto;
    justify-items: center;
    gap: 1.25rem;
  }
}
.p-service__wheel-labels {
  display: grid;
  gap: 1.25rem;
}
@media screen and (min-width: 769px) {
  /* Figma 269:7612/7636/7628（左列）: 項目間85pxピッチ＝ギャップ28px。269:7620/7644（右列）: 116pxピッチ＝ギャップ59px */
  .p-service__wheel-labels.--left {
    align-self: start;
    gap: 1.75rem;
    margin-top: 5.875rem;
  }
  .p-service__wheel-labels.--right {
    align-self: start;
    gap: 3.6875rem;
    margin-top: 7.75rem;
  }
}
@media screen and (max-width: 768px) {
  .p-service__wheel-labels {
    grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr));
    gap: 0.75rem;
    width: 100%;
  }
  .p-service__wheel-labels.--left {
    order: 2;
  }
  .p-service__wheel-labels.--right {
    order: 3;
  }
}
.p-service__wheel-label-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-gray02);
}
@media screen and (max-width: 768px) {
  .p-service__wheel-label-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}
.p-service__wheel-labels.--right .p-service__wheel-label-link {
  flex-direction: row-reverse;
  text-align: right;
}
@media screen and (max-width: 768px) {
  .p-service__wheel-labels.--right .p-service__wheel-label-link {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}
.p-service__wheel-label-icon {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
}
@media screen and (max-width: 768px) {
  .p-service__wheel-label-icon {
    width: 2rem;
    height: 2rem;
  }
}
@media screen and (min-width: 769px) {
  /* Figma: ラベルのアイコンは文字横ではなく円グラフ際に浮かせる（269:7675〜269:7681、図基準) */
  .p-service__wheel-label-link {
    gap: 0;
  }
  .p-service__wheel-label-icon {
    position: absolute;
    z-index: 1;
  }
  .p-service__wheel-label-icon.--sns {
    top: 6.6875rem;
    left: 12.5rem;
  }
  .p-service__wheel-label-icon.--lp {
    top: 11.125rem;
    left: 11.5625rem;
  }
  .p-service__wheel-label-icon.--consulting {
    top: 15.8125rem;
    left: 12.375rem;
  }
  .p-service__wheel-label-icon.--inner-branding {
    top: 8.1875rem;
    left: 48.25rem;
  }
  .p-service__wheel-label-icon.--inner-content {
    top: 14.6875rem;
    left: 48.1875rem;
  }
  /* Figma: テキスト開始位置（図基準） SNS/採用マーケ=300, LP=280（li左端270との差） */
  .p-service__wheel-labels.--left .p-service__wheel-label:nth-child(1) .p-service__wheel-label-link {
    padding-left: 1.875rem;
  }
  .p-service__wheel-labels.--left .p-service__wheel-label:nth-child(2) .p-service__wheel-label-link {
    padding-left: 0.625rem;
  }
  .p-service__wheel-labels.--left .p-service__wheel-label:nth-child(3) .p-service__wheel-label-link {
    padding-left: 1.875rem;
  }
  /* 右列は右詰め。テキスト右端 インナーブランディング支援=1262, 社内向けコンテンツ制作=1237 */
  .p-service__wheel-labels.--right .p-service__wheel-label:nth-child(1) .p-service__wheel-label-link {
    padding-right: 0.5rem;
  }
  .p-service__wheel-labels.--right .p-service__wheel-label:nth-child(2) .p-service__wheel-label-link {
    padding-right: 2.0625rem;
  }
}
.p-service__wheel-label-body {
  display: grid;
  gap: 0.25rem;
}
.p-service__wheel-label-txt {
  font-size: 0.6875rem;
  line-height: calc(24/11);
  letter-spacing: 0.1em;
}
.p-service__wheel-label-num {
  font-size: 0.5rem;
  line-height: calc(24/8);
  letter-spacing: 0.1em;
}
.p-service__wheel-circles {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 0 2.5rem;
}
.p-service__wheel-circle {
  position: relative;
  display: grid;
  place-content: center;
  width: 16.25rem;
  height: 16.25rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .p-service__wheel-circle {
    width: 9.375rem;
    height: 9.375rem;
  }
}
.p-service__wheel-circle-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.p-service__wheel-circle-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.375rem;
  justify-items: center;
  padding: 0 0.625rem;
}
@media screen and (max-width: 768px) {
  .p-service__wheel-circle-body {
    gap: 0.1875rem;
    padding: 0 0.25rem;
  }
}
.p-service__wheel-circle.--outer {
  margin-right: -1.25rem;
}
@media screen and (max-width: 768px) {
  .p-service__wheel-circle.--outer {
    margin-right: -0.625rem;
  }
}
.p-service__wheel-circle.--inner {
  margin-left: -1.25rem;
}
@media screen and (max-width: 768px) {
  .p-service__wheel-circle.--inner {
    margin-left: -0.625rem;
  }
}
.p-service__wheel-circle-badge {
  display: inline-flex;
  padding: 0.5rem 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-white);
  letter-spacing: 0.1em;
  border-radius: 1.8125rem;
}
@media screen and (max-width: 768px) {
  .p-service__wheel-circle-badge {
    padding: 0.3125rem 0.5rem;
    font-size: 0.75rem;
  }
}
.p-service__wheel-circle.--outer .p-service__wheel-circle-badge {
  background: #46c1ce;
}
.p-service__wheel-circle.--inner .p-service__wheel-circle-badge {
  background: var(--color-accent);
}
.p-service__wheel-circle-txt {
  max-width: 10.625rem;
  font-size: 0.875rem;
  line-height: calc(22/14);
  letter-spacing: 0.02em;
}
@media screen and (max-width: 768px) {
  .p-service__wheel-circle-txt {
    max-width: 6rem;
    font-size: 0.5625rem;
    line-height: calc(14/9);
  }
}
.p-service__wheel-goal {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: grid;
  gap: 0.375rem;
  justify-items: center;
  transform: translateX(-50%);
}
@media screen and (min-width: 769px) {
  .p-service__wheel-goal {
    bottom: -0.8125rem; /* Figma 269:7672 GOAL バッジ上端872に合わせる */
  }
  .p-service__wheel-goal-txt {
    margin-top: -0.875rem; /* Figma 269:7673「活躍人材を最大化する」上端900に合わせる */
  }
}
.p-service__wheel-goal-badge {
  display: inline-flex;
  padding: 0.3125rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-white);
  letter-spacing: 0.1em;
  background: var(--color-navy);
  border-radius: 5rem;
}
.p-service__wheel-goal-txt {
  font-size: 1.25rem;
  line-height: calc(34/20);
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .p-service__wheel-goal-txt {
    font-size: 0.75rem;
  }
}
.p-service__wheel-illustration {
  width: 34.625rem;
  max-width: 100%;
  height: auto;
}
@media screen and (min-width: 769px) {
  .p-service__wheel-illustration {
    margin-top: -1.5rem; /* Figma 269:7678: 円グラフ直下に詰まる（diagram下端とのギャップ40→16px相当） */
  }
}
.p-service__wheel-lead {
  max-width: 47.5625rem;
  font-size: 1rem;
  line-height: calc(30/16);
  text-align: center;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .p-service__wheel-lead {
    font-size: 0.875rem;
    line-height: calc(26/14);
    text-align: left;
  }
}

/* =======================================================
p-service__group（OUTER / INNER グルーピング）
======================================================= */
.p-service__group-head {
  display: flex;
  gap: 2rem;
  align-items: center;
  padding-bottom: 0.25rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-gray02);
}
@media screen and (max-width: 768px) {
  .p-service__group-head {
    gap: 1.25rem;
    margin-bottom: 1.875rem;
  }
}
@media screen and (min-width: 769px) {
  /* Figma 269:7683: OUTER見出し下80px（5rem）、INNER見出し下60px（3.75rem） */
  .p-service__group.--outer .p-service__group-head {
    margin-bottom: 5rem;
  }
  .p-service__group.--inner .p-service__group-head {
    margin-bottom: 3.75rem;
  }
}
.p-service__group-head-en {
  font-size: 3.125rem;
  font-weight: 200;
  line-height: calc(70/50);
  letter-spacing: 0.02em;
}
@media screen and (max-width: 768px) {
  .p-service__group-head-en {
    font-size: 1.75rem;
  }
}
.p-service__group-head-ja {
  font-size: 1.25rem;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
  .p-service__group-head-ja {
    font-size: 1rem;
  }
}
.p-service__group {
  margin-bottom: 7.5rem;
}
@media screen and (max-width: 768px) {
  .p-service__group {
    margin-bottom: 3.75rem;
  }
}
.p-service__group-list {
  display: grid;
  gap: 7.5rem;
}
@media screen and (max-width: 768px) {
  .p-service__group-list {
    gap: 3.75rem;
  }
}
@media screen and (min-width: 769px) {
  /* Figma 269:7683: OUTERカードは543pxピッチ（カード高460px→ギャップ83px）、INNERカードは540pxピッチ（カード高430px→ギャップ110px） */
  .p-service__group.--outer .p-service__group-list {
    gap: 6.3125rem;
  }
  /* Figma 269:7688: OUTERカードは本文2行のぶん見出し〜リンクの間が狭い（20px） */
  .p-service__group.--outer .p-service__cont-body {
    gap: 1.25rem;
  }
  .p-service__group.--inner .p-service__group-list {
    gap: 6.125rem;
  }
  /* Figma 269:7741: INNERカードは本文1行のぶん見出し〜リンクの間が広い（50px） */
  .p-service__group.--inner .p-service__cont-body {
    gap: 3.125rem;
  }
}
.p-service__group-list .p-service__cont {
  margin-bottom: 0;
}
/* SPの両輪図（10/10谷「SPは見にくいなら省いてよい・任せる」→本体判断）
   円の図（外と内の両輪→活躍人材）は1画面で伝わるので残す。円の下のサービス5項目は、すぐ下のOUTER/INNER別カードと重複し、
   2列に並べると「どちらの輪のサービスか」の対応も消えるので、SPでは出さない。円の中の小さい文字は読める大きさに上げる */
@media screen and (max-width: 768px) {
  .p-service__wheel-labels { display: none; }
  .p-service__wheel-circle-txt { font-size: 0.75rem; line-height: 1.6; }
}

/* Figma 269:7610/269:7682：概要のタイトルx280、本文x400。両輪図のラベル位置は独立して維持。 */
@media screen and (min-width: 769px) {
  .p-service__wheel-ttl { padding-left: 0.625rem; }
  .p-service__wheel-lead { justify-self: start; margin-left: 8.125rem; }
  /* Figma 269:7687：OUTERラベルの日本語はx456。 */
  .p-service__group.--outer .p-service__group-head { gap: 1.375rem; }
  /* Figma 269:7592/7593：240幅・本文198幅・258高。1px枠を含めて内側余白を取る。 */
  .p-service__cont-card-link { padding: calc(1.375rem - 1px) calc(1.3125rem - 1px) calc(1.25rem - 1px); }
}

/* =======================================================
   両輪図（PC）をFigma 269:7608 の座標で組み直す（10/10谷「ずれてる・リンクと分かりにくい」）
   図は 1000×397。円は左250・右472（各260）、両側に淡い弧、ラベルは文字＋下矢印＋下線（リンクと分かる形）、
   アイコンは弧の上に別置き、GOALは円の下端にかかり、その下に「活躍人材を最大化する」
   ======================================================= */
@media screen and (min-width: 769px) {
  .p-service__wheel .p-service__wheel-diagram { position: relative; display: block; width: 62.5rem; height: 24.8125rem; margin: 3.75rem 0 0; padding: 0; }
  .p-service__wheel .p-service__wheel-labels { position: static; display: block; width: auto; margin: 0; padding: 0; gap: 0; }
  .p-service__wheel .p-service__wheel-label { position: static; margin: 0; padding: 0; border: 0; }
  .p-service__wheel .p-service__wheel-label-link { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; width: auto; padding: 0; margin: 0; border: 0; text-align: left; }
  .p-service__wheel .p-service__wheel-label-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 0; margin: 0; text-align: left; }
  .p-service__wheel .p-service__wheel-label-txt { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 0 0.25rem; border-bottom: 1px solid #1e2855; font-size: 0.6875rem; line-height: 1.5rem; letter-spacing: 0.1em; white-space: nowrap; color: #1e2855; }
  .p-service__wheel .p-service__wheel-label-txt br { display: none; }
  .p-service__wheel .p-service__wheel-label-txt::after { content: ""; flex: none; width: 0.6875rem; height: 0.625rem; background: url("../images/service/overview/arrow-chevron.svg") center / contain no-repeat; transform: rotate(-90deg); transition: transform .25s ease; }
  .p-service__wheel .p-service__wheel-label-num { font-size: 0.5rem; line-height: 1.5rem; letter-spacing: 0.1em; padding: 0; margin: 0; text-align: left; }
  /* ラベルの位置（Figma 269:7612 ほか） */
  .p-service__wheel .--left .p-service__wheel-label:nth-child(1) .p-service__wheel-label-link { left: 1.25rem; top: 4.625rem; }
  .p-service__wheel .--left .p-service__wheel-label:nth-child(2) .p-service__wheel-label-link { left: 0; top: 9.9375rem; }
  .p-service__wheel .--left .p-service__wheel-label:nth-child(3) .p-service__wheel-label-link { left: 1.25rem; top: 15.25rem; }
  .p-service__wheel .--right .p-service__wheel-label:nth-child(1) .p-service__wheel-label-link { left: 51.6875rem; top: 6.5rem; }
  .p-service__wheel .--right .p-service__wheel-label:nth-child(2) .p-service__wheel-label-link { left: 51.5625rem; top: 13.75rem; }
  /* アイコンは弧の上（ラベルからの相対位置。Figma 269:7675〜7681） */
  .p-service__wheel .p-service__wheel-label-icon { position: absolute; width: 2.5rem; height: 2.5rem; margin: 0; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
  .p-service__wheel .--left .p-service__wheel-label:nth-child(1) .p-service__wheel-label-icon { left: 10.625rem; top: 0.8125rem; }
  .p-service__wheel .--left .p-service__wheel-label:nth-child(2) .p-service__wheel-label-icon { left: 10.9375rem; top: -0.0625rem; }
  .p-service__wheel .--left .p-service__wheel-label:nth-child(3) .p-service__wheel-label-icon { left: 10.5rem; top: -0.6875rem; }
  .p-service__wheel .--right .p-service__wheel-label:nth-child(1) .p-service__wheel-label-icon { left: -4.0625rem; top: 0.4375rem; }
  .p-service__wheel .--right .p-service__wheel-label:nth-child(2) .p-service__wheel-label-icon { left: -4rem; top: -0.3125rem; }
  @media (hover: hover) {
    .p-service__wheel .p-service__wheel-label-link:hover { opacity: 1; }
    .p-service__wheel .p-service__wheel-label-link:hover .p-service__wheel-label-txt { color: #1e78eb; border-color: #1e78eb; }
    .p-service__wheel .p-service__wheel-label-link:hover .p-service__wheel-label-txt::after { transform: rotate(-90deg) translateX(-0.1875rem); }
    .p-service__wheel .p-service__wheel-label-link:hover .p-service__wheel-label-icon { transform: scale(1.08); }
  }
  /* 円・弧・GOAL */
  .p-service__wheel .p-service__wheel-circles { position: absolute; left: 15.6419rem; top: 0; width: 30.125rem; height: 19.2rem; margin: 0; display: block; }
  .p-service__wheel .p-service__wheel-circles::before,
  .p-service__wheel .p-service__wheel-circles::after { content: ""; position: absolute; top: -1.1rem; width: 6.5409rem; height: 20.5156rem; background: center / contain no-repeat; pointer-events: none; }
  .p-service__wheel .p-service__wheel-circles::before { left: -4.9994rem; background-image: url("../images/service/overview/connector-left.svg"); }
  .p-service__wheel .p-service__wheel-circles::after { left: 28.5831rem; background-image: url("../images/service/overview/connector-right.svg"); }
  .p-service__wheel .p-service__wheel-circle { position: absolute; top: 0; width: 16.25rem; height: 16.25rem; margin: 0; }
  .p-service__wheel .p-service__wheel-circle.--outer { left: 0; }
  .p-service__wheel .p-service__wheel-circle.--inner { left: 13.875rem; }
  .p-service__wheel .p-service__wheel-circle > img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .p-service__wheel .p-service__wheel-circle-body { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; transform: none; }
  .p-service__wheel .--outer .p-service__wheel-circle-body { left: 0.3419rem; top: 5.0625rem; width: 15.2785rem; }
  .p-service__wheel .--inner .p-service__wheel-circle-body { left: 2.8125rem; top: 5.1875rem; width: 11.3125rem; }
  .p-service__wheel .p-service__wheel-circle-txt { font-size: 1rem; line-height: 1.5rem; letter-spacing: 0.05em; text-align: center; white-space: nowrap; }
  .p-service__wheel .p-service__wheel-goal { position: absolute; left: 7.8706rem; top: 15.75rem; width: 14.6584rem; display: flex; flex-direction: column; align-items: center; margin: 0; transform: none; }
  .p-service__wheel .p-service__wheel-goal-badge { display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 1.625rem; margin-bottom: -0.3125rem; padding: 0; border-radius: 5rem; font-size: 0.75rem; line-height: 1; letter-spacing: 0.1em; }
  .p-service__wheel .p-service__wheel-goal-txt { position: relative; z-index: 1; margin: 0; font-size: 1.25rem; line-height: 2.125rem; letter-spacing: 0.04em; white-space: nowrap; }
  .p-service__wheel .p-service__wheel-goal-badge { position: relative; z-index: 2; }
  .p-service__wheel .p-service__wheel-illustration { display: block; width: 34.625rem; height: auto; margin: -5.375rem 0 0 11.8125rem; position: relative; }
}

@media screen and (min-width: 769px) {
  /* 旧指定（ラベルごとの左余白）を打ち消す */
  .p-service__wheel .p-service__wheel-diagram .p-service__wheel-labels .p-service__wheel-label .p-service__wheel-label-link { padding: 0; margin: 0; }
  .p-service__wheel .p-service__wheel-ttl { margin-bottom: 0; }
}
@media screen and (min-width: 769px) {
  /* 親が縦並び＋間隔40のため、その分を差し引く（見出しの下60・線画は図の上から311） */
  .p-service__wheel .p-service__wheel-diagram { margin-top: 1.25rem; align-self: flex-start; }
  .p-service__wheel .p-service__wheel-illustration { margin: -7.875rem 0 0 11.8125rem; align-self: flex-start; }
}
@media screen and (min-width: 769px) {
  .p-service__wheel .p-service__wheel-diagram,
  .p-service__wheel .p-service__wheel-illustration { justify-self: start; }
}
@media screen and (min-width: 769px) {
  .p-service__wheel .p-service__wheel-illustration { margin-bottom: -2.5rem; } /* 図の下40で本文（Figma 269:7682） */
}

/* 10/10谷FB（サービス一覧PC）
   ・両輪図を最初の画面（1440×900）に収める：本文の上の余白100→60、見出しと図の間60→40
   ・左のラベルは右端をアイコンの20左にそろえる（文字の長さが違っても、アイコンとの間が一定になる）。右のラベルはアイコンの20右から
   ・線画を少し上げ、「活躍人材を最大化する」との間を詰める */
@media screen and (min-width: 769px) {
  .l-service .p-service__conts-wrapper:has(> .p-service__wheel) { padding-top: 3.75rem; }
  .p-service__wheel .p-service__wheel-diagram { margin-top: 0; }
  .p-service__wheel .p-service__wheel-diagram .--left .p-service__wheel-label .p-service__wheel-label-link { left: auto; align-items: flex-end; }
  .p-service__wheel .p-service__wheel-diagram .--left .p-service__wheel-label-body { align-items: flex-end; }
  .p-service__wheel .p-service__wheel-diagram .--left .p-service__wheel-label:nth-child(1) .p-service__wheel-label-link { right: 51.875rem; }
  .p-service__wheel .p-service__wheel-diagram .--left .p-service__wheel-label:nth-child(2) .p-service__wheel-label-link { right: 52.8125rem; }
  .p-service__wheel .p-service__wheel-diagram .--left .p-service__wheel-label:nth-child(3) .p-service__wheel-label-link { right: 52rem; }
  /* アイコンはラベルの右端から20右（左の列） */
  .p-service__wheel .p-service__wheel-diagram .--left .p-service__wheel-label .p-service__wheel-label-icon { left: auto; right: -3.75rem; }
  .p-service__wheel .p-service__wheel-diagram .--left .p-service__wheel-label:nth-child(1) .p-service__wheel-label-icon { top: 0.8125rem; }
  .p-service__wheel .p-service__wheel-diagram .--left .p-service__wheel-label:nth-child(2) .p-service__wheel-label-icon { top: -0.0625rem; }
  .p-service__wheel .p-service__wheel-diagram .--left .p-service__wheel-label:nth-child(3) .p-service__wheel-label-icon { top: -0.6875rem; }
  .p-service__wheel .p-service__wheel-diagram .--right .p-service__wheel-label:nth-child(1) .p-service__wheel-label-link { left: 51.375rem; }
  .p-service__wheel .p-service__wheel-diagram .--right .p-service__wheel-label:nth-child(2) .p-service__wheel-label-link { left: 51.3125rem; }
  .p-service__wheel .p-service__wheel-diagram .--right .p-service__wheel-label .p-service__wheel-label-icon { left: -3.75rem; }
  .p-service__wheel .p-service__wheel-illustration { margin-top: -8.625rem; }
}
@media screen and (min-width: 769px) {
  /* 両輪図の区間は目次を隠すので、図を画面の中央に寄せる（本文の列の中心770→画面の中心720） */
  .p-service__wheel { position: relative; left: -3.125rem; }
}
/* 両輪図の下の文：PCは「手がけています。」で改行して2行に収める（10/11谷） */
@media screen and (min-width: 769px) {
  .p-service__wheel-lead { width: auto; max-width: none; font-size: 0.9375rem; letter-spacing: 0.03em; white-space: nowrap; text-align: center; justify-self: center; }
}
@media screen and (min-width: 769px) {
  /* 両輪図の下の文：はみ出していた（1行で1000pxを超え右へずれていた）→ 本文の列いっぱいで中央、線画の下40に詰める */
  .p-service__wheel .p-service__wheel-lead { white-space: normal; width: 100%; max-width: 62.5rem; justify-self: stretch; margin: -3.5625rem 0 0; letter-spacing: 0.02em; text-align: center; }
}
/* 10/11谷「FVに文章を入れるか入れないか、はっきり」→ 入れる。1440×900の最初の画面に、見出し・図・下の文まで全部収める */
@media screen and (min-width: 769px) {
  .l-service .p-service__conts-wrapper:has(> .p-service__wheel) { padding-top: 2.25rem; }
  .p-service__wheel { row-gap: 1.5rem; }
  .p-service__wheel .p-service__wheel-ttl { font-size: 1.875rem; line-height: 3rem; }
  .p-service__wheel .p-service__wheel-lead { margin-top: -3.5rem; line-height: 1.75; }
}
/* 窮屈さの調整（10/11谷）：見出しと図の間24→40、線画と文の間25→36。下に余った分を上下の間へ回す */
@media screen and (min-width: 769px) {
  .p-service__wheel { row-gap: 2.5rem; }
  .p-service__wheel .p-service__wheel-lead { margin-top: -4.8125rem; }
}
@media screen and (min-width: 769px) {
  .l-service .p-service__conts-wrapper:has(> .p-service__wheel) { padding-top: 2rem; }
  .p-service__wheel { row-gap: 2rem; }
  .p-service__wheel .p-service__wheel-ttl { line-height: 2.5rem; }
  .p-service__wheel .p-service__wheel-lead { margin-top: -3.5625rem; }
}
@media screen and (min-width: 769px) {
  /* 見出しの上が窮屈（10/11谷）：見出しの上32→56。その分、見出しと図の間を32→24、図の円の上の余白を詰めて1画面に収める */
  .l-service .p-service__conts-wrapper:has(> .p-service__wheel) { padding-top: 3.5rem; }
  .p-service__wheel { row-gap: 1.5rem; }
}

/* =======================================================
   両輪図の動き（10/11谷「いい感じにモーション」）
   入場：①2つの円が左右から寄ってきて重なる → ②外側の弧とアイコンが順に現れる → ③ラベルが続く
        → ④GOALがポンと出て「活躍人材を最大化する」→ ⑤線画が左から右へ描かれる → ⑥下の文
   常時：2つの円がゆっくり近づいたり離れたりして「両輪で回っている」ことを示す（8秒周期・6px）
   ======================================================= */
@media screen and (min-width: 769px) {
  .js-wheel .p-service__wheel .p-service__wheel-circle,
  .js-wheel .p-service__wheel .p-service__wheel-circles::before,
  .js-wheel .p-service__wheel .p-service__wheel-circles::after,
  .js-wheel .p-service__wheel .p-service__wheel-label-link,
  .js-wheel .p-service__wheel .p-service__wheel-goal,
  .js-wheel .p-service__wheel .p-service__wheel-illustration,
  .js-wheel .p-service__wheel .p-service__wheel-lead {
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1), translate .9s cubic-bezier(.16, 1, .3, 1), scale .6s cubic-bezier(.34, 1.56, .64, 1), clip-path 1.1s cubic-bezier(.65, 0, .35, 1);
  }
  .js-wheel .p-service__wheel:not(.is-wheel-in) .p-service__wheel-circle { opacity: 0; }
  .js-wheel .p-service__wheel:not(.is-wheel-in) .p-service__wheel-circle.--outer { translate: -5rem 0; }
  .js-wheel .p-service__wheel:not(.is-wheel-in) .p-service__wheel-circle.--inner { translate: 5rem 0; }
  .js-wheel .p-service__wheel:not(.is-wheel-in) .p-service__wheel-circles::before { opacity: 0; translate: 1.5rem 0; }
  .js-wheel .p-service__wheel:not(.is-wheel-in) .p-service__wheel-circles::after { opacity: 0; translate: -1.5rem 0; }
  .js-wheel .p-service__wheel .p-service__wheel-circles::before,
  .js-wheel .p-service__wheel .p-service__wheel-circles::after { transition-delay: .45s; }
  .js-wheel .p-service__wheel:not(.is-wheel-in) .p-service__wheel-label-link { opacity: 0; translate: 0 .75rem; }
  .js-wheel .p-service__wheel .--left .p-service__wheel-label:nth-child(1) .p-service__wheel-label-link,
  .js-wheel .p-service__wheel .--right .p-service__wheel-label:nth-child(1) .p-service__wheel-label-link { transition-delay: .65s; }
  .js-wheel .p-service__wheel .--left .p-service__wheel-label:nth-child(2) .p-service__wheel-label-link,
  .js-wheel .p-service__wheel .--right .p-service__wheel-label:nth-child(2) .p-service__wheel-label-link { transition-delay: .75s; }
  .js-wheel .p-service__wheel .--left .p-service__wheel-label:nth-child(3) .p-service__wheel-label-link { transition-delay: .85s; }
  .js-wheel .p-service__wheel:not(.is-wheel-in) .p-service__wheel-goal { opacity: 0; scale: .85; }
  .js-wheel .p-service__wheel .p-service__wheel-goal { transition-delay: 1s; }
  .js-wheel .p-service__wheel:not(.is-wheel-in) .p-service__wheel-illustration { clip-path: inset(0 100% 0 0); }
  .js-wheel .p-service__wheel .p-service__wheel-illustration { clip-path: inset(0 0 0 0); transition-delay: 1.15s; }
  .js-wheel .p-service__wheel:not(.is-wheel-in) .p-service__wheel-lead { opacity: 0; translate: 0 .75rem; }
  .js-wheel .p-service__wheel .p-service__wheel-lead { transition-delay: 1.5s; }

  /* 常時：両輪がゆっくり寄ったり離れたり（入場が終わってから） */
  @keyframes wheel-breathe-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-0.375rem); } }
  @keyframes wheel-breathe-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(0.375rem); } }
  .p-service__wheel.is-wheel-in .p-service__wheel-circle.--outer { animation: wheel-breathe-l 8s ease-in-out 2s infinite; }
  .p-service__wheel.is-wheel-in .p-service__wheel-circle.--inner { animation: wheel-breathe-r 8s ease-in-out 2s infinite; }
  /* アイコンにホバー以外でも、ときどき小さく弾む（左右・上下で順番にずらす） */
  @keyframes wheel-icon-pop { 0%, 86%, 100% { transform: scale(1); } 92% { transform: scale(1.12); } }
  .p-service__wheel.is-wheel-in .p-service__wheel-label-icon { animation: wheel-icon-pop 7s ease-in-out infinite; }
  .p-service__wheel.is-wheel-in .--left .p-service__wheel-label:nth-child(2) .p-service__wheel-label-icon { animation-delay: 1.4s; }
  .p-service__wheel.is-wheel-in .--left .p-service__wheel-label:nth-child(3) .p-service__wheel-label-icon { animation-delay: 2.8s; }
  .p-service__wheel.is-wheel-in .--right .p-service__wheel-label:nth-child(1) .p-service__wheel-label-icon { animation-delay: 4.2s; }
  .p-service__wheel.is-wheel-in .--right .p-service__wheel-label:nth-child(2) .p-service__wheel-label-icon { animation-delay: 5.6s; }
}
@media (prefers-reduced-motion: reduce) {
  .js-wheel .p-service__wheel * , .js-wheel .p-service__wheel *::before, .js-wheel .p-service__wheel *::after { transition: none !important; animation: none !important; opacity: 1 !important; translate: none !important; scale: none !important; clip-path: none !important; }
}
/* 動きを控えめに（10/11谷「うるさいかも」）：常時の動き（円の寄り離れ・アイコンの弾み）をやめ、入場は移動幅を小さく・短く */
@media screen and (min-width: 769px) {
  .p-service__wheel.is-wheel-in .p-service__wheel-circle,
  .p-service__wheel.is-wheel-in .p-service__wheel-label-icon { animation: none !important; }
  .js-wheel .p-service__wheel:not(.is-wheel-in) .p-service__wheel-circle.--outer { translate: -1.5rem 0; }
  .js-wheel .p-service__wheel:not(.is-wheel-in) .p-service__wheel-circle.--inner { translate: 1.5rem 0; }
  .js-wheel .p-service__wheel:not(.is-wheel-in) .p-service__wheel-circles::before,
  .js-wheel .p-service__wheel:not(.is-wheel-in) .p-service__wheel-circles::after,
  .js-wheel .p-service__wheel:not(.is-wheel-in) .p-service__wheel-label-link,
  .js-wheel .p-service__wheel:not(.is-wheel-in) .p-service__wheel-lead { translate: none; }
  .js-wheel .p-service__wheel:not(.is-wheel-in) .p-service__wheel-goal { scale: 1; }
  .js-wheel .p-service__wheel .p-service__wheel-circles::before,
  .js-wheel .p-service__wheel .p-service__wheel-circles::after,
  .js-wheel .p-service__wheel .p-service__wheel-label-link { transition-delay: .3s !important; }
  .js-wheel .p-service__wheel .p-service__wheel-goal { transition-delay: .45s; }
  .js-wheel .p-service__wheel .p-service__wheel-illustration { transition-delay: .5s; transition-duration: .8s; }
  .js-wheel .p-service__wheel .p-service__wheel-lead { transition-delay: .7s; }
}
/* GOALと「活躍人材を最大化する」を少し下げ、線画に近づける（10/11谷） */
@media screen and (min-width: 769px) {
  .p-service__wheel .p-service__wheel-goal { top: 17rem; }
}
/* GOALのバッジが縦に潰れていた（親の縦並びで縮んでいた）→ 高さ26で固定 */
@media screen and (min-width: 769px) {
  .p-service__wheel .p-service__wheel-goal-badge { flex-shrink: 0; height: 1.625rem; min-height: 1.625rem; }
}

/* 10/13谷「ずれてる」：本文の1行目を、左の見出しの文字の高さの中央にそろえる（見出し32px・本文14pxで、上端そろえだと本文が浮いて見えた） */
@media screen and (min-width: 769px) {
  .p-service__cont-body { padding-top: 0.5rem; }
}

/* 10/13谷「余白変」：INNERカードも本文〜「詳細はこちら」の間をOUTERと同じ20にそろえる */
@media screen and (min-width: 769px) {
  .p-service__group.--inner .p-service__cont-body { gap: 1.25rem; }
}

/* 10/14谷「スキマ気になるので、goalを下げましょう」（SP）：GOALを24下げ、線画を36上げて、文字を建物と人物の間に置く */
@media screen and (max-width: 768px) {
  .p-service__wheel .p-service__wheel-goal { translate: 0 1.5rem; }
  .p-service__wheel .p-service__wheel-illustration { margin-top: -2.25rem; }
}

/* 10/14谷「全体的に窮屈・OUTERの文字が少し見えるのが気になる」（PC）：両輪図の上下と、見出しと図の間にゆとりを足す */
@media screen and (min-width: 769px) {
  .p-service__wheel { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .p-service__wheel .p-service__wheel-ttl { margin-bottom: 1rem; }
}

/* 10/21谷FB（サービス一覧PC）
   ・FVと見出しの間が空きすぎ、最初の画面（1440×900）で下の文が切れて中途半端 → FVの下から見出しまで96→48。見出し・図・下の文まで最初の画面に収める
   ・弧の向きが逆：Figma 269:7653／269:7674 は左右反転して置かれているが、書き出したSVG（connector-left/right）に反転が入っていなかった → CSSで左右反転（位置はそのままでFigmaと一致）
   ・アイコンが弧の下に見える：アイコンのSVGが半透明（塗り0.5〜0.8・端は透明）で弧が透けていた → アイコンの下に白い円を敷く */
@media screen and (min-width: 769px) {
  .l-service .p-service__conts-wrapper:has(> .p-service__wheel) { padding-top: 0.5rem; }
  .p-service__wheel .p-service__wheel-circles::before,
  .p-service__wheel .p-service__wheel-circles::after { transform: scaleX(-1); }
  .p-service__wheel .p-service__wheel-label-icon { background: #fff; border-radius: 50%; }
}

/* 10/21谷FB2（サービス一覧PC）
   ・右の弧まで反転していた：connector-left/right のSVGはどちらも「）」の形。左だけ反転すれば「（ ）」で両方の円を囲む → 右の反転を戻す
   ・左の3つ目のラベル（採用コンサルティング・採用マーケティング支援）は長いので、図の中だけ2行に折り返す（矢印と下線は2行目まで） */
@media screen and (min-width: 769px) {
  .p-service__wheel .p-service__wheel-circles::after { transform: none; }
  .p-service__wheel .--left .p-service__wheel-label:nth-child(3) .p-service__wheel-label-txt { display: inline-block; text-align: right; }
  .p-service__wheel .--left .p-service__wheel-label:nth-child(3) .p-service__wheel-label-txt br { display: inline; }
  .p-service__wheel .--left .p-service__wheel-label:nth-child(3) .p-service__wheel-label-txt::after { display: inline-block; margin-left: 0.5rem; vertical-align: -0.0625rem; }
}

/* 10/21谷FB3（サービス一覧PC）：アイコンが弧の帯の中心からずれていた（反転前の弧に合わせた位置のまま。ずれ 左+12/−4/−19・右−5/+16px）
   → 弧のSVGの中心線から各アイコンの高さでの帯の中心を計算し、ラベルごと横に動かしてアイコンを帯の中心に乗せる（ラベルとアイコンの間隔20は保つ） */
@media screen and (min-width: 769px) {
  .p-service__wheel .p-service__wheel-diagram .--left .p-service__wheel-label:nth-child(1) .p-service__wheel-label-link { right: 52.625rem; }
  .p-service__wheel .p-service__wheel-diagram .--left .p-service__wheel-label:nth-child(2) .p-service__wheel-label-link { right: 52.5625rem; }
  .p-service__wheel .p-service__wheel-diagram .--left .p-service__wheel-label:nth-child(3) .p-service__wheel-label-link { right: 50.8125rem; }
  .p-service__wheel .p-service__wheel-diagram .--right .p-service__wheel-label:nth-child(1) .p-service__wheel-label-link { left: 51.6875rem; }
  .p-service__wheel .p-service__wheel-diagram .--right .p-service__wheel-label:nth-child(2) .p-service__wheel-label-link { left: 50.3125rem; }
}

/* 10/21谷FB4（サービス一覧）
   ・PC：左右のラベルとアイコンのまとまりが下に寄っていた → 弧の上下の真ん中（図の上から147）にまとまりの中心をそろえる。左はアイコンの中心を75・147・219、右は97・197。横位置は弧の帯の中心に合わせ直す
   ・SP：GOALのバッジが大きく（高さ37）、「活躍人材を最大化する」が小さい（12.5px）→ バッジ24・文14px。文はビルの線画に重ならないよう右へ12ずらす（バッジは円の合わせ目のまま） */
@media screen and (min-width: 769px) {
  .p-service__wheel .p-service__wheel-diagram .--left .p-service__wheel-label:nth-child(1) .p-service__wheel-label-link { top: 2.625rem; right: 52.0625rem; }
  .p-service__wheel .p-service__wheel-diagram .--left .p-service__wheel-label:nth-child(2) .p-service__wheel-label-link { top: 8rem; right: 52.8125rem; }
  .p-service__wheel .p-service__wheel-diagram .--left .p-service__wheel-label:nth-child(3) .p-service__wheel-label-link { top: 13.125rem; right: 51.8125rem; }
  .p-service__wheel .p-service__wheel-diagram .--right .p-service__wheel-label:nth-child(1) .p-service__wheel-label-link { top: 4.375rem; left: 51.375rem; }
  .p-service__wheel .p-service__wheel-diagram .--right .p-service__wheel-label:nth-child(2) .p-service__wheel-label-link { top: 11.375rem; left: 51.1875rem; }
}
@media screen and (max-width: 768px) {
  .p-service__wheel .p-service__wheel-goal-badge { display: flex; align-items: center; justify-content: center; height: 1.5rem; padding: 0 0.75rem; line-height: 1; font-size: 0.6875rem; }
  .p-service__wheel .p-service__wheel-goal-txt { font-size: 0.875rem; letter-spacing: 0.02em; translate: 0.75rem 0; }
}