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

  #creative.service .c-page-title {
    --page-title-notch-x: 1.52rem;
    /* 幅は fit-content。固定幅にすると、書体や文字サイズを変えたときに
       右余白だけが広がってしまう。fit-content なら右余白は padding-inline の終端値で決まる */
    --page-title-heading-width: fit-content;
    --page-title-heading-height: 0.92rem;
    --page-title-heading-padding-start: 0.2rem;
    /* 字面の左右余白を揃える。理由は sp/common.css の .c-page-title を参照 */
    --page-title-heading-padding-end: 0.09rem;
    --page-title-main-top: -0.01rem;
    --page-title-divider-margin-start: 0.08rem;
    --page-title-divider-margin-end: 0.08rem;
  }

  #creative.service .badge {
    --beveled-cut: 0.02rem;
    display: inline-block;
    padding: 0.17rem 0.37rem;
    background: var(--color-primary);
    font-family: var(--font-family-base);
    font-size: 0.35rem;
    line-height: 1.4;
    letter-spacing: 0.07em;
    color: var(--color-white);
    max-width: 100%;
  }

  #creative.service .hero {
    --subpage-hero-margin-top: -0.04rem;
    --subpage-hero-left-height: 3.68rem;
    --subpage-hero-notch-x: 1.99rem;
    --subpage-hero-notch-y: 0.32rem;
    --subpage-hero-cut-x: 0.03rem;
    --subpage-hero-cut-y: 0.03rem;
    --subpage-hero-image-aspect-ratio: 375 / 280;
  }

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

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

  #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% - var(--creative-frame-cut)),
      calc(100% - var(--creative-frame-cut)) 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.03rem;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(100% + 0.11rem);
    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%);
  }

  #creative.service .intro {
    display: flex;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.2rem;
    padding: 0.32rem 0.28rem 0.37rem;
    flex-direction: column;
  }

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

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

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

  #creative.service .intro__photo img {
    --beveled-cut: 0.03rem;
    display: block;
    width: 2.67rem;
    aspect-ratio: 980 / 864;
    max-width: none;
  }

  #creative.service .flow {
    display: flex;
    gap: 0.23rem;
    padding: 0 0.3rem 0.48rem;
    flex-direction: column-reverse;
  }

  #creative.service .flow__steps {
    position: relative;
    width: 2.7158rem;
    max-width: none;
    height: 4.91rem;
    background: url("../../images/creative/bg-flow-steps_sp.svg") no-repeat left top / 2.67rem 4.91rem;
  }

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

  #creative.service .badge--flow {
    width: 2.68rem;
    height: 0.8583rem;
    padding: 0.13rem 0 0 0.19rem;
    clip-path: polygon(
      0.03rem 0,
      2.65rem 0,
      2.68rem 0.03rem,
      2.68rem 0.48rem,
      2.65rem 0.51rem,
      /* 下段バンドの右端は、「制作フロー」の字面に上段と同じ右余白（0.134rem）を足した位置 */
      1.23rem 0.51rem,
      1.23rem 0.81rem,
      1.2rem 0.84rem,
      0.03rem 0.84rem,
      0 0.81rem,
      0 0.03rem
    );
    font-size: 0.19rem;
    line-height: 0.3rem;
    letter-spacing: 0.03em;
    white-space: normal;
  }

  #creative.service .flow__text {
    margin: 0.3rem 0 0;
    font-family: var(--font-family-base);
    font-size: 0.15rem;
    line-height: 0.28rem;
    letter-spacing: 0.03em;
    color: var(--color-primary);
    width: 100%;
    margin-top: 0;
  }

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

  #creative.service .step {
    position: absolute;
    left: 0.39rem;
    display: grid;
    grid-template-columns: 0.25rem minmax(0, 1fr);
    align-items: start;
    column-gap: 0.11rem;
    width: 2.12rem;
  }

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

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

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

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

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

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

  #creative.service .step__badge {
    --beveled-cut: 0.02rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 0.25rem;
    height: 0.24rem;
    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.06rem;
    line-height: 1;
    letter-spacing: 0.03em;
    color: var(--color-white);
    text-align: center;
  }

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

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

  #creative.service .step__title {
    margin: -0.01rem 0 0.02rem;
    font-family: var(--font-family-base);
    font-size: 0.12rem;
    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.09rem;
    line-height: 0.12rem;
    letter-spacing: 0.03em;
    color: var(--color-primary);
  }

  #creative.service .showcase {
    position: relative;
    padding: 0.47rem 0 0.5rem;
    background: #cedbeb; /* 下の CTA の写真と同じ単色。境界で色が変わらないように（L116） */
    isolation: isolate;
  }

  /* 正方形に切り抜かれた人物写真。下端はパネル右上のノッチの底（パネル上端から1.2rem）に合わせ、
     右端は画面の右端に合わせる。人物の高さと上下位置は差し替え前の横長写真のときと同じ。 */
  #creative.service .showcase::before {
    content: "";
    position: absolute;
    top: -0.55rem;
    right: -0.1rem;
    z-index: -1;
    width: 2.22rem;
    height: 2.22rem;
    background: url("../../images/creative/bg-detail_sp.webp") no-repeat center / contain;
  }

  #creative.service .showcase__panel::after {
    --beveled-cut: 0.03rem;
    content: "";
    position: absolute;
    top: 1.19rem;
    left: calc(100% + 0.1rem);
    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;
    min-height: 12.96rem;
    margin: 0 0 0 0.11rem;
    padding: 0.32rem 0.3rem;
    isolation: isolate;
    transform: none;
    width: 3.2919rem;
  }

  #creative.service .showcase__panel::before {
    --beveled-cut: 0.03rem;
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-white);
    clip-path: polygon(
      calc(100% - var(--beveled-cut)) 100%,
      var(--beveled-cut) 100%,
      0 calc(100% - var(--beveled-cut)),
      0 var(--beveled-cut),
      var(--beveled-cut) 0,
      2.27rem 0,
      2.3rem var(--beveled-cut),
      2.3rem 1.17rem,
      2.33rem 1.2rem,
      calc(100% - var(--beveled-cut)) 1.2rem,
      100% 1.23rem,
      100% calc(100% - var(--beveled-cut))
    );
  }

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

  #creative.service .detail__heading {
    --detail-heading-cut: 0.02rem;
    --detail-heading-notch-width: 0.69rem;
    --detail-heading-notch-y: 0.55rem;
    padding: 0.13rem 0.16rem;
    font-size: 0.19rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
    width: 1.69rem;
    height: 0.84rem;
    clip-path: polygon(
      calc(100% - var(--detail-heading-notch-width) + var(--detail-heading-cut)) var(--detail-heading-notch-y),
      calc(100% - var(--detail-heading-cut)) var(--detail-heading-notch-y),
      100% calc(var(--detail-heading-notch-y) - var(--detail-heading-cut)),
      100% var(--detail-heading-cut),
      calc(100% - var(--detail-heading-cut)) 0,
      var(--detail-heading-cut) 0,
      0 var(--detail-heading-cut),
      0 calc(100% - var(--detail-heading-cut)),
      var(--detail-heading-cut) 100%,
      calc(100% - var(--detail-heading-notch-width) - var(--detail-heading-cut)) 100%,
      calc(100% - var(--detail-heading-notch-width)) calc(100% - var(--detail-heading-cut)),
      calc(100% - var(--detail-heading-notch-width)) calc(var(--detail-heading-notch-y) + var(--detail-heading-cut))
    );
    line-height: 0.3rem;
  }

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

  #creative.service .detail__list {
    margin-top: 0.24rem;
    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.13rem;
    font-weight: 600;
    color: var(--color-primary);
  }

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

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

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

  #creative.service .collab__photo {
    --beveled-cut: 0.03rem;
    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: 2.557rem;
    min-height: 0.64rem;
    padding: 0.1rem 0.16rem;
    font-size: 0.19rem;
    line-height: 0.3rem;
    letter-spacing: 0.03em;
    height: 0.84rem;
    clip-path: polygon(
      0.02rem 0,
      2.181rem 0,
      2.201rem 0.02rem,
      2.201rem 0.32rem,
      2.221rem 0.34rem,
      2.537rem 0.34rem,
      2.557rem 0.36rem,
      2.557rem 0.82rem,
      2.537rem 0.84rem,
      0.02rem 0.84rem,
      0 0.82rem,
      0 0.02rem
    );
  }

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

  #creative.service .collab__desc p {
    font-family: var(--font-family-base);
    font-size: 0.15rem;
    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: 100%;
    max-width: 100%;
    margin-top: 0.24rem;
    padding-bottom: 0.25rem;
    border-bottom: 0.02rem solid var(--color-primary);
    font-family: var(--font-family-base);
    font-size: 0.15rem;
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: 0.03em;
  }

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

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

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

  #creative.service .works__desc {
    margin-top: 0.15rem;
    font-family: var(--font-family-base);
    font-size: 0.15rem;
    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(2, minmax(0, 1fr));
    gap: 0.15rem;
    margin-top: 0.19rem;
  }

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

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

  #creative.service .cta {
    padding: 0;
    background: #cedbeb; /* 写真の上端と同じ単色（L116） */
  }

  #creative.service .cta__grid {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0;
    align-items: center;
    margin-left: 0;
  }

  #creative.service .cta__title {
    width: 100%;
    font-size: 0.28rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.02em;
    color: var(--color-primary);
}

  #creative.service .cta__desc {
    width: 100%;
    margin: 0.2rem 0 0;
    font-family: var(--font-family-base);
    font-size: 0.14rem;
    line-height: 1.75;
    letter-spacing: 0.03em;
    color: var(--color-primary);
    margin-top: 0.05rem;
  }

  #creative.service .cta__checklist {
    width: 100%;
    margin: 0.35rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.02rem;
    margin-top: 0.25rem;
  }

  #creative.service .cta__checklist-item {
    --beveled-cut: 0.02rem;
    display: flex;
    align-items: center;
    gap: 0.09rem;
    background: var(--color-white);
    color: var(--color-primary);
    padding: 0.14rem 0.12rem;
    font-family: var(--font-family-base);
    font-size: 0.13rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    min-height: 0.4rem;
  }

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

  /* 写真はデザイナー支給のSP用書き出し（上端が単色 #cedbeb）。画面幅いっぱい・縦横比固定で、
     チェックリストの下端から 0.99rem 潜らせるとデザインの位置（チェックリスト下端→写真下端 2.57rem）になる（L116）。 */
  #creative.service .cta__photo {
    flex: none;
    width: calc(100% + 0.46rem);
    align-self: flex-start;
    max-width: none;
    margin-left: -0.23rem;
    margin-top: -0.99rem;
  }

  #creative.service .cta__text {
    position: relative; /* 潜らせた写真より手前 */
    z-index: 1;
    flex: none;
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  #creative.service .intro .badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 0.46rem;
    padding: 0;
    font-size: 0.21rem;
    letter-spacing: 0.02em;
  }

  #creative.service .works__desc br {
    display: none;
  }

  #creative.service .cta__photo img {
    display: block;
    width: 100%;
  }