#creative.service .main {
  /* hidden だと main がスクロールコンテナになり、未表示の .js-fade-in（translateY 0.24rem）の分だけ
     縦にスクロールできてしまい、SPで最初のスワイプが main 側に取られて止まることがあった。clip はスクロールしない */
  overflow-x: clip;
}

#creative.service .c-page-title {
  --page-title-heading-padding-inline: 0.36rem 0.4rem;
  --page-title-main-top: -0.03rem;
  --page-title-divider-margin-start: 0.31rem;
  --page-title-divider-margin-end: 0.31rem;
}

#creative.service .badge {
  --beveled-cut: 0.03rem;
  display: inline-block;
  padding: 0.20rem 0.4rem;
  background: var(--color-primary);
  font-family: var(--font-family-base);
  font-size: 0.30rem;
  line-height: 1.4;
  letter-spacing: 0.025em;
  color: var(--color-white);
  max-width: 100%;
}

#creative.service .badge > span {
  position: relative;
  top: 0.04em; /* 見出しの文字を少し下げて上下中央に（上下 padding は対称のまま。Gen Interface JP は字面が約1〜2px上寄り） */
}

#creative.service .hero {
  --subpage-hero-left-height: 3.68rem;
  --subpage-hero-notch-x: calc(var(--fluid-overhang) + 6.783rem); /* ページタイトル右端 + 0.44rem（下は notch-y 1.3rem のまま 0.46rem） */
  --subpage-hero-notch-y: 1.3rem;
  --subpage-hero-cut-x: 0.04rem;
  --subpage-hero-cut-y: 0.0337rem;
  --subpage-hero-image-width: 100%; /* 1920px超でも画面いっぱいに（旧 13.6rem） */
}

#creative.service .frame {
  padding: 0.56rem 0 0.8rem;
  background: var(--color-primary);
}

#creative.service .frame__inner {
  --creative-frame-cut: 0.04rem;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 11.8rem;
  margin: 0 auto;
  left: 0.4rem;
}

#creative.service .frame__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-white);
  clip-path: polygon(var(--creative-frame-cut) 0,
      calc(100% - var(--creative-frame-cut)) 0,
      100% var(--creative-frame-cut),
      100% calc(100% - 0.76rem),
      calc(100% - var(--creative-frame-cut)) calc(100% - 0.72rem),
      6.98rem calc(100% - 0.72rem),
      6.94rem calc(100% - 0.68rem),
      6.94rem calc(100% - var(--creative-frame-cut)),
      6.9rem 100%,
      var(--creative-frame-cut) 100%,
      0 calc(100% - var(--creative-frame-cut)),
      0 var(--creative-frame-cut));
}

#creative.service .frame__inner::before {
  --beveled-cut: 0.04rem;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(100% + 0.3rem);
  z-index: -1;
  width: 99.99rem;
  background: var(--color-white);
  clip-path: polygon(0 0, calc(100% - var(--beveled-cut)) 0, 100% var(--beveled-cut), 100% calc(100% - var(--beveled-cut)), calc(100% - var(--beveled-cut)) 100%, 0 100%);
}

/* テキスト 4.9rem・写真 4.7rem をコンテンツ幅（10.3rem）の両端に寄せる。間隔は成り行き */
#creative.service .intro {
  display: grid;
  grid-template-columns: 4.9rem 4.7rem;
  justify-content: space-between;
  padding: 0.8rem 0.7rem 1.12rem 0.8rem;
}

#creative.service .intro__text {
  min-width: 0;
  margin-top: 0.15rem;
}

#creative.service .intro__desc {
  margin: 0.37rem 0 0;
  font-family: var(--font-family-base);
  font-size: 0.18rem;
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

#creative.service .intro__photo {
  min-width: 0;
}

#creative.service .intro__photo img {
  --beveled-cut: 0.04rem;
  display: block;
  width: 4.7rem;
  aspect-ratio: 980 / 864;
}

#creative.service .flow {
  display: flex;
  gap: 0.85rem;
  padding: 0 0.7rem 1.12rem 0.8rem;
}

#creative.service .flow__steps {
  position: relative;
  width: 5.05rem;
  max-width: 100%;
  height: 7.44rem;
  background: url("../../images/creative/bg-flow-steps.svg") no-repeat center / 100% 100%;
}

#creative.service .flow__aside {
  min-width: 0;
}

#creative.service .badge--flow {
  width: 3.835rem;
  height: 1.2rem;
  padding: 0.16rem 0.39rem;
  clip-path: polygon(1.043% 0,
      98.957% 0,
      100% 3.333%,
      100% 63.333%,
      98.957% 66.667%,
      55.02% 66.667%,
      55.02% 96.667%,
      53.977% 100%,
      1.043% 100%,
      0 96.667%,
      0 3.333%);
  font-size: 0.27rem;
  line-height: 0.44rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

#creative.service .flow__text {
  margin: 0.3rem 0 0;
  font-family: var(--font-family-base);
  font-size: 0.16rem;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--color-primary);
  width: 3.9rem;
}

#creative.service .flow__text:first-of-type {
  margin-top: 0.33rem;
}

#creative.service .step {
  position: absolute;
  left: 0.74rem;
  display: grid;
  grid-template-columns: 0.48rem minmax(0, 1fr);
  align-items: start;
  column-gap: 0.2rem;
  width: 3.97rem;
}

#creative.service .step:nth-child(1) {
  top: 0.36rem;
}

#creative.service .step:nth-child(2) {
  top: 1.63rem;
}

#creative.service .step:nth-child(3) {
  top: 2.86rem;
}

#creative.service .step:nth-child(4) {
  top: 4.04rem;
}

#creative.service .step:nth-child(5) {
  top: 5.28rem;
}

#creative.service .step:nth-child(6) {
  top: 6.48rem;
}

#creative.service .step__badge {
  --beveled-cut: 0.03rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 0.48rem;
  height: 0.46rem;
  background: var(--color-primary);
  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));
  font-family: var(--font-family-base);
  font-size: 0.1rem;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--color-white);
  text-align: center;
}

#creative.service .step__number {
  margin-top: 0.03rem;
  font-size: 0.21rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

#creative.service .step__body {
  min-width: 0;
}

#creative.service .step__title {
  margin: -0.03rem 0 0.06rem;
  font-family: var(--font-family-base);
  font-size: 0.19rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

#creative.service .step__text {
  font-family: var(--font-family-base);
  font-size: 0.12rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

#creative.service .showcase {
  position: relative;
  padding: 0.8rem 0 1.16rem;
  background: #d2deea; /* 下の CTA の写真の「見えている上端」の色（L116）。
    PCの写真はセクションより背が高く上が切れるので、境界に出るのは単色部分ではなく
    画像 359 行目付近（空のグラデーションの途中）。その行の中央値を実測した値。SPは単色部分が見えるので #cedbeb のまま */
  isolation: isolate;
}

#creative.service .showcase::before {
  content: "";
  position: absolute;
  /* 正方形に切り抜かれた人物写真。パネル右上のノッチ（白を抜いた部分）に収め、
     下端はノッチの底（4.56rem）でパネルの白に隠れる。 */
  top: 0.11rem;
  left: calc(50% + 0.3rem);
  z-index: -1;
  width: 5.36rem;
  height: 5.36rem;
  background: url("../../images/creative/bg-detail.webp") no-repeat center / contain;
}

#creative.service .showcase__panel::after {
  --beveled-cut: 0.05rem;
  content: "";
  position: absolute;
  top: 4.56rem;
  left: calc(100% + 0.3rem);
  bottom: 0;
  width: 99.99rem;
  background: var(--color-white);
  clip-path: polygon(var(--beveled-cut) 0, 100% 0, 100% 100%, var(--beveled-cut) 100%, 0 calc(100% - var(--beveled-cut)), 0 var(--beveled-cut));
}

#creative.service .showcase__panel {
  position: relative;
  max-width: 11.8rem;
  margin: 0 auto;
  padding: 0.72rem 0.8rem 0.79rem 0.8rem;
  isolation: isolate;
  transform: translateX(-0.4rem);
}

#creative.service .showcase__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-white);
  /* 右上に写真を置くためのノッチ。下端は右へ続く白（::after の top）と同じ 4.56rem。 */
  clip-path: polygon(calc(100% - 0.05rem) 100%,
      0.05rem 100%,
      0 calc(100% - 0.05rem),
      0 0.05rem,
      0.05rem 0,
      calc(63.5593% - 0.05rem) 0,
      63.5593% 0.05rem,
      63.5593% calc(4.56rem - 0.05rem),
      calc(63.5593% + 0.05rem) 4.56rem,
      calc(100% - 0.05rem) 4.56rem,
      100% calc(4.56rem + 0.05rem),
      100% calc(100% - 0.05rem));
}

#creative.service .detail {
  width: 6rem;
  max-width: 100%;
}

#creative.service .detail__heading {
  padding: 0.22rem 0.33rem;
  font-size: 0.29rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

#creative.service .detail__desc {
  margin-top: 0.32rem;
  font-family: var(--font-family-base);
  font-size: 0.16rem;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

#creative.service .detail__list {
  margin-top: 0.34rem;
  padding: 0.18rem 0;
  border-top: 0.01rem solid rgba(0, 45, 150, 0.2);
  border-bottom: 0.01rem solid rgba(0, 45, 150, 0.2);
}

#creative.service .detail__list-title {
  margin-bottom: 0.1rem;
  font-family: var(--font-family-base);
  font-size: 0.16rem;
  font-weight: 600;
  color: var(--color-primary);
}

#creative.service .detail__list-text {
  font-family: var(--font-family-base);
  font-size: 0.14rem;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

#creative.service .collab {
  display: grid;
  grid-template-columns: 3.9rem minmax(0, 1fr);
  column-gap: 0.7rem;
  align-items: start;
  margin-top: 0.78rem;
}

#creative.service .collab__photo img {
  display: block;
  width: 3.9rem;
  height: 3.23rem;
  object-fit: cover;
}

#creative.service .collab__photo {
  --beveled-cut: 0.04rem;
  grid-column: 1;
  grid-row: 1 / span 2;
}

#creative.service .collab__content {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

#creative.service .collab__heading {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  width: 5.15rem;
  min-height: 0.64rem;
  padding: 0.2rem 0.28rem;
  font-size: 0.21rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
}

#creative.service .collab__desc {
  margin-top: 0.33rem;
}

#creative.service .collab__desc p {
  font-family: var(--font-family-base);
  font-size: 0.16rem;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

#creative.service .collab__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 3.68rem;
  max-width: 100%;
  margin-top: 0.44rem;
  padding-bottom: 0.26rem;
  border-bottom: 0.03rem solid var(--color-primary);
  font-family: var(--font-family-base);
  font-size: 0.19rem;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.03em;
}

#creative.service .collab__link img {
  flex: 0 0 0.2rem;
  width: 0.2rem;
  height: 0.2rem;
}

#creative.service .works {
  margin-top: 0.77rem;
}

#creative.service .works__heading {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.1rem 0.16rem;
  font-size: 0.21rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

#creative.service .works__desc {
  margin-top: 0.24rem;
  font-family: var(--font-family-base);
  font-size: 0.16rem;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

#creative.service .works__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.36rem;
  margin-top: 0.34rem;
}

#creative.service .works__item {
  --beveled-cut: 0.03rem;
  aspect-ratio: 1 / 1.06;
  background: #e5eaf5;
}

#creative.service .works__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 写真はセクション全幅の背景として敷く（L116）。支給画像の上端は単色 #cedbeb なので、
   背景色を同じにしておけば写真との継ぎ目が出ない。高さはデザインの実測値。 */
#creative.service .cta {
  position: relative;
  height: 8.08rem;
  padding: 1.17rem 0 0;
  overflow: hidden;
  /* 1920px超で写真の左右に出る余り用。写真の左右端の色（見えている範囲を上から 0/20/…/100% で実測、左右の平均）に
     合わせた縦グラデーションで、写真との縦の境目を目立たなくする。1920px以下は写真で全面が隠れるので見えない。 */
  background: #cedbeb linear-gradient(to bottom, #d2deea 0%, #d4e0eb 20%, #d5e1ed 40%, #d2e0ec 60%, #d9e5f1 80%, #d5e2ef 100%);
}

/* テキスト列の左端はデザインどおり l-outer の左端から 6.7rem（チェックリストが x=700px） */
#creative.service .cta__grid {
  padding-left: 6.7rem;
}

#creative.service .cta__title {
  width: 5.94rem;
  font-size: 0.43rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

#creative.service .cta__desc {
  width: 5.3rem;
  margin: 0.2rem 0 0;
  font-family: var(--font-family-base);
  font-size: 0.16rem;
  line-height: calc(30/16);
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

#creative.service .cta__checklist {
  width: 5.3rem;
  margin: 0.38rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.04rem;
}

#creative.service .cta__checklist-item {
  --beveled-cut: 0.03rem;
  display: flex;
  align-items: center;
  gap: 0.08rem;
  background: var(--color-white);
  color: var(--color-primary);
  padding: 0.16rem 0.16rem;
  font-family: var(--font-family-base);
  font-size: 0.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

#creative.service .cta__check {
  display: block;
  width: 0.16rem;
  height: 0.16rem;
  flex-shrink: 0;
}

/* 写真は画面幅いっぱい・縦横比固定で、セクションの下端に吸着させる（L116）。
   画像はセクションより背が高く、はみ出す上側は単色なので切れてよい。
   1920px超はセクションの高さが頭打ち（--rem-size の上限）になるのに写真だけ伸びて人物の頭が切れるため、
   幅を 13.6rem（＝1920px）で止めて中央に置く。左右の余りはセクションの背景色。 */
#creative.service .cta__photo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 13.6rem;
  margin-inline: auto;
}

#creative.service .cta__photo img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

/* 絶対配置の写真より手前に出す。写真の基準はセクション（.cta）なので、ここに position を付けても
   cta__grid には付けない。 */
#creative.service .cta__text {
  position: relative;
  z-index: 1;
  width: 5.3rem;
}