/* TOPだけ共通ヘッダーの白背景を消す。理由はPCと同じ */
#index.root .c-site-header {
  background-color: transparent;
}

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

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

#index.root .section-heading__title {
  --beveled-cut: 0.03rem;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--font-family-brand);
  color: var(--color-white);
  white-space: nowrap;
  padding-left: 0.49rem;
  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));
  max-width: none;
  width: fit-content;
  line-height: 1.2;
  font-size: 0.26rem;
  padding-inline: 0.2rem;
  padding-block: 0.14rem;
}

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

#index.root .section-heading__icon--news {
  font-size: 0.357rem; /* 画像のときの字面 0.25rem ÷ 0.7 */
  margin-right: 0.09rem; /* L151（旧 calc(0.19rem - 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;
  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));
  max-width: none;
  width: fit-content;
  font-size: 0.15rem;
  padding-inline: 0.16rem;
  padding-block: 0.12rem;
}

#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;
  margin-right: 0.23rem;
}

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

#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 {
  overflow-x: clip;
  margin-top: 0;
  padding-top: 1.09rem;
  padding-bottom: 0;
}

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

/* 「LIGHT WHAT MATTERS.」。旧 logo-hero_sp.svg（229.29×152）の3段の階段形をテキストで再現。
各段の幅は上から 171.51 / 148.55 / 229.29px、面取り3px。文字はキャップハイト25.95px（0.37rem）、
左端27.99px、キャップ上端は上から 19.46 / 63.95 / 111.4px。行送り1では大文字の上端が
行ボックスの 0.25em 下に来るため top はそれぞれ 0.25em（≒9px）引いた値。
特殊形状のため clip-path を直接書く（.u-beveled の --beveled-cut は使わない） */
/* 支給のイラレデータ（`アセット 2.svg`、viewBox 219.06 × 152）に合わせた形。
SPも 1rem = 100 デザインpx なので 2.1906 × 1.52rem。面取りは 0.0358rem。
支給SVGのパスの頂点をそのまま rem に直して clip-path にしている */
/* L148: 書体の字幅がデザインより広く、MATTERS. の右余白が 0.12rem しかなかったので、
下段の右端を 0.06rem 伸ばしてデザインと同じ 0.18rem にした（幅 2.1906 → 2.2506rem）。
さらに指示で3行とも右の余白を 0.02rem 伸ばした（上段・凹み・下段の右端を +0.02rem、幅 2.2706rem）。
右側の凹みはクライアント指示で 0.01rem 下げた（0.6615〜0.8583 → 0.6715〜0.8683rem。支給SVGの値ではない。0.04 → 0.02 → 0.01rem と調整） */
#index.root .hero__logo {
  position: relative;
  display: block;
  width: 2.2706rem;
  height: 1.52rem;
  align-self: auto;
  background: var(--color-primary);
  color: var(--color-white);
  clip-path: polygon(0.0358rem 0,
      1.6741rem 0,
      1.7099rem 0.0358rem,
      1.7099rem 0.6357rem,
      1.6741rem 0.6715rem,
      1.4953rem 0.6715rem,
      1.4595rem 0.7073rem,
      1.4595rem 0.8343rem,
      1.4935rem 0.8683rem,
      2.2348rem 0.8683rem,
      2.2706rem 0.9041rem,
      2.2706rem 1.4842rem,
      2.2348rem 1.52rem,
      0.0358rem 1.52rem,
      0 1.4842rem,
      0 0.0358rem);
}

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

/* 支給SVGは text の x=21.43、ベースラインが y=46.49 / 89.41 / 132.33。
top はベースラインが支給値に一致する実測値（0.1669 / 0.5961 / 1.0253rem） */
#index.root .hero__logo-line {
  position: absolute;
  left: 0.2143rem;
}

/* text-box で行ボックスをキャップハイト〜ベースラインに切り詰め、top をデザインの字面上端（0.21 / 0.64 / 1.07rem）に直接合わせる。
   line-height 1 の行ボックス内で字面がどこに来るかはフォントメトリクスの扱いがエンジンごとに違い、
   Chromium では一致していたが WebKit（iOS Safari）では字面が 0.045rem 下がり、右の切り欠きと WHAT の行がずれて見えた（L148）。
   text-box 非対応の古いブラウザでは従来どおり行ボックス基準（Chromium は一致、古い Safari は 0.045rem 下） */
#index.root .hero__logo-line {
  text-box: trim-both cap alphabetic;
}

#index.root .hero__logo-line:nth-child(1) {
  top: 0.21rem;
}

#index.root .hero__logo-line:nth-child(2) {
  top: 0.64rem;
}

#index.root .hero__logo-line:nth-child(3) {
  top: 1.07rem;
}

@supports not (text-box: trim-both cap alphabetic) {
  #index.root .hero__logo-line:nth-child(1) {
    top: 0.1669rem;
  }

  #index.root .hero__logo-line:nth-child(2) {
    top: 0.5961rem;
  }

  #index.root .hero__logo-line:nth-child(3) {
    top: 1.0253rem;
  }
}

#index.root .hero__tagline {
  --beveled-cut: 0.02rem;
  background-color: var(--color-primary);
  color: var(--color-white);
  white-space: nowrap;
  padding-right: 0.2rem;
  line-height: 1;
  letter-spacing: 0.08em;
  justify-content: center;
  align-items: center;
  display: flex;
  align-self: flex-end;
  padding-inline: 0.16rem;
  width: 2.65rem;
  height: 0.52rem;
  margin-top: 0.18rem;
  font-size: 0.17rem;
  padding-left: 0.22rem;
}

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

#index.root .animation {
  --dynamic-margin: 0;
  /* 両端の余白。
高さは index.js が画面幅から決めるため変わらない。width は auto にしない
（JS が height を入れた後は aspect-ratio により幅が高さから決まり、はみ出す） */
  --kv-side-margin: 0.25rem;
  width: calc(100% - var(--kv-side-margin) * 2);
  margin-inline: var(--kv-side-margin);
  position: relative;
  margin-top: 0.16rem;
  margin-bottom: var(--dynamic-margin);
  aspect-ratio: 1;
}

#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.28rem;
}

#index.root .hero__story {
  position: relative;
  z-index: 0;
  margin-right: 0;
  flex-direction: column;
  display: grid;
  margin-top: 0.27rem;
  padding: 0;
}

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

#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: 0.76rem;
  width: 2.36rem;
}

#index.root .hero__decoration--right {
  display: block;
  top: 2.89rem;
  right: 0;
  width: 1.05rem;
  height: 2.67rem;
  z-index: 0;
}

#index.root .hero__decoration--right .hero__decoration-shape {
  clip-path: polygon(100% 100%, 2.8571% 100%, 0 98.8764%, 0 49.0637%, 2.8571% 47.9401%, 63.8095% 47.9401%, 66.6667% 46.8165%, 66.6667% 1.1236%, 69.5238% 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%;
  display: none;
}

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

#index.root .hero__story-photo {
  height: fit-content;
  max-width: 100%;
  order: 2;
  width: 2.15rem;
  margin: 0 0 0.28rem 0.23rem;
  clip-path: polygon(100% 97.8424%, 100% 22.3022%, 98.6047% 20.1439%, 73.9535% 20.1439%, 72.5581% 17.9856%, 72.5581% 2.1583%, 71.1628% 0, 1.3953% 0, 0 2.1583%, 0 97.8417%, 1.3953% 100%, 98.6047% 100%);
}

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

#index.root .hero__philosophy {
  background-color: var(--color-primary);
  max-width: 100%;
  order: 1;
  width: 3.29rem;
  min-height: 3.88rem;
  margin: 0 0 0.25rem 0.23rem;
  padding: 0.32rem 0.29rem 0.42rem 0.56rem;
  clip-path: polygon(100% 67.268%, 100% 0.7732%, 99.0881% 0, 0.9119% 0, 0 0.7732%, 0 99.2268%, 0.9119% 100%, 86.6261% 100%, 87.538% 99.2268%, 87.538% 68.8144%, 88.4498% 68.0412%, 99.0881% 68.0412%);
}

#index.root .hero__statement {
  color: var(--color-white);
  font-size: 0.15rem;
  line-height: 0.32rem;
  letter-spacing: 0.075em;
}

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

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

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

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

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

#index.root .hero__closing-photo {
  order: 3;
  width: 3.52rem;
  margin: 0;
  clip-path: polygon(99.1477% 100%, 65.625% 100%, 64.7727% 97.973%, 64.7727% 83.1081%, 63.9205% 81.0811%, 0 81.0811%, 0 0, 99.1477% 0, 100% 2.027%, 100% 97.973%);
}

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

#index.root .service-news::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: var(--color-primary);
  --service-bg-center-x: 0rem;
  --service-bg-left-notch-x: 0rem;
  /* 内側の4つの角（凹角含む）は 0.03rem 面取り。画面端に接する4つの角は PC と同じく面取りしない（L140） */
  --service-bg-cut: 0.03rem;
  inset: 0 0 auto;
  height: 0.88rem;
  clip-path: polygon(0 0,
      calc(72.53% - var(--service-bg-cut)) 0,
      72.53% var(--service-bg-cut),
      72.53% calc(31.36% - var(--service-bg-cut)),
      calc(72.53% + var(--service-bg-cut)) 31.36%,
      100% 31.36%,
      100% 100%,
      calc(50.13% + var(--service-bg-cut)) 100%,
      50.13% calc(100% - var(--service-bg-cut)),
      50.13% calc(68.18% + var(--service-bg-cut)),
      calc(50.13% - var(--service-bg-cut)) 68.18%,
      0 68.18%);
}

#index.root .service {
  padding-top: 1.14rem;
  padding-right: 0;
  padding-left: 0;
}

#index.root .service__inner {
  margin-right: 0;
  padding: 0 0 0.58rem;
}

#index.root .service__list {
  width: 100%;
  max-width: 100%;
  margin: 0.36rem 0 0;
}

#index.root .service__item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 3.52rem;
  aspect-ratio: 704 / 720;
  background-size: cover;
  background-position: center;
}

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

#index.root .service__item--creative {
  background: url(../../images/index/bg-content-01.webp) no-repeat center center/cover;
  background-image: url(../../images/index/bg-content-01_sp.webp);
  margin-left: auto;
}

#index.root .service__item--print {
  background: url(../../images/index/bg-content-02.webp) no-repeat center center/cover;
  background-image: url(../../images/index/bg-content-02_sp.webp);
}

#index.root .service__item--real-estate {
  background: url(../../images/index/bg-content-03.webp) no-repeat center center/cover;
  aspect-ratio: 658 / 720;
  background-image: url(../../images/index/bg-content-03_sp.webp);
  margin-bottom: 0.32rem;
  margin-left: 0.23rem;
  width: 3.29rem;
}

#index.root .service__link {
  --beveled-cut: 0.02rem;
  /* 1行目＝英字、2行目＝和文・タグ・矢印 の2行 grid。箱幅は広い方の行＋左右 0.15rem で決まる（fit-content）。
  以前は折り返し flex ＋ 固定幅だったが、固定幅だと文言や端末のフォント幅次第で矢印が右端からはみ出した（L142） */
  display: grid;
  grid-template-columns: max-content;
  row-gap: 0.08rem;
  justify-items: start;
  background: var(--color-primary);
  align-items: center;
  color: var(--color-white);
  position: absolute;
  bottom: 0.2rem;
  left: 0.2rem;
  width: fit-content;
  margin: 0;
  --service-link-notch-x: 2.04rem;
  height: 0.88rem;
  padding: 0.13rem 0.15rem;
  background-color: var(--color-primary);
  clip-path: polygon(0 var(--beveled-cut),
      var(--beveled-cut) 0,
      var(--service-link-notch-x) 0,
      calc(var(--service-link-notch-x) + var(--beveled-cut)) var(--beveled-cut),
      calc(var(--service-link-notch-x) + var(--beveled-cut)) calc(0.44rem - var(--beveled-cut)),
      calc(var(--service-link-notch-x) + var(--beveled-cut) + var(--beveled-cut)) 0.44rem,
      calc(100% - var(--beveled-cut)) 0.44rem,
      100% 0.46rem,
      100% calc(100% - var(--beveled-cut)),
      calc(100% - var(--beveled-cut)) 100%,
      var(--beveled-cut) 100%,
      0 calc(100% - var(--beveled-cut)));
}

#index.root .service__title {
  font-family: var(--font-family-brand);
  line-height: 1;
  font-size: 0.32rem;
  letter-spacing: 0; /* SPIKVANSTAR（TEST_V13）は字間がフォントに含まれるため 0 */
}

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

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

#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);
  display: none;
}

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

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

#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 {
  aspect-ratio: 1/1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.15rem;
  height: 0.15rem;
  margin-left: 0.12rem;
}

#index.root .service__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 0.15rem;
  width: 0.15rem;
  height: 0.15rem;
  min-width: 0.15rem;
}

#index.root .service__arrow img {
  display: block;
  width: 0.15rem;
  height: 0.15rem;
  max-width: none;
}

#index.root .news__panel {
  --news-panel-side-gap: 0.3rem;
  --news-panel-cut: 0.03rem;
  position: relative;
  isolation: isolate;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

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

#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);
  display: none;
}

#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 {
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.16rem;
  display: contents;
}

#index.root .news__title {
  --beveled-cut: 0.03rem;
  font-family: var(--font-family-brand); /* SPIK専用書体 */
  color: var(--color-white);
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  order: 0;
  width: 1.76rem;
  max-width: none;
  aspect-ratio: auto;
  min-height: 0.6rem;
  padding-left: 0.22rem;
  font-size: 0.35rem;
  line-height: 1;
  letter-spacing: 0; /* SPIKVANSTAR（TEST_V13）は字間がフォントに含まれるため 0 */
}

#index.root .news__all {
  max-width: none;
  order: 2;
  width: 100%;
  margin: 0.24rem 0 0;
  gap: 0.36rem;
}

#index.root .news__all::after {
  content: "";
  top: calc(100% + 0.18rem);
  height: 0.02rem;
  width: 1.45rem;
}

#index.root .news__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  order: 1;
  margin-top: 0.24rem;
  gap: 0.04rem;
}

#index.root .news__item {
  --beveled-cut: 0.03rem;
  display: flex;
  align-items: center;
  background: var(--color-surface-light);
  min-height: 0; /* 1行でも2行でも上下の余白を同じにする（高さは中身に合わせて伸びる） */
  height: auto;
  padding: 0.28rem 0.22rem;
  gap: 0.14rem;
  flex-wrap: wrap;
  row-gap: 0.12rem;
}

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

#index.root .news__item-title {
  color: var(--color-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  order: 3;
  width: 100%;
  white-space: normal;
  padding-left: 0;
  border-left: 0;
  font-size: 0.15rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

#index.root .news__date {
  color: var(--color-primary-muted);
  flex-shrink: 0;
  letter-spacing: 0.05em;
  margin-left: 0;
  padding-left: 0.14rem;
  border-left: 0.01rem solid var(--color-border-cool-strong); /* バッジと日付の間の縦線 */
  font-size: 0.11rem;
}

/* 採用コーナー（ 改修。支給カンプ SPデザイン.svg / SPデザイン.png どおり）。
カンプのSVGは 375px 基準で 1単位 = 0.01rem。セクション全体で 7.68rem、写真が下端に接地する。
PCにある ＋RECRUIT のバッジはSPのカンプには無いので非表示のまま */
#index.root .recruit {
  margin-top: 0;
  padding: 0;
}

#index.root .recruit__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--color-surface-blue);
  padding-top: 0.49rem;
  padding-bottom: 0;
}

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

#index.root .recruit__body {
  color: var(--color-primary);
  padding: 0;
}

#index.root .recruit__body .section-heading {
  display: none;
}

/* カンプ: 38px・ウエイト600・行送り 46px・左端 45.23px（パネル内の文字と同じ位置） */
#index.root .recruit__catch {
  margin-top: 0;
  padding-left: 0.2223rem;
  font-family: var(--font-family-base);
  font-size: 0.38rem;
  line-height: 0.46rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* カンプ: 16px・ウエイト400・行送り 24px */
#index.root .recruit__tagline {
  margin-top: 0.155rem;
  padding-left: 0.2223rem;
  font-size: 0.16rem;
  line-height: 0.24rem;
  font-weight: 400;
  letter-spacing: 0.03em;
}

/* 白いパネル。カンプ: 幅 3.29rem・面取り 0.0315rem・間隔 0.08rem。
1枚目は見出し行＋リンク1件、2枚目は見出し行＋リンク2件 */
#index.root .recruit__groups {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  margin-top: 0.235rem;
}

#index.root .recruit__group {
  --beveled-cut: 0.0315rem;
  background: var(--color-white);
  padding-bottom: 0.14rem;
}

/* ラベル行。カンプ: 18px・ウエイト600、高さ 0.60rem、下に 1px の区切り線 */
#index.root .recruit__group-label {
  display: flex;
  align-items: center;
  height: 0.6rem;
  margin: 0;
  padding-left: 0.2223rem;
  border-bottom: 0.01rem solid var(--color-border-cool-strong);
  font-family: var(--font-family-base);
  font-size: 0.18rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

#index.root .recruit__group-list {
  display: block;
  margin: 0;
  padding: 0.1rem 0 0;
  list-style: none;
}

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

/* リンク行。カンプ: 17px・ウエイト400、行の高さ 0.44rem、矢印はパネル右端から 0.22rem */
#index.root .recruit__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 0.44rem;
  padding: 0 0.22rem 0 0.2223rem;
  color: var(--color-primary);
  text-decoration: none;
  font-family: var(--font-family-base);
  font-size: 0.17rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
}

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

/* 写真。カンプ: 画像幅 3.17rem を中央に置き、下端をセクション下端に合わせる */
#index.root .recruit__photo {
  position: static;
  width: 3.17rem;
  max-width: none;
  height: auto;
  aspect-ratio: auto;
  margin: 0.01rem auto 0;
}

#index.root .recruit__photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: fill;
  object-position: center;
}

#index.root .section-link:not(.news__all) {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
}

#index.root .section-link:not(.news__all)::after {
  left: 0;
  right: 0;
  width: auto;
  height: 0.02rem;
  top: calc(100% + 0.2rem);
}

#index.root .hero__story-photo picture,
#index.root .hero__story-photo img,
#index.root .hero__closing-photo picture,
#index.root .hero__closing-photo img {
  display: block;
  width: 100%;
}

#index.root .service__item>img {
  display: none;
}

/* 文字 37px・青ベタの高さ 64px。
高さは ☆マーク（font-size 0.386rem）の行ボックスが文字より高いので、
padding-block 0.127rem ×2 ＋ 0.386rem = 0.64rem。
幅は支給画像から読み取った概算値 */
#index.root .service .section-heading__title {
  width: 2.71rem;
  padding: 0.127rem 0.28rem;
  font-size: 0.37rem;
  line-height: 1;
}

#index.root .service .section-heading__subtitle {
  margin-top: 0.16rem;
  padding: 0.12rem 0.21rem;
  font-size: 0.16rem;
  letter-spacing: 0.075em;
}

/* 青ベタの幅は固定しない（.service__link 参照）。旧: CREATIVE 2.92rem / PRINT 2.20rem / REAL ESTATE 3.0rem */
#index.root .service__item--print .service__link {
  --service-link-notch-x: 1.38rem;
}

/* 帯の上段（ノッチまで）が「REAL ESTATE」の字面より狭く、
最後の E が切れていた（字面の右端 2.54rem に対してノッチ 2.5rem）。
CREATIVE / PRINT の余白（0.077 / 0.102rem）に合わせて 2.62rem にする */
#index.root .service__item--real-estate .service__link {
  --service-link-notch-x: 2.62rem;
}

#index.root .service__item--real-estate .service__arrow-wrap {
  margin-left: 0.09rem;
}

#index.root .news {
  position: relative;
  isolation: isolate;
  padding-top: 1.2rem;
  padding-bottom: 1.28rem;
  background-color: var(--color-primary);
  clip-path: polygon(0 100%, 100% 100%, 100% 4.0814%, 17.0667% 4.0814%, 16.2667% 3.6376%, 16.2667% 0.4438%, 15.4667% 0, 0 0);
}

#index.root .news::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-white);
  clip-path: polygon(0 89.3491%, 100% 89.3491%, 100% 15.3521%, 83.3867% 15.3521%, 82.5867% 14.9083%, 82.5867% 12.2781%, 81.7867% 11.8343%, 0 11.8343%);
}