#index.root .main {
  overflow-x: clip;
}

/* TOPだけ共通ヘッダーの白背景を消す。
共通CSSの .c-site-header は background-color: var(--color-white) のままで、
body の #index.root から始まるページスコープのセレクターで打ち消す */
#index.root .c-site-header {
  background-color: transparent;
}

#index.root .section-heading {
  padding-left: 1.1rem;
}

/* 青ベタ高さ 104px・文字サイズ 56px・padding-left 0.4rem。
高さは ☆マーク（font-size 0.6rem）の行ボックスが文字（0.56rem）より高いので、
padding-block 0.22rem ×2 ＋ 0.6rem = 1.04rem。
     RECRUIT の見出しは .recruit__body .section-heading__title で別途上書きしているので影響しない */
#index.root .section-heading__title {
  --beveled-cut: 0.03rem;
  width: 4.27rem;
  padding-block: 0.22rem;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.56rem;
  line-height: 1;
  font-family: var(--font-family-brand);
  color: var(--color-white);
  white-space: nowrap;
  padding-left: 0.4rem;
  clip-path: polygon(var(--beveled-cut) 0,
      calc(100% - var(--beveled-cut)) 0,
      100% var(--beveled-cut),
      100% calc(100% - var(--beveled-cut)),
      calc(100% - var(--beveled-cut)) 100%,
      var(--beveled-cut) 100%,
      0 calc(100% - var(--beveled-cut)),
      0 var(--beveled-cut));
}

#index.root .section-heading__icon--service {
  font-size: 0.6rem; /* 画像のときの字面 0.42rem ÷ 0.7 */
  margin-right: 0.14rem; /* L150（旧 calc(0.3rem - 0.14em)） */
}

#index.root .section-heading__icon--news {
  font-size: 0.5rem; /* 画像のときの字面 0.35rem ÷ 0.7 */
  margin-right: 0.14rem; /* L150（旧 calc(0.2rem - 0.14em)） */
}

#index.root .section-heading__subtitle {
  --beveled-cut: 0.03rem;
  background: var(--color-primary);
  font-family: var(--font-family-base);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 0.25rem;
  padding-inline: 0.38rem;
  width: fit-content;
  font-size: 0.21rem;
  line-height: 1;
  margin-top: 0.27rem;
  clip-path: polygon(var(--beveled-cut) 0,
      calc(100% - var(--beveled-cut)) 0,
      100% var(--beveled-cut),
      100% calc(100% - var(--beveled-cut)),
      calc(100% - var(--beveled-cut)) 100%,
      var(--beveled-cut) 100%,
      0 calc(100% - var(--beveled-cut)),
      0 var(--beveled-cut));
}

#index.root .section-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.38rem;
  max-width: 3.3rem;
  width: 100%;
  margin-left: auto;
  justify-content: flex-end;
  text-decoration: none;
}

#index.root .section-link__label {
  color: var(--color-primary);
  font-size: 0.19rem;
  line-height: 0.22rem;
  text-decoration: none;
  letter-spacing: 0.025em;
}

#index.root .section-link__arrow {
  width: 0.2rem;
  height: 0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#index.root .section-link__arrow img {
  display: block;
  width: 100%;
  height: 100%;
}

#index.root .section-link::after {
  content: "";
  position: absolute;
  pointer-events: none;
  right: 0;
  width: 97%;
  height: 0.03rem;
  background: var(--color-primary);
  top: calc(100% + 0.3rem);
}

#index.root .hero {
  padding-top: 2.21rem;
  overflow-x: clip;
}

#index.root .hero__intro {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  position: relative;
}

/* 「LIGHT WHAT MATTERS.」。旧 logo-hero.svg（870×104、面取り4.47px、文字のキャップハイト42.63px、
左端53.92px）をテキストで再現。SPIK 書体はキャップハイトが 0.7em なので 42.63 / 0.7 ≒ 0.61rem。
行送り1のとき大文字の上端は行ボックスの 0.25em 下（ascent 1.05 / descent 0.15）に来るため、
top はキャップ上端 31.57px − 0.25 × 61px ≒ 0.16rem */
#index.root .hero__logo {
  --beveled-cut: 0.045rem;
  position: relative;
  display: block;
  width: 8.7rem;
  height: 1.04rem;
  align-self: flex-end;
  background: var(--color-primary);
  color: var(--color-white);
}

#index.root .hero__logo-text {
  position: absolute;
  top: 0.16rem;
  left: 0.46rem;
  font-family: var(--font-family-brand);
  font-size: 0.61rem;
  line-height: 1;
  letter-spacing: 0; /* SPIKVANSTAR（TEST_V13）は字間がフォントに含まれるため 0 */
  white-space: nowrap;
}

#index.root .hero__tagline {
  --beveled-cut: 0.03rem;
  background-color: var(--color-primary);
  color: var(--color-white);
  width: auto;
  white-space: nowrap;
  padding-left: 0.38rem;
  padding-right: 0.2rem;
  height: 0.64rem;
  font-size: 0.18rem;
  line-height: 1;
  letter-spacing: 0.08em;
  justify-content: center;
  align-items: center;
  display: flex;
  align-self: flex-end;
}

#index.root .hero__copyright {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.1rem;
  line-height: 0.21rem;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  position: absolute;
  right: -0.05rem;
  bottom: -0.02rem;
}

#index.root .animation {
  --dynamic-margin: 0;
  width: 100%;
  position: relative;
  margin: 0.3rem auto var(--dynamic-margin) auto;
  margin-top: 0.3rem;
  height: 8.64rem;
  z-index: -1;
  max-width: 13rem;
}

#index.root .animation__inner {
  width: 100%;
  height: 100%;
  background-color: var(--color-surface-blue);
  overflow: hidden;
  position: relative;
}

#index.root .animation__track {
  width: 100%;
  height: 100%;
  background-image: url(../../images/index/photo-hero-main.webp);
  background-repeat: repeat-x;
  background-size: var(--img-width, 100%) 100%;
  background-position: var(--bg-x, 0) center;
  transform: scale(var(--current-scale, 1));
  will-change: background-position, transform;
}

#index.root .animation__mask {
  position: absolute;
  bottom: -0.01rem;
  left: 0;
  width: 100%;
  height: calc(100% + 0.01rem);
  z-index: 1;
  pointer-events: none;
  background-color: var(--color-white);
}

#index.root .animation__mask.--top,
#index.root .animation__mask.--bottom {
  z-index: 2;
}

#index.root .animation__mask.--top {
  bottom: auto;
  top: 0;
  display: none;
}

#index.root .hero__body {
  margin-top: 0.5rem;
}

#index.root .hero__story {
  position: relative;
  z-index: 0;
  display: flex;
  padding-left: 0.98rem;
}

#index.root .hero__decoration {
  position: absolute;
  z-index: -1;
  height: fit-content;
}

#index.root .hero__decoration-shape {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-primary);
}

#index.root .hero__decoration--left {
  left: -0.3rem;
  top: 1.25rem;
  width: 2.36rem;
  height: 4.9rem;
}

#index.root .hero__decoration--right {
  right: -0.3rem;
  top: 1.2rem;
  width: 1.2rem;
  height: 4.94rem;
}

#index.root .hero__decoration--left .hero__decoration-shape {
  clip-path: polygon(0 100%, 97.8814% 100%, 100% 98.9796%, 100% 63.4694%, 97.8814% 62.449%, 29.2372% 62.449%, 27.1186% 61.4286%, 27.1186% 1.0204%, 25% 0, 0 0);
}

#index.root .hero__decoration--right .hero__decoration-shape {
  clip-path: polygon(100% 100%, 4.1667% 100%, 0 98.9879%, 0 41.4979%, 4.1667% 40.4858%, 55.8333% 40.4858%, 60% 39.4737%, 60% 1.0121%, 64.1667% 0, 100% 0);
}

#index.root .hero__decoration--right::after,
#index.root .hero__decoration--left::before {
  content: "";
  position: absolute;
  top: 0;
  width: 99.99rem;
  height: 100%;
  background: var(--color-primary);
}

#index.root .hero__decoration--right::after {
  left: 99%;
}

#index.root .hero__decoration--left::before {
  right: 99%;
}

#index.root .hero__story-photo {
  width: 100%;
  max-width: 4.66rem;
  height: fit-content;
  /* 支給SVG（466×360、段差 x=222.56 / y=296）の形状。6つの角（凹角含む）を 0.03rem 面取り */
  --beveled-cut: 0.03rem;
  clip-path: polygon(var(--beveled-cut) 0,
      calc(100% - var(--beveled-cut)) 0,
      100% var(--beveled-cut),
      100% calc(82.2222% - var(--beveled-cut)),
      calc(100% - var(--beveled-cut)) 82.2222%,
      calc(47.7597% + var(--beveled-cut)) 82.2222%,
      47.7597% calc(82.2222% + var(--beveled-cut)),
      47.7597% calc(100% - var(--beveled-cut)),
      calc(47.7597% - var(--beveled-cut)) 100%,
      var(--beveled-cut) 100%,
      0 calc(100% - var(--beveled-cut)),
      0 var(--beveled-cut));
}

#index.root .hero__story-grid {
  width: 100%;
  margin-top: -0.95rem;
  height: fit-content;
}

#index.root .hero__philosophy {
  width: 100%;
  max-width: 6rem;
  margin-bottom: 0.62rem;
  margin-left: 0.64rem;
  background-color: var(--color-primary);
  padding-left: 0.95rem;
  padding-top: 0.63rem;
  padding-bottom: 0.77rem;
  clip-path: polygon(100% 76.5278%, 100% 1.1551%, 99.1667% 0, 0.8333% 0, 0 1.1551%, 0 98.8449%, 0.8333% 100%, 84.5% 100%, 85.3333% 98.8449%, 85.3333% 78.8356%, 86.1667% 77.6806%, 99.1667% 77.6806%);
}

#index.root .hero__statement {
  color: var(--color-white);
  font-size: 0.18rem;
  line-height: 0.42rem;
  letter-spacing: 0.03em;
}

#index.root .hero__philosophy-link {
  width: 100%;
  margin-top: 0.4rem;
  max-width: 2.89rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding-bottom: 0.2rem;
}

#index.root .hero__philosophy-link::after {
  content: "";
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 100%;
  width: 100%;
  height: 0.03rem;
  background: var(--color-white);
}

#index.root .hero__philosophy-label {
  font-weight: 600;
  font-size: 0.21rem;
  letter-spacing: 0.025em;
  color: var(--color-white);
}

#index.root .hero__philosophy-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.2rem;
  aspect-ratio: 1;
  color: var(--color-primary);
}

#index.root .hero__philosophy-arrow img {
  display: block;
  width: 100%;
  height: 100%;
}

#index.root .hero__closing-photo {
  margin-left: -1.83rem;
  width: 7.6rem;
  clip-path: polygon(99.3421% 0, 100% 1.7857%, 100% 98.2143%, 99.3421% 100%, 71.1842% 100%, 70.5263% 98.2143%, 70.5263% 78.9286%, 69.8684% 77.1429%, 0.6579% 77.1429%, 0 75.3571%, 0 1.7857%, 0.6579% 0);
}

#index.root .service-news {
  position: relative;
  isolation: isolate;
  padding-bottom: 1.02rem;
  margin-top: 0.32rem;
}

#index.root .service-news::before {
  /* 中央の角はデザイン領域内の初期位置を維持する */
  --service-bg-center-x: calc(50% + 1rem);
  --service-bg-left-notch-x: 0.3rem;
  --service-bg-cut: 0.04rem;
  --service-bg-top-cut: 0.05rem;
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-primary);
  /* 縦位置は rem 基準（旧: 高さに対する % ＝ 2.521 / 3.082 / 7.425 / 72.471 / 74.782%）。
     % だと 1920px 超でサムネイルだけが画面幅に比例して伸び、rem で決まる見出し・余白と比率が崩れて
     白い面からカードがはみ出していた（L155）。上の3つは上端から、下の2つは下端からの距離（NEWS の高さ＋余白）。
     1360 / 1920px では旧 % と 1px 以内で一致する */
  --service-bg-y-top-step: 0.72rem;
  --service-bg-y-white-top: 0.88rem;
  --service-bg-y-blue-top: 2.11rem;
  --service-bg-y-white-bottom: calc(100% - 7.86rem);
  --service-bg-y-blue-bottom: calc(100% - 7.2rem);
  clip-path: polygon(calc(var(--service-bg-center-x) - 0.56rem) var(--service-bg-y-blue-top),
      100% var(--service-bg-y-blue-top),
      100% var(--service-bg-y-top-step),
      calc(var(--service-bg-center-x) + 0.76rem + var(--service-bg-top-cut)) var(--service-bg-y-top-step),
      calc(var(--service-bg-center-x) + 0.76rem) calc(var(--service-bg-y-top-step) - var(--service-bg-top-cut)),
      calc(var(--service-bg-center-x) + 0.76rem) var(--service-bg-top-cut),
      calc(var(--service-bg-center-x) + 0.76rem - var(--service-bg-top-cut)) 0,
      0 0,
      0 100%,
      100% 100%,
      100% var(--service-bg-y-blue-bottom),
      calc(var(--service-bg-center-x) - 0.79rem + var(--service-bg-cut)) var(--service-bg-y-blue-bottom),
      calc(var(--service-bg-center-x) - 0.79rem) calc(var(--service-bg-y-blue-bottom) - var(--service-bg-cut)),
      calc(var(--service-bg-center-x) - 0.79rem) calc(var(--service-bg-y-white-bottom) + var(--service-bg-cut)),
      calc(var(--service-bg-center-x) - 0.79rem - var(--service-bg-cut)) var(--service-bg-y-white-bottom),
      calc(var(--service-bg-left-notch-x) + var(--service-bg-cut)) var(--service-bg-y-white-bottom),
      var(--service-bg-left-notch-x) calc(var(--service-bg-y-white-bottom) - var(--service-bg-cut)),
      var(--service-bg-left-notch-x) calc(var(--service-bg-y-white-top) + var(--service-bg-cut)),
      calc(var(--service-bg-left-notch-x) + var(--service-bg-cut)) var(--service-bg-y-white-top),
      calc(var(--service-bg-center-x) - 0.6rem - var(--service-bg-cut)) var(--service-bg-y-white-top),
      calc(var(--service-bg-center-x) - 0.6rem) calc(var(--service-bg-y-white-top) + var(--service-bg-cut)),
      calc(var(--service-bg-center-x) - 0.6rem) calc(var(--service-bg-y-blue-top) - var(--service-bg-cut)));
}

#index.root .service {
  max-width: none;
  padding-top: 1.83rem;
}

#index.root .service__inner {
  padding-bottom: 1.5rem;
}

/* 見出しはサムネイル（.service__list）の左端に揃える。
.section-heading 共通の padding-left は使わず、リストと同じ左右マージンを持たせる */
#index.root .service__inner>.section-heading {
  width: auto;
  margin-inline: 1.4rem 1.3rem;
  padding-left: 0;
}

#index.root .service__list {
  width: auto;
  margin-left: 1.4rem;
  margin-right: 1.3rem;
  margin-top: -0.11rem;
}

/* 各サムネイルは全体が1つのリンク（a）。マウスオンで写真が少し拡大する
（SERVICEページのカードも同じ挙動） */
#index.root .service__item {
  display: block;
  /* 高さは幅に追従させる。比は設計値 10.9rem × 4.88rem */
  aspect-ratio: 10.9 / 4.88;
  position: relative;
  /* 画像は元データから左右をトリミング済み。高さいっぱいで表示し、
左右は中央寄せにして余白へ背景色を見せる */
  background-color: #c8d9ec;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
  /* .js-fade-in の transition（common.css）を上書きしてしまうため、同じ内容を再掲したうえで background-size を足す */
  transition:
    opacity var(--fade-duration, 0ms) ease-out var(--fade-delay, 0ms),
    transform var(--fade-duration, 0ms) cubic-bezier(0.22, 1, 0.36, 1) var(--fade-delay, 0ms),
    background-size 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

#index.root .service__item:hover,
#index.root .service__item:focus-visible {
  opacity: 1;
  background-size: auto 106%;
}

#index.root .service__item+.service__item {
  margin-top: 0.56rem;
}

/* 3枚のカードは互いに噛み合う切り欠きを持つ特殊形状。デザインデータ（1090×488）と同値 */
#index.root .service__item--creative {
  --creative-left-notch-x: calc((100vw - 13.6rem) / 2 + 3.7rem);
  background-image: url(../../images/index/bg-content-01.webp);
  clip-path: polygon(
    0 calc(100% - 0.04rem),
    0 0.8191rem,
    0.04rem 0.7791rem,
    calc(var(--creative-left-notch-x) - 0.04rem) 0.7791rem,
    var(--creative-left-notch-x) 0.7391rem,
    var(--creative-left-notch-x) 0.04rem,
    calc(var(--creative-left-notch-x) + 0.04rem) 0,
    calc(100% - 0.04rem) 0,
    100% 0.04rem,
    100% 2.8888rem,
    calc(100% - 0.04rem) 2.9288rem,
    calc(100% - 0.36rem) 2.9288rem,
    calc(100% - 0.4rem) 2.9688rem,
    calc(100% - 0.4rem) calc(100% - 0.04rem),
    calc(100% - 0.44rem) 100%,
    0.04rem 100%
  );
}

#index.root .service__item--print {
  background-image: url(../../images/index/bg-content-02.webp);
  clip-path: polygon(
    calc(100% - 0.36rem) 2.3052rem,
    calc(100% - 0.04rem) 2.3052rem,
    100% 2.3452rem,
    100% calc(100% - 0.04rem),
    calc(100% - 0.04rem) 100%,
    0.04rem 100%,
    0 calc(100% - 0.04rem),
    0 2.3065rem,
    0.04rem 2.2665rem,
    0.36rem 2.2665rem,
    0.4rem 2.2265rem,
    0.4rem 0.04rem,
    0.44rem 0,
    calc(100% - 0.44rem) 0,
    calc(100% - 0.4rem) 0.04rem,
    calc(100% - 0.4rem) 2.2652rem
  );
}

#index.root .service__item--real-estate {
  background-image: url(../../images/index/bg-content-03.webp);
  margin-bottom: 0.69rem;
  clip-path: polygon(
    calc(100% - 0.6273rem) 0,
    0.04rem 0,
    0 0.04rem,
    0 calc(100% - 0.04rem),
    0.04rem 100%,
    calc(100% - 0.04rem) 100%,
    100% calc(100% - 0.04rem),
    100% 2.4697rem,
    calc(100% - 0.04rem) 2.4297rem,
    calc(100% - 0.5473rem) 2.4297rem,
    calc(100% - 0.5873rem) 2.3897rem,
    calc(100% - 0.5873rem) 0.04rem
  );
}

#index.root .service__link {
  --beveled-cut: 0.04rem;
  --service-link-design-left: 0.2rem;
  display: flex;
  background: var(--color-primary);
  align-items: center;
  color: var(--color-white);
  padding-inline: 0.25rem;
  /* 青ベタ高さ 68px。文字 0.36rem ＋ 上下 0.16rem ＝ 0.68rem */
  padding-block: 0.16rem;
  position: absolute;
  bottom: 0.2rem;
  /* 帯の左端はサムネイル（＝見出しと同じ左端）基準 */
  left: var(--service-link-design-left);
  width: fit-content;
}

#index.root .service__title {
  font-family: var(--font-family-brand);
  font-size: 0.36rem;
  line-height: 1;
  flex-shrink: 0;
}

#index.root .service__details {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
}

#index.root .service__label {
  font-size: 0.16rem;
  line-height: 0.1942rem;
  font-weight: 600;
  font-family: var(--font-family-base);
  margin-right: 0.18rem;
  margin-left: 0.48rem;
  position: relative;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

#index.root .service__label::before {
  content: "";
  position: absolute;
  left: -0.23rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.01rem;
  height: 0.16rem;
  background: rgba(255, 255, 255, 0.25);
}

#index.root .service__tags {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

#index.root .service__tag {
  font-size: 0.11rem;
  font-family: var(--font-family-base);
}

#index.root .service__tags p {
  color: var(--color-white);
  position: relative;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

#index.root .service__tags p+p {
  margin-left: 0.15rem;
}

#index.root .service__tags p+p::before {
  content: "";
  position: absolute;
  left: -0.08rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.01rem;
  height: 0.1rem;
  background: rgba(255, 255, 255, 0.25);
}

#index.root .service__arrow-wrap {
  margin-left: 0.26rem;
  width: 0.2rem;
  aspect-ratio: 1/1;
  flex-shrink: 0;
}

#index.root .service__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0.2rem;
}

#index.root .service__arrow img {
  display: block;
  width: 100%;
  height: 100%;
}

#index.root .news__panel {
  --news-panel-side-gap: 0.3rem;
  --news-panel-cut: 0.05rem;
  position: relative;
  isolation: isolate;
  padding: 0.46rem;
  max-width: 11.6rem;
  width: 100%;
  margin: 0 auto;
  padding-top: 0.64rem;
  padding-bottom: 0.9rem;
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}

#index.root .news__panel-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-white);
  clip-path: polygon(calc(100% - var(--news-panel-cut)) 100%, var(--news-panel-cut) 100%, 0 calc(100% - var(--news-panel-cut)), 0 var(--news-panel-cut), var(--news-panel-cut) 0, 4.04rem 0, calc(4.04rem + var(--news-panel-cut)) var(--news-panel-cut), calc(4.04rem + var(--news-panel-cut)) 9.2527%, calc(4.04rem + var(--news-panel-cut) + var(--news-panel-cut)) calc(9.2527% + var(--news-panel-cut)), calc(100% - var(--news-panel-cut)) calc(9.2527% + var(--news-panel-cut)), 100% calc(9.2527% + var(--news-panel-cut) + var(--news-panel-cut)), 100% calc(100% - var(--news-panel-cut)));
}

#index.root .news__panel::before,
#index.root .news__panel::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: -1;
  width: 99.99rem;
  height: 100%;
  background: var(--color-white);
}

#index.root .news__panel::before {
  right: calc(100% + var(--news-panel-side-gap));
  clip-path: polygon(0 0,
      calc(100% - var(--news-panel-cut)) 0,
      100% var(--news-panel-cut),
      100% calc(100% - var(--news-panel-cut)),
      calc(100% - var(--news-panel-cut)) 100%,
      0 100%);
}

#index.root .news__panel::after {
  left: calc(100% + var(--news-panel-side-gap));
  height: 5.07rem;
  top: 0.56rem;
  clip-path: polygon(var(--news-panel-cut) 0,
      100% 0,
      100% 100%,
      var(--news-panel-cut) 100%,
      0 calc(100% - var(--news-panel-cut)),
      0 var(--news-panel-cut));
}

#index.root .news__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.16rem;
}

#index.root .news__title {
  --beveled-cut: 0.03rem;
  font-size: 0.49rem;
  font-family: var(--font-family-brand); /* SPIK専用書体 */
  color: var(--color-white);
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 2.54rem;
  aspect-ratio: 254/92;
  width: 100%;
  padding-left: 0.38rem;
  position: relative;
}

#index.root .news__all {
  max-width: none;
  width: auto;
  margin-bottom: 0.14rem;
  gap: 0.17rem;
}

#index.root .news__all::after {
  content: none;
}

#index.root .news__list {
  width: 100%;
  margin-top: 0.36rem;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

#index.root .news__item {
  --beveled-cut: 0.04rem;
  display: flex;
  gap: 0.3rem;
  align-items: center;
  background: var(--color-surface-light);
  padding-left: 0.34rem;
  padding-right: 0.24rem;
  height: 0.88rem;
}

#index.root .news__category {
  --beveled-cut: 0.02rem;
  color: var(--color-white);
  background: var(--color-primary);
  width: 0.64rem;
  height: 0.16rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.1rem;
  line-height: 0.13rem;
  font-family: var(--font-family-base);
  flex-shrink: 0;
  font-weight: 400;
}

#index.root .news__item-title {
  font-size: 0.16rem;
  color: var(--color-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 0.01rem solid var(--color-border-cool-strong);
  padding-left: 0.3rem;
  letter-spacing: 0.04em;
}

#index.root .news__date {
  margin-left: auto;
  color: var(--color-primary-muted);
  font-size: 0.1rem;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}

/* 採用コーナー（ 改修。支給カンプ PCデザイン.svg / PCデザイン.png どおり）。
カンプのSVGは 1単位 = デザイン1px = 0.01rem で、左ブロックはコンテンツ左端から 1rem の位置に置く。
セクションは全幅で高さ 6rem（上 1.19rem ＋ 中身 3.76rem ＋ 下 1.05rem） */
#index.root .recruit {
  margin-top: 0; /* 余白を取る */
}

#index.root .recruit__inner {
  background: #d8e2eb; /* カンプ実測。SPは --color-surface-blue で、PC/SPで色が違う（要確認） */
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: 1.19rem;
  padding-bottom: 1.05rem;
}

#index.root .recruit__layout {
  display: block;
  width: 100%;
  max-width: 13.6rem;
  margin: 0 auto;
  padding-left: 1rem;
  position: relative;
}

#index.root .recruit__body {
  color: var(--color-primary);
  position: relative;
  z-index: 1;
}

/* RECRUIT のバッジだけは見出しの文字サイズ（0.3rem）をそのまま継承する。
0.3rem のときの字面幅 0.146rem が画像の 0.14rem とほぼ同じで、
バッジ（max-width 2.01rem）にも収まるため、幅を合わせて高さは文字と揃える */
#index.root .section-heading__icon--recruit {
  margin-right: 0.14rem; /* L150（旧 calc(0.13rem - 0.14em)） */
}

#index.root .recruit__body .section-heading {
  padding-left: 0;
  width: 100%;
  max-width: 2.01rem;
  aspect-ratio: 201/52;
}

#index.root .recruit__body .section-heading__title {
  justify-content: flex-start;
  padding: 0;
  background: var(--color-primary);
  color: var(--color-white);
  width: 100%;
  max-width: 100%;
  height: 100%;
  font-size: 0.28rem;
  line-height: 1;
  padding-left: 0.18rem;
  letter-spacing: -0.02em;
}

/* カンプ: 文字サイズ 47px・ウエイト600・バッジ上端からベースライン 134.35px */
#index.root .recruit__catch {
  margin-top: 0.33rem;
  font-size: 0.47rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0;
  font-family: var(--font-family-base);
}

/* カンプ: 20px・ウエイト500・見出しのベースラインから 56.25px 下 */
#index.root .recruit__tagline {
  margin-top: 0.2rem;
  font-size: 0.2rem;
  line-height: 1.4;
  letter-spacing: 0.03em;
}

/* 白い行。カンプ: 幅 615px・高さ 64px・面取り 3px・行間 8px、
リードのベースラインから 1行目の上端まで 49.4px */
#index.root .recruit__groups {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  margin-top: 0.41rem;
  width: 6.15rem;
}

#index.root .recruit__group {
  --beveled-cut: 0.03rem;
  display: flex;
  align-items: center;
  height: 0.64rem;
  padding-left: 0.55rem;
  background: var(--color-white);
}

/* ラベル（新卒採用／中途採用）。カンプ: 18px・ウエイト700。
区切りの縦線はラベル側の ::after（左端から 176px、高さ 16px） */
#index.root .recruit__group-label {
  position: relative;
  flex: 0 0 auto;
  width: 1.21rem; /* 0.55rem（左padding）＋1.21rem ＝ カンプの縦線位置 1.76rem */
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 0.18rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

#index.root .recruit__group-label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 0.01rem;
  height: 0.16rem;
  margin-top: -0.08rem;
  background: var(--color-border-cool-strong);
}

#index.root .recruit__group-list {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0 0.32rem; /* 縦線 1.76rem ＋ 0.32rem ＝ カンプのリンク文字位置 2.08rem */
  padding: 0;
  list-style: none;
}

#index.root .recruit__group-item {
  display: flex;
}

#index.root .recruit__link {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  color: var(--color-primary);
  text-decoration: none;
  font-family: var(--font-family-base);
  font-size: 0.17rem; /* （総合職・戸田マシナリーも同じルール） */
  line-height: 1;
  letter-spacing: 0.03em;
}

#index.root .recruit__link-arrow {
  display: block;
  flex-shrink: 0;
  width: 0.2rem;
  height: 0.2rem;
}

/* 写真。カンプ: 幅 6.17rem、コンテンツ幅 13.6rem の右端に揃え、セクション下端に接地 */
#index.root .recruit__photo {
  position: absolute;
  right: 0;
  bottom: -1.05rem;
  width: 6.17rem;
}

#index.root .recruit__photo img {
  display: block;
  width: 100%;
  height: auto;
}