/* Pikara COLLAB LP
   Scoped under .collab-page to avoid global style collisions.
*/

.collab-page {
  --collab-font-mincho: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --collab-font-sans: "Zen Kaku Gothic Antique", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --collab-ink: #231815;
  --collab-muted: #4a403c;
  --collab-bg: #ffffff;
  --collab-mint: #e8f3f1;
  --collab-mint-deep: #c5dfda;
  --collab-cream: #f1ebe0;
  --collab-cta: #d1d6e6;
  --collab-cta-text: #231815;
  /* サイト共通のメイン領域幅（life 各ページと同じ） */
  --collab-max: 1040px;
  --collab-pad: clamp(20px, 4.5vw, 64px);
  color: var(--collab-ink);
  font-family: var(--collab-font-sans);
  background: var(--collab-bg);
  /* overflow-x:hidden は overflow-y が auto 扱いになり二重スクロールバーの原因になる */
  overflow-x: clip;
  overflow-y: visible;
  line-height: 1.8;
}

.collab-page *,
.collab-page *::before,
.collab-page *::after {
  box-sizing: border-box;
}

.collab-page img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.collab-page a {
  color: inherit;
}

/* サイト共通の段落余白をLP内でリセット */
.content .collab-page p {
  margin: 0;
  line-height: inherit;
}

/* life/share/css/base.css のピカラ光・モバイル間余白（50px）を復元 */
.content .collab-page .life-common-footer p {
  margin: 0 50px 0 0;
}

.content .collab-page .life-common-footer p:last-child {
  margin-right: 0;
  margin-bottom: 0;
}

.collab-page a:focus-visible,
.collab-page button:focus-visible {
  outline: 2px solid #4a7bb5;
  outline-offset: 3px;
}

/*
  メインコンテンツ幅（1040px 中央）
  各セクションの内側ラッパーへ付与して幅を統一する
  変更するときは --collab-max のみ見ればよい
*/
.collab-container {
  width: 100%;
  max-width: var(--collab-max);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* PC: 左右余白で1040領域を画面中央に合わせる */
@media screen and (min-width: 961px) {
  .collab-page {
    --collab-pad: max(24px, calc((100% - var(--collab-max)) / 2));
  }
}

.collab-br-pc {
  display: none;
}

.collab-br-sp {
  display: inline;
}

@media screen and (min-width: 961px) {
  .collab-br-pc {
    display: inline;
  }

  .collab-br-sp {
    display: none;
  }
}

/* SP本文: PC向けの途中改行を消し、自然折り返しにする（タイトル・見出しの改行は除く） */
@media screen and (max-width: 960px) {
  .collab-text br,
  .collab-campaign__desc br {
    display: none;
  }
}

/* ---------- Shared ---------- */
.collab-heading {
  margin: 0 0 1.1em;
  font-family: var(--collab-font-mincho);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: #231815;
}

.collab-heading--md {
  font-size: clamp(20px, 2.2vw, 28px);
}

/* 本文: line-height ~1.6、段落間は約2行ぶん */
.collab-text {
  font-size: clamp(14px, 1.2vw, 15px);
  color: #231815;
  line-height: 1.65;
  letter-spacing: 0.02em;
  line-break: strict;
  overflow-wrap: normal;
  word-break: normal;
}

.content .collab-page .collab-text p {
  margin: 0 0 1.85em;
}

.content .collab-page .collab-text p:last-child {
  margin-bottom: 0;
}

/* ---------- Scroll animation ---------- */
.collab-page .is-animate {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s ease, transform 0.85s ease;
  will-change: opacity, transform;
}

.collab-page .is-animate[data-anim="fade-left"] {
  transform: translateX(-28px);
}

.collab-page .is-animate[data-anim="fade-right"] {
  transform: translateX(28px);
}

.collab-page .is-animate.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.collab-page .collab-interview__media-col .is-animate:nth-child(2) {
  transition-delay: 0.12s;
}

.collab-page .collab-interview__media-col .is-animate:nth-child(3) {
  transition-delay: 0.22s;
}

.collab-page .collab-creators__copy.is-animate {
  transition-delay: 0.12s;
}

/* ---------- Background motion: 白いモワモワ ---------- */
.collab-bg-motion {
  position: relative;
  isolation: isolate;
  background-color: #eef6f7;
  overflow: hidden;
}

.collab-bg-motion__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.collab-bg-motion__wash {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(247, 251, 250, 0.08) 55%, rgba(255, 255, 255, 0.28) 100%);
}

.collab-bg-motion__photo {
  position: absolute;
  inset: -10% -8%;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  opacity: 1;
  transform: scale(1.06) translate3d(0, 0, 0);
  will-change: transform;
}

.collab-bg-motion--sea .collab-bg-motion__photo {
  background-image: url("../img/bg-soft-hero.png");
  background-position: center 6%;
  background-size: 125% auto;
}

.collab-bg-motion--window .collab-bg-motion__photo {
  background-image: url("../img/bg-soft-hero.png");
  background-position: center 55%;
  background-size: 130% auto;
  opacity: 0.7;
  filter: saturate(0.85) brightness(1.08);
}

.collab-bg-motion.is-motion-active .collab-bg-motion__photo {
  animation: collab-kenburns 28s ease-in-out infinite alternate;
}

/* 白いモワモワ本体（青背景の上に白い霧として見えること。写真・文字の下） */
.collab-bg-motion__mist {
  position: absolute;
  z-index: 3;
  border-radius: 62% 38% 58% 42% / 42% 58% 38% 62%;
  background: radial-gradient(
    ellipse at 42% 38%,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(255, 255, 255, 0.42) 40%,
    rgba(255, 255, 255, 0.08) 70%,
    rgba(255, 255, 255, 0) 80%
  );
  filter: blur(26px);
  opacity: 0.78;
  will-change: transform, opacity, border-radius;
  pointer-events: none;
  mix-blend-mode: normal;
}

.collab-bg-motion__mist--1 {
  width: min(72vw, 820px);
  height: min(52vw, 560px);
  top: -18%;
  left: -8%;
}

.collab-bg-motion__mist--2 {
  width: min(64vw, 720px);
  height: min(48vw, 500px);
  right: -10%;
  bottom: -8%;
  top: auto;
  opacity: 0.62;
}

.collab-bg-motion__mist--3 {
  width: min(58vw, 560px);
  height: min(42vw, 420px);
  top: auto;
  bottom: -12%;
  left: 18%;
  opacity: 0.58;
  filter: blur(32px);
}

.collab-bg-motion.is-motion-active .collab-bg-motion__mist--1 {
  animation: collab-mist-a 16s ease-in-out infinite alternate;
}

.collab-bg-motion.is-motion-active .collab-bg-motion__mist--2 {
  animation: collab-mist-b 20s ease-in-out infinite alternate;
}

.collab-bg-motion.is-motion-active .collab-bg-motion__mist--3 {
  animation: collab-mist-c 14s ease-in-out infinite alternate;
}

.collab-bg-motion__svg {
  position: absolute;
  inset: -8%;
  z-index: 2;
  width: 116%;
  height: 116%;
  opacity: 0.45;
  pointer-events: none;
  mix-blend-mode: screen;
}

.collab-bg-motion > *:not(.collab-bg-motion__media):not(.collab-top__wave) {
  position: relative;
  z-index: 2;
}

/* ---------- Top block: Hero + Concept ---------- */
.collab-top {
  position: relative;
  isolation: isolate;
  z-index: 1;
  background-color: #e8f2f5;
  overflow: hidden;
}

.collab-top.collab-bg-motion {
  background-color: #e8f2f5;
  overflow: hidden;
}

.collab-top .collab-bg-motion__media {
  /* 波の曲線までモワモワを伸ばす。白地への漏れは前面の波SVGが隠す */
  inset: 0;
}

.collab-top .collab-bg-motion__wash {
  /* 水彩面を消さないよう白ベールを弱める */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.06) 60%, rgba(255, 255, 255, 0.12) 100%);
}

.collab-top .collab-bg-motion__photo {
  background-image: url("../img/bg-soft-hero.png");
  background-position: center top;
  background-size: 140% auto;
  opacity: 1;
  filter: none;
}

/* Concept→Creators の波線（ソフトブルー下端を白で切り出す） */
.collab-top__wave {
  position: relative;
  z-index: 6;
  height: clamp(56px, 6vw, 80px);
  margin-top: calc(clamp(56px, 6vw, 80px) * -1);
  line-height: 0;
  pointer-events: none;
}

.collab-top__wave-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.collab-top__wave-svg--sp {
  display: none;
}

.collab-top__wave-img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 99%;
}

/* SP: 境界波形は mask 構造に合わせて PNG を切り出す */
.collab-top__wave-mask--sp {
  display: none;
  position: absolute;
  top: 4.42%;
  right: 51.08%;
  bottom: 61.95%;
  left: 2.56%;
  pointer-events: none;
}

.collab-top__wave-mask-rot {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  transform-origin: center;
}

.collab-top__wave-mask-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  /* mask 用SVGが黒領域を不透明として使っているため、luminance→alphaへ切替（SP波線を出すため） */
  mask-type: alpha;
  -webkit-mask-type: alpha;

  /* mask-image / mask-position / mask-size（切り出し用） */
  -webkit-mask-image: url("../img/figma-wave-mask-sp.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 750.505px 2655.545px;
  -webkit-mask-position: 385.453px 36.559px;
  mask-image: url("../img/figma-wave-mask-sp.svg");
  mask-repeat: no-repeat;
  mask-size: 750.505px 2655.545px;
  mask-position: 385.453px 36.559px;
}

.collab-top__wave-mask-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

/* ---------- Hero ---------- */
.collab-hero {
  position: relative;
  z-index: 2;
  padding: 28px var(--collab-pad) 36px;
  background: transparent;
  overflow: visible;
}

.collab-hero__inner {
  text-align: left;
}

@keyframes collab-kenburns {
  0% {
    transform: scale(1.04) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.12) translate3d(0, 2%, 0);
  }
}

@keyframes collab-mist-a {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    border-radius: 62% 38% 58% 42% / 42% 58% 38% 62%;
    opacity: 0.55;
  }
  100% {
    transform: translate3d(14%, 18%, 0) scale(1.22);
    border-radius: 40% 60% 46% 54% / 58% 40% 56% 44%;
    opacity: 0.95;
  }
}

@keyframes collab-mist-b {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    border-radius: 48% 52% 42% 58% / 52% 44% 56% 48%;
    opacity: 0.48;
  }
  100% {
    transform: translate3d(-16%, 10%, 0) scale(1.26);
    border-radius: 58% 42% 55% 45% / 40% 60% 45% 55%;
    opacity: 0.88;
  }
}

@keyframes collab-mist-c {
  0% {
    transform: translate3d(0, 0, 0) scale(0.9);
    opacity: 0.35;
  }
  100% {
    transform: translate3d(12%, -16%, 0) scale(1.32);
    opacity: 0.78;
  }
}

/* ミント波の水彩テクスチャ／白い霧 */
@keyframes collab-wave-paint {
  0% {
    transform: scale(1.1) translate3d(-5%, -4%, 0);
  }
  100% {
    transform: scale(1.28) translate3d(7%, 6%, 0);
  }
}

@keyframes collab-wave-blob-a {
  0% {
    transform: translate3d(-12%, -8%, 0) scale(0.92);
    border-radius: 62% 38% 58% 42% / 42% 58% 38% 62%;
    opacity: 0.7;
  }
  100% {
    transform: translate3d(20%, 18%, 0) scale(1.38);
    border-radius: 40% 60% 46% 54% / 58% 40% 56% 44%;
    opacity: 1;
  }
}

@keyframes collab-wave-blob-b {
  0% {
    transform: translate3d(10%, 6%, 0) scale(1);
    border-radius: 48% 52% 42% 58% / 52% 44% 56% 48%;
    opacity: 0.62;
  }
  100% {
    transform: translate3d(-22%, 12%, 0) scale(1.42);
    border-radius: 58% 42% 55% 45% / 40% 60% 45% 55%;
    opacity: 0.95;
  }
}

@keyframes collab-wave-blob-c {
  0% {
    transform: translate3d(0, 10%, 0) scale(0.88);
    opacity: 0.55;
  }
  100% {
    transform: translate3d(16%, -20%, 0) scale(1.45);
    opacity: 0.92;
  }
}

/* 段落余白は padding で確保 */
#content .collab-page .collab-hero__brand {
  margin: 0;
  padding: 0 0 28px;
}

#content .collab-page .collab-hero__brand img {
  width: min(130px, 38vw);
  height: auto;
  display: block;
}

.collab-hero__stage {
  display: grid;
  gap: 20px;
}

.collab-hero__visual {
  position: relative;
  z-index: 1;
  max-width: 436px;
  margin: 0 auto;
}

.collab-hero__visual > img {
  width: 100%;
  height: auto;
  display: block;
}

.collab-hero__aside {
  display: grid;
  gap: 20px;
  justify-items: center;
  text-align: center;
}

.collab-hero__logo {
  width: min(78%, 320px);
  pointer-events: none;
}

.collab-hero__logo img {
  width: 100%;
  height: auto;
  display: block;
}

.collab-hero__catch {
  margin: 0;
  font-family: var(--collab-font-mincho);
  font-weight: 400;
  font-size: clamp(22px, 5.6vw, 34px);
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: #231815;
  text-align: left;
}

.collab-hero__catch span {
  display: block;
}

@media screen and (max-width: 960px) {
  .collab-hero__catch span {
    white-space: nowrap;
  }
}

@media screen and (min-width: 961px) {
  .collab-hero {
    /* 青地帯上端〜ブランドの余白 */
    padding: 26px var(--collab-pad) 56px;
  }

  /* ブランド〜写真の余白・写真より左寄せ */
  #content .collab-page .collab-hero__brand {
    margin: 0;
    margin-left: -44px;
    padding: 0 0 82px;
  }

  #content .collab-page .collab-hero__brand img {
    width: 130px;
  }

  .collab-hero__stage {
    --hero-photo: 436px;
    --hero-gap: 101px;
    display: grid;
    /* 写真とキャッチの幅を固定 */
    grid-template-columns: var(--hero-photo) 352px;
    column-gap: var(--hero-gap);
    justify-content: start;
    align-items: start;
    position: relative;
    min-height: 451px;
    width: max-content;
    max-width: 100%;
  }

  .collab-hero__visual {
    margin: 0;
    width: var(--hero-photo);
    max-width: var(--hero-photo);
  }

  .collab-hero__aside {
    display: block;
    width: 352px;
    justify-items: start;
    text-align: left;
    padding-top: 0;
  }

  .collab-hero__logo {
    width: 352px;
  }

  .collab-hero__catch {
    /* 写真右上のキャッチ配置 */
    position: absolute;
    left: calc(var(--hero-photo) + 23px);
    top: 204px;
    width: max-content;
    margin: 0;
    font-size: 46px;
    line-height: 1.45;
    letter-spacing: 0.02em;
    color: #231815;
  }

  /* ヒーローキャッチの太さ */
  #content .collab-page h1.collab-hero__catch {
    font-weight: 400;
  }

  .collab-hero__catch span {
    display: block;
    white-space: nowrap;
  }

  .collab-hero__catch span:last-child {
    padding-left: 23px;
  }
}

/* ---------- Concept ---------- */
.collab-concept {
  position: relative;
  z-index: 2;
  padding: 24px var(--collab-pad) 100px;
  background: transparent;
}

.collab-concept__copy {
  max-width: 42em;
  position: relative;
  z-index: 1;
  text-align: left;
}

.collab-concept .collab-heading {
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: 0.08em;
  margin-bottom: 1.15em;
}

.collab-concept .collab-text {
  color: #231815;
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.65;
}

.collab-concept .collab-text p {
  margin-bottom: 1.85em;
}

.collab-concept__photos {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
  margin-top: 36px;
  align-items: end;
}

.collab-concept__photo {
  margin: 0;
}

.collab-concept__photo img {
  width: 100%;
  height: auto;
  display: block;
}

.collab-concept__photo--window img {
  object-fit: cover;
  object-position: center right;
}

@media screen and (min-width: 961px) {
  .collab-concept {
    padding: 8px var(--collab-pad) 120px;
  }

  .collab-concept__inner {
    min-height: 640px;
  }

  .collab-concept__copy {
    /* 本文が写真と重ならない幅 */
    max-width: 715px;
    padding-right: 0;
    position: relative;
    z-index: 1;
  }

  .collab-concept .collab-heading {
    max-width: none;
    /* 見出しサイズ */
    font-size: 29px;
    letter-spacing: 0.06em;
    margin-bottom: 1.35em;
  }

  .collab-concept .collab-text {

    /* リード文サイズ（Zen Old Mincho） */
    font-family: var(--collab-font-mincho);
    font-size: 17px;
    line-height: 1.85;
    letter-spacing: 0.02em;
    text-align: left;
  }

  .collab-concept .collab-text p {
    margin-bottom: 2em;
  }

  /* 1040コンテナ内の絶対配置 */
  .collab-concept__photos {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
    pointer-events: none;
    z-index: 2;
  }

  /* 窓写真 268×274 → 右端揃え（left≈772） */
  .collab-concept__photo--window {
    position: absolute;
    top: -29px;
    right: 0;
    left: auto;
    width: 280px;
    overflow: hidden;
  }

  .collab-concept__photo--window img {
    width: 100%;
    height: 100%;
    min-height: 274px;
    object-fit: cover;
    object-position: 72% center;
    transform: scale(1.08);
    transform-origin: right center;
  }

  /* 手元写真。海写真と重ならない位置へ（大きな隙間は作らない） */
  .collab-concept__photo--sea {
    position: absolute;
    top: 256px;
    left: 582px;
    right: auto;
    width: 178px;
    height: 187px;
    overflow: hidden;
  }

  .collab-concept__photo--sea img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 写真は右寄せでトリミング */
    object-position: 100% center;
    transform: scale(1.12);
    transform-origin: right center;
  }
}

/* ---------- Creators ---------- */
.collab-creators {
  position: relative;
  z-index: 2;
  margin-top: -28px;
  padding: 96px var(--collab-pad) 88px;
  background: #ffffff;
}

.collab-creators__inner {
  display: grid;
  gap: 28px;
}

.collab-creators__circle {
  margin: 0 auto;
  width: min(280px, 68vw);
  border-radius: 50%;
  overflow: hidden;
}

.collab-creators__circle img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 50%;
}

.collab-creators__float {
  display: none;
}

@media screen and (min-width: 961px) {
  .collab-creators {
    /* 波下端から円までの余白 */
    padding: 108px var(--collab-pad) 96px;
  }

  .collab-creators__inner {
    /* 円とコピーの間隔 */
    grid-template-columns: 314px minmax(0, 1fr);
    gap: 36px;
    align-items: center;
  }

  .collab-creators__circle {
    margin: 0;
    width: 314px;
  }

  .collab-creators__copy {

    padding-top: 8px;
  }

  .collab-creators .collab-heading {
    font-size: 28px;
    margin-bottom: 1.5em;
  }
}

.collab-creators .collab-heading {
  font-family: var(--collab-font-mincho);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #231815;
}

.collab-creators .collab-text {
  font-family: var(--collab-font-mincho);
  color: #231815;
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.65;
}

.collab-creators .collab-text p {
  margin-bottom: 1.75em;
}

@media screen and (min-width: 961px) {
  /*
    Figma PC 1:537:
    concept(1:661〜) / creators(1:675〜) / feature lead(1:681〜)
    いずれも本文 17px・同じ文字組み（1行ボックス高 24px 相当）
  */
  .collab-creators .collab-text {
    font-size: 17px;
    line-height: 1.85;
  }
}

/* ---------- Feature / #01 ---------- */
.collab-feature {
  position: relative;
  padding: 64px var(--collab-pad) 48px;
  background: #ffffff;
  overflow: visible;
  /* ミント波の位置をセクション幅基準にする */
  container-type: inline-size;
  container-name: collab-feature;
}

.collab-feature__inner {
  z-index: 1;
  position: relative;
}

.collab-feature__top {
  display: grid;
  gap: 24px;
  margin-bottom: 36px;
  position: relative;
  z-index: 2;
}

.collab-feature__brand {
  display: grid;
  gap: 8px;
  justify-items: start;
  position: relative;
}

.collab-feature__brand::before {
  display: none;
}

.collab-feature__logo,
.collab-feature__num {
  position: relative;
  z-index: 1;
}

.collab-feature__logo {
  margin: 0;
}

.collab-feature__logo img {
  width: min(254px, 70vw);
  height: auto;
  display: block;
}

.content .collab-page .collab-feature__num {
  margin: 0;
  font-family: var(--collab-font-mincho);
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #231815;
}

.collab-feature__photo {
  margin: 0;
}

.collab-feature__photo img {
  width: 100%;
  height: auto;
  display: block;
}

.collab-feature__body {
  position: relative;
  padding: 28px 0 8px;
}

.collab-feature__title-wrap {
  position: relative;
  /* 写真下端がミントに重なり、タイトルはミント内 */
  margin: -68px 0 28px;
  padding: 100px 0 110px;
}

/* ミント波帯（左端＝セクション左端） */
.collab-feature__title-wrap::before {
  content: "";
  position: absolute;
  z-index: 0;
  /* SP: 左右余白変数を参照 */
  left: calc(-1 * var(--collab-pad));
  top: 0;
  width: calc(100% + 2 * var(--collab-pad));
  max-width: none;
  aspect-ratio: 1021.65 / 356.441;
  height: auto;
  background-color: #e8f3f1;
  background-image: url("../img/bg-feature-mint-wave.png");
  background-size: cover;
  background-position: center;
  -webkit-mask-image: url("../img/mask-feature-mint.svg");
  mask-image: url("../img/mask-feature-mint.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

/* ミント波の形の中だけ白いモワモワ（::beforeミントの前面、文字の下） */
.collab-wave-mist {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.collab-feature__title-wrap > .collab-wave-mist {
  left: calc(-1 * var(--collab-pad));
  width: calc(100% + 2 * var(--collab-pad));
  height: auto;
  aspect-ratio: 1021.65 / 356.441;
  -webkit-mask-image: url("../img/mask-feature-mint.svg");
  mask-image: url("../img/mask-feature-mint.svg");
}

.collab-interview__title-wrap > .collab-wave-mist {
  left: calc(-1 * var(--collab-pad));
  width: calc(100% + 2 * var(--collab-pad));
  height: auto;
  aspect-ratio: 1021.65 / 273.748;
  -webkit-mask-image: url("../img/mask-interview-mint.svg");
  mask-image: url("../img/mask-interview-mint.svg");
}

.collab-interview__closing-copy .collab-interview__title-wrap > .collab-wave-mist {
  aspect-ratio: 1021.65 / 356.441;
  -webkit-mask-image: url("../img/mask-feature-mint.svg");
  mask-image: url("../img/mask-feature-mint.svg");
}

.collab-wave-mist__paint {
  position: absolute;
  inset: -22%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.92;
  will-change: transform;
  animation: collab-wave-paint 12s ease-in-out infinite alternate;
}

.collab-feature__title-wrap > .collab-wave-mist .collab-wave-mist__paint,
.collab-interview__closing-copy .collab-wave-mist .collab-wave-mist__paint {
  background-image: url("../img/bg-feature-mint-wave.png");
}

.collab-interview__block--02 .collab-wave-mist .collab-wave-mist__paint {
  background-image: url("../img/bg-interview-mint-wave.png");
}

.collab-wave-mist__blob {
  position: absolute;
  border-radius: 58% 42% 52% 48% / 44% 56% 40% 60%;
  background: radial-gradient(
    ellipse at 40% 40%,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.62) 34%,
    rgba(255, 255, 255, 0.14) 60%,
    rgba(255, 255, 255, 0) 74%
  );
  filter: blur(20px);
  opacity: 0.9;
  will-change: transform, opacity, border-radius;
}

.collab-wave-mist__blob--1 {
  width: 58%;
  height: 78%;
  top: -12%;
  left: 2%;
  animation: collab-wave-blob-a 8s ease-in-out infinite alternate;
}

.collab-wave-mist__blob--2 {
  width: 54%;
  height: 82%;
  right: 0;
  bottom: -18%;
  top: auto;
  left: auto;
  opacity: 0.78;
  animation: collab-wave-blob-b 10s ease-in-out infinite alternate;
}

.collab-wave-mist__blob--3 {
  width: 44%;
  height: 60%;
  left: 28%;
  top: 8%;
  opacity: 0.7;
  filter: blur(24px);
  animation: collab-wave-blob-c 7s ease-in-out infinite alternate;
}

.collab-feature__title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--collab-font-mincho);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #231815;
}

.collab-feature__lead {
  max-width: 58em;
  position: relative;
  z-index: 1;
}

.collab-feature__lead.collab-text {
  font-family: var(--collab-font-mincho);
  color: #231815;
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.7;
}

@media screen and (min-width: 961px) {
  .collab-feature {
    /* 左右余白はコンテナに任せ、波を左端に揃える */
    padding: 40px 0 48px;
    overflow: visible;
  }

  .collab-feature__top {
    /* 写真は右端揃え / ロゴは写真上端より下 */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    margin-bottom: 0;
    min-height: 453px;
  }

  .collab-feature__brand {
    flex: 0 0 254px;
    width: 254px;
    padding-top: 181px;
    padding-bottom: 0;
    align-self: flex-start;
    margin-right: 0;
  }

  .collab-feature__photo {
    flex: 0 0 678px;
    width: 678px;
    max-width: 678px;
    margin: 0 0 0 auto;
  }

  .content .collab-page .collab-feature__num {
    /* ロゴと #01 の横位置 */
    margin: 8px 0 0 92px;
    font-size: 52px;
  }

  .collab-feature__body {
    padding: 0;
    max-width: none;
  }

  .collab-feature__title-wrap {
    /* 写真下端がミントに約68px重なる / タイトルはミント上端から約143px */
    margin-top: -68px;
    padding: 143px 0 88px;
    margin-bottom: 20px;
  }

  .collab-feature__title-wrap::before {
    /* セクション左端に固定 */
    left: calc(50% - 50cqw);
    top: 0;
    width: min(1021.65px, 100cqw);
    max-width: none;
    aspect-ratio: 1021.65 / 356.441;
    height: auto;
    min-height: 0;
    background-color: #e8f3f1;
    background-image: url("../img/bg-feature-mint-wave.png");
    background-size: cover;
    background-position: center;
    -webkit-mask-image: url("../img/mask-feature-mint.svg");
    mask-image: url("../img/mask-feature-mint.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .collab-feature__title-wrap > .collab-wave-mist {
    left: calc(50% - 50cqw);
    width: min(1021.65px, 100cqw);
    aspect-ratio: 1021.65 / 356.441;
    height: auto;
  }

  .collab-feature__title {
    /* 見出しサイズ・行間 */
    font-size: 42px;
    line-height: 1.69;
    letter-spacing: 0.04em;
    max-width: 560px;
  }

  /* Feature見出しの太さ（ヒーローキャッチと同程度） */
  #content .collab-page h2.collab-feature__title {
    font-weight: 400;
  }

  .collab-feature__lead.collab-text {
    font-size: 17px;
    line-height: 1.85;
    max-width: inherit;
  }

  /* PC本文サイズ統一: concept / creators / feature lead → 17px */
  .collab-creators .collab-text,
  .collab-feature__lead.collab-text {
    font-size: 17px;
  }
}

/* ---------- Interview ---------- */
.collab-interview__block {
  padding: 72px var(--collab-pad);
  background-color: #ffffff;
}

.collab-interview__block--01 {
  background-color: #ffffff;
}

.collab-interview__block--02 {
  background-color: #ffffff;
  /* ミント波をセクション幅基準で左端固定するため */
  container-type: inline-size;
  container-name: collab-interview-02;
}

.collab-interview__grid {
  display: grid;
  gap: 32px;
}

.collab-interview__media-col {
  display: grid;
  gap: 20px;
}

.collab-interview__media-col figure,
.collab-interview__shot {
  margin: 0;
}

.collab-interview__media-col img,
.collab-interview__shot img {
  width: 100%;
  height: auto;
  display: block;
}

.collab-interview__closing-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.content .collab-page .collab-interview__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* ピル下端〜タイトルの余白 */
  margin: 0 0 25px;
  width: 127px;
  min-width: 127px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  font-family: var(--collab-font-mincho);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  line-height: 1;
  color: #ffffff;
  background: #7a9aa3;
}

.collab-interview__title-wrap {
  position: relative;
  margin: 0 0 1.25em;
  padding: 36px 0 48px;
}

/* Interview#02・Closing タイトル背後のミント帯 */
.collab-interview__title-wrap::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: calc(-1 * var(--collab-pad));
  top: 0;
  width: calc(100% + 2 * var(--collab-pad));
  aspect-ratio: 1021.65 / 273.748;
  height: auto;
  min-height: 0;
  background-color: #e8f3f1;
  background-image: url("../img/bg-interview-mint-wave.png");
  background-size: cover;
  background-position: center;
  -webkit-mask-image: url("../img/mask-interview-mint.svg");
  mask-image: url("../img/mask-interview-mint.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

.collab-interview__title {
  position: relative;
  z-index: 2;
  margin: 0 0 1.25em;
  font-family: var(--collab-font-mincho);
  font-weight: 400;
  font-size: clamp(22px, 2.3vw, 28px);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #231815;
}

.collab-interview__title-wrap .collab-interview__title {
  margin: 0;
}

.collab-interview__text-col .collab-text,
.collab-interview__closing-copy .collab-text {
  /* Interview本文: Zen Old Mincho */
  font-family: var(--collab-font-mincho);
  color: #231815;
  font-size: clamp(13px, 1.15vw, 15px);
  line-height: 1.9;
}

.collab-interview__closing {
  position: relative;
  padding: 72px var(--collab-pad) 88px;
  background: #ffffff;
  container-type: inline-size;
  container-name: collab-interview-closing;
}

.collab-interview__closing-grid {
  display: grid;
  gap: 28px;
}

.collab-interview__closing-photo {
  margin: 0;
}

.collab-interview__sign {
  margin: 28px 0 0;
  text-align: right;
}

.collab-interview__sign img {
  width: min(220px, 55vw);
  height: auto;
}

@media screen and (min-width: 961px) {
  .collab-interview__block {
    padding: 64px var(--collab-pad) 63px;
  }

  /* #01本文末 → #02ミント、#02本文末 → Closingミントの余白 */
  .collab-interview__block--01 {
    padding-bottom: 63px;
  }

  /* #02: Feature同様、左右余白は container に任せ波を左端固定 */
  .collab-interview__block--02 {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 72px;
  }

  .collab-interview__grid {
    /* 写真スタックと本文のカラム幅・間隔 */
    grid-template-columns: 360px minmax(0, 625px);
    column-gap: 58px;
    row-gap: 0;
    align-items: start;
    justify-content: start;
  }

  .collab-interview__grid--reverse {
    /* 本文左・写真群右 */
    grid-template-columns: minmax(0, 594px) minmax(320px, 430px);
    justify-content: space-between;
    column-gap: 48px;
    row-gap: 0;
    /* 右カラムを本文高に伸ばし、hold写真を本文末基準で置けるようにする */
    align-items: stretch;
  }

  .collab-interview__media-col--stack {
    width: 360px;
    gap: 56px;
    padding-top: 0;
  }

  .collab-interview__media-col--stagger {
    position: relative;
    display: block;
    min-height: 0;
    height: auto;
    align-self: stretch;
    padding-top: 0;
  }

  .collab-interview__shot {
    position: absolute;
    margin: 0;
    z-index: 2; /* ミント波より前面 */
  }

  /* paintは右端揃え / productsは左にはみ出し / holdはやや右 */
  .collab-interview__shot--paint {
    width: 271px;
    top: 128px;
    right: 0;
    left: auto;
  }

  .collab-interview__shot--products {
    width: 398px;
    top: 382px;
    /* 本文に被らないよう右へ寄せる */
    left: -24px;
    right: auto;
  }

  .collab-interview__shot--hold {
    width: 360px;
    /* hold下端は本文末より上、Closingミントまでの余白を確保 */
    top: auto;
    bottom: 16px;
    right: 0;
    left: auto;
  }

  .collab-interview__label {
    margin: 0 0 25px;
  }

  .collab-interview__title-wrap {
    padding: 36px 0 52px;
    margin: 0 0 8px;
  }

  /* Interview見出しの太さ・余白（#01 / #02 / Closingで揃える） */
  .content .collab-page .collab-interview__block--01 .collab-interview__title,
  .content .collab-page .collab-interview__block--02 .collab-interview__title,
  .content .collab-page .collab-interview__closing-copy .collab-interview__title {
    font-weight: 400;
  }

  .content .collab-page .collab-interview__block--01 .collab-interview__title {
    margin: 0 0 45px;
    font-size: 26px;
    line-height: 1.46;
  }

  /*
    #02: ミント帯内にタイトル配置。本文はミント内に重ね、帯は右端揃え
  */
  .collab-interview__block--02 .collab-interview__title-wrap {
    box-sizing: border-box;
    min-height: 0;
    padding: 68px 0 0;
    margin: 0 0 45px;
    display: block;
  }

  .collab-interview__title-wrap::before {
    transform: none;
    width: min(1021.65px, 100cqw);
    aspect-ratio: 1021.65 / 273.748;
    height: auto;
    min-height: 0;
    background-image: url("../img/bg-interview-mint-wave.png");
    background-color: #e8f3f1;
    -webkit-mask-image: url("../img/mask-interview-mint.svg");
    mask-image: url("../img/mask-interview-mint.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  /* #02: セクション右端にミント右を合わせる */
  .collab-interview__block--02 .collab-interview__title-wrap::before {
    top: 0;
    left: calc(50cqw - (1021.65px - var(--collab-max) / 2));
    width: min(1021.65px, 100cqw);
    height: 273.75px;
    aspect-ratio: auto;
  }

  .collab-interview__block--02 .collab-interview__title-wrap > .collab-wave-mist {
    top: 0;
    left: calc(50cqw - (1021.65px - var(--collab-max) / 2));
    width: min(1021.65px, 100cqw);
    height: 273.75px;
    aspect-ratio: auto;
  }

  .collab-interview__block--02 .collab-interview__title {
    /* Closingと同サイズ */
    font-size: 26px;
    line-height: 2.03;
  }

  .collab-interview__block--02 .collab-interview__text-col .collab-text {
    position: relative;
    z-index: 1;
  }

  .collab-interview__closing-copy .collab-interview__title-wrap {
    /* Closing: ミント帯は左端フルブリード、タイトル〜本文は帯内 */
    box-sizing: border-box;
    min-height: 0;
    padding: 56px 0 0;
    margin: 0 0 45px;
    display: block;
  }

  .collab-interview__closing-copy .collab-interview__title-wrap::before {
    content: "";
    top: 0;
    /* 右カラム(写真491+gap80)起点 → セクション左端へ */
    left: calc(-50cqw - 51px);
    width: min(1021.65px, 100cqw);
    height: 356.44px;
    aspect-ratio: auto;
    z-index: 0;
    background-image: url("../img/bg-feature-mint-wave.png");
    background-color: #e8f3f1;
    background-size: cover;
    background-position: center;
    -webkit-mask-image: url("../img/mask-feature-mint.svg");
    mask-image: url("../img/mask-feature-mint.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
  }

  .collab-interview__closing-copy .collab-interview__title-wrap > .collab-wave-mist {
    top: 0;
    left: calc(-50cqw - 51px);
    width: min(1021.65px, 100cqw);
    height: 356.44px;
    aspect-ratio: auto;
    -webkit-mask-image: url("../img/mask-feature-mint.svg");
    mask-image: url("../img/mask-feature-mint.svg");
  }

  .collab-interview__closing-copy .collab-interview__title {
    position: relative;
    z-index: 2;
    /* 見出しサイズ・行間 */
    font-size: 26px;
    line-height: 2.03;
  }

  .collab-interview__closing-copy .collab-text {
    position: relative;
    z-index: 1;
  }

  .collab-interview__block--01 .collab-interview__title,
  .collab-interview__block--02 .collab-interview__title {
    white-space: nowrap;
  }

  .collab-interview__closing .collab-interview__title {
    white-space: normal;
  }

  .collab-interview__text-col .collab-text,
  .collab-interview__closing-copy .collab-text {
    font-family: var(--collab-font-mincho);
    font-size: 15.5px;
    line-height: 38.9px;
  }

  .content .collab-page .collab-interview__text-col .collab-text p,
  .content .collab-page .collab-interview__closing-copy .collab-text p {
    margin: 0 0 21px;
  }

  .content .collab-page .collab-interview__text-col .collab-text p:last-child,
  .content .collab-page .collab-interview__closing-copy .collab-text p:last-child {
    margin-bottom: 0;
  }

  .collab-interview__closing {
    /* 左右余白は container に任せ、ミントをセクション左端へ。
       サイン下端 → Profileクリームまでの余白 */
    padding: 0 0 81px;
  }

  .collab-interview__closing-grid {
    grid-template-columns: 491px 389px;
    column-gap: 80px;
    row-gap: 0;
    align-items: start;
    justify-content: start;
  }

  .collab-interview__closing-photo {
    max-width: 491px;
    position: relative;
    z-index: 2; /* 写真はミント波の前面 */
    /* 写真上端 ≈ タイトル上端 */
    margin-top: 56px;
  }

  /* サイン配置。末本文付近から始め、本文末より下へ */
  #content .collab-page p.collab-interview__sign {
    margin: -62px 0 0;
    text-align: right;
    line-height: 0;
  }

  #content .collab-page .collab-interview__sign img {
    width: 289px;
    max-width: 100%;
    height: 152px;
    object-fit: contain;
    object-position: right bottom;
  }
}

/* ---------- Profile ---------- */
.collab-profile {
  padding: 16px var(--collab-pad) 28px;
  background: #fff;
}

.collab-profile__panel {
  position: relative;
  z-index: 0;
  padding: 44px 32px 40px;
  background: #f3f5eb;
  border-radius: 0;
  display: grid;
  gap: 28px;
}

/* Profileラベル。余白は padding で確保 */
#content .collab-page h2.collab-profile__label {
  clear: none;
  margin: 0;
  padding: 0 0 18px;
  font-family: var(--collab-font-mincho);
  font-size: clamp(22px, 2.4vw, 24px);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: #231815;
}

#content .collab-page .collab-profile__name {
  margin: 0 0 8px;
  font-family: var(--collab-font-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #231815;
}

#content .collab-page .collab-profile__role {
  margin: 0 0 18px;
  font-family: var(--collab-font-sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #231815;
}

#content .collab-page .collab-profile__bio {
  margin: 0;
  padding: 0;
  font-family: var(--collab-font-sans);
  font-size: 15px;
  line-height: 1.8;
  color: #231815;
}

#content .collab-page .collab-profile__bio p {
  margin: 0;
  color: #231815;
}

#content .collab-page p.collab-profile__link {
  margin: 0;
  padding: 18px 0 0;
  font-family: var(--collab-font-sans);
  font-size: 15px;
  line-height: 1.8;
  color: #231815;
}

#content .collab-page .collab-profile__link a {
  color: #29abe2;
  text-decoration: none;
  word-break: break-all;
}

#content .collab-page .collab-profile__link a:hover {
  text-decoration: underline;
  color: #29abe2;
}

.collab-profile__art {
  margin: 0;
  width: 100%;
}

.collab-profile__art img {
  width: 100%;
  max-width: 332px;
  height: auto;
  display: block;
}

@media screen and (min-width: 961px) {
  .collab-profile {
    padding: 0 var(--collab-pad) 0;
  }

  /* Profileクリーム帯（角丸なし）。文字上端・左右の余白を確保 */
  .collab-profile__panel {
    grid-template-columns: minmax(0, 557px) 332px;
    gap: 45px;
    align-items: start;
    justify-content: space-between;
    padding: 45px 54px 45px;
    min-height: 336px;
    background: transparent;
    border-radius: 0;
  }

  .collab-profile__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #f3f5eb;
    z-index: -1;
    pointer-events: none;
  }

  /* Profileラベル（Zen Old Mincho）・ラベル下余白 */
  #content .collab-page h2.collab-profile__label {
    font-size: 23px;
    line-height: 1.2;
    padding-bottom: 22px;
  }

  /* 氏名（Bold）+ 肩書（Regular）を1行 */
  #content .collab-page .collab-profile__name,
  #content .collab-page .collab-profile__role {
    display: inline;
    margin: 0;
    padding: 0;
    letter-spacing: 0.02em;
    line-height: 1.4;
    color: #231815;
  }

  #content .collab-page .collab-profile__name {
    font-family: var(--collab-font-sans);
    font-size: 19px;
    font-weight: 700;
    margin-right: 0.15em;
  }

  #content .collab-page .collab-profile__role {
    font-size: 15px;
    font-weight: 400;
  }

  /* 氏名下余白・本文サイズ・行間 */
  #content .collab-page .collab-profile__bio {
    margin: 0;
    padding: 12px 0 0;
    font-size: 15px;
    line-height: 1.82;
    color: #231815;
  }

  /* 本文末〜リンクの余白・1行表示 */
  #content .collab-page p.collab-profile__link {
    margin: 0;
    padding: 13px 0 0;
    font-size: 15px;
    line-height: 1.4;
    color: #231815;
  }

  #content .collab-page .collab-profile__link br {
    display: none;
  }

  .collab-profile__art {
    max-width: 332px;
    justify-self: end;
    /* アート上端の位置調整 */
    margin-top: 8px;
  }
}

/* ---------- Campaign ---------- */
.collab-campaign {
  padding: 16px var(--collab-pad) 36px;
  background: #fff;
  overflow: visible;
}

.collab-campaign__panel {
  position: relative;
  z-index: 0;
  padding: 44px 32px;
  background: #f3f5eb;
  border-radius: 0;
  display: grid;
  gap: 28px;
  align-items: center;
}

.collab-inline-shot {
  display: none;
  margin: 0;
}

.collab-inline-shot img {
  width: 100%;
  height: auto;
  display: block;
}

.collab-campaign__logo {
  margin: 0 0 14px;
}

.collab-campaign__logo img {
  width: min(217px, 58vw);
  height: auto;
  display: block;
}

.collab-campaign__title {
  margin: 0 0 14px;
  font-family: var(--collab-font-mincho);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #231815;
}

.content .collab-page .collab-campaign__period,
.content .collab-page .collab-campaign__desc {
  margin: 0 0 12px;
  font-size: 14px;
  color: #231815;
  line-height: 1.9;
}

/* 応募期間下の点線 */
.content .collab-page .collab-campaign__period {
  position: relative;
  margin-bottom: 14px;
}

.content .collab-page .collab-campaign__period::after {
  content: "";
  display: block;
  width: min(490px, 100%);
  height: 2px;
  margin-top: 9px;
  background: url("../img/line-campaign-period.svg") no-repeat left center;
  background-size: 100% 2px;
}

.collab-campaign__cta,
.content .collab-page a.collab-campaign__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 219px;
  min-width: 219px;
  height: 42px;
  min-height: 42px;
  margin-top: 18px;
  padding: 0 16px;
  /* CTAボタンの角丸・塗り */
  border-radius: 3px;
  border: 0;
  background: var(--collab-cta);
  color: var(--collab-cta-text);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
}

.content .collab-page a.collab-campaign__cta:hover,
.content .collab-page a.collab-campaign__cta:focus {
  color: var(--collab-cta-text);
  text-decoration: none;
  opacity: 0.92;
}

.collab-campaign__item {
  margin: 0 auto;
  width: min(377px, 100%);
  max-width: 377px;
}

.collab-campaign__item img {
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (min-width: 961px) {
  .collab-campaign {
    /* Profile〜Campaignのクリーム間隔。
       エコバッグ下端 ≈ バナー上端（余分な白帯を作らない） */
    padding: 47px var(--collab-pad) 0;
    overflow: visible;
  }

  /* Campaignクリーム帯。エコバッグは上下にはみ出して配置 */
  .collab-campaign__panel {
    grid-template-columns: minmax(0, 1fr) 377px;
    grid-template-areas:
      "copy item"
      "cta item";
    padding: 29px 54px 0;
    gap: 20px 32px;
    align-items: start;
    min-height: 336px;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }

  .collab-campaign__copy {
    grid-area: copy;
    padding-top: 0;
    max-width: 520px;
    position: relative;
    z-index: 1;
  }

  .collab-campaign__cta,
  .content .collab-page a.collab-campaign__cta {
    grid-area: cta;
    align-self: start;
  }

  .collab-campaign__item {
    grid-area: item;
    /* エコバッグをクリーム上端より上へはみ出し */
    margin: -77px 0 0 auto;
    width: 377px;
    align-self: start;
    position: relative;
    z-index: 2;
  }

  .collab-campaign__panel::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    background: #f3f5eb;
    z-index: -1;
    pointer-events: none;
  }

  .collab-campaign__logo {
    margin: 0 0 18px;
  }

  .collab-campaign__title {
    font-size: 28px;
    margin-bottom: 14px;
  }

  /* Campaign見出しの太さ */
  #content .collab-page h2.collab-campaign__title {
    font-weight: 600;
  }

  .content .collab-page .collab-campaign__period {
    /* 本文まで: 点線上余白 + 線 + 下余白 */
    margin-bottom: 14px;
    font-size: 17px;
  }

  .content .collab-page .collab-campaign__period::after {
    width: 490px;
  }

  .content .collab-page .collab-campaign__desc {
    /* 説明本文はゴシック */
    font-family: var(--collab-font-sans);
    font-size: 15px;
    line-height: 2;
    margin-bottom: 0;
  }

  .collab-campaign__cta {
    margin-top: 8px;
  }
}

/* ---------- Back CTA ---------- */
/* ピカラ光・モバイル直下・中央寄せ */
.collab-back {
  padding: 36px var(--collab-pad) 28px;
  background: #fff;
}

.collab-back__wrap {
  margin: 0;
  text-align: center;
}

.collab-page a.collab-back__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 183px;
  min-width: 183px;
  height: 38px;
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 3px;
  background: #5d6970;
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  transition: background 0.25s ease;
}

.collab-page a.collab-back__btn:hover {
  background: #4a555c;
  color: #ffffff;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .collab-page .is-animate {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .collab-bg-motion.is-motion-active .collab-bg-motion__photo,
  .collab-bg-motion.is-motion-active .collab-bg-motion__mist--1,
  .collab-bg-motion.is-motion-active .collab-bg-motion__mist--2,
  .collab-bg-motion.is-motion-active .collab-bg-motion__mist--3,
  .collab-wave-mist__paint,
  .collab-wave-mist__blob--1,
  .collab-wave-mist__blob--2,
  .collab-wave-mist__blob--3 {
    animation: none;
  }

  .collab-bg-motion__svg animate {
    display: none;
  }

  .collab-bg-motion__photo {
    transform: none;
  }
}

/* ---------- SP fine tune ---------- */
@media screen and (max-width: 960px) {
  /* 波は .collab-top__wave（SP用パス）で出す */
  .collab-top {
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* concept以降の左右余白（hero除く） */
  .collab-concept,
  .collab-creators,
  .collab-feature,
  .collab-interview,
  .collab-profile,
  .collab-campaign,
  .collab-back {
    --collab-pad: clamp(24px, 6.4vw, 32px);
  }

  .collab-inline-shot {
    display: block;
    margin: 5.6vw 0 8.4vw;
  }

  .collab-pc-shot--pastels,
  .collab-interview__shot--paint,
  .collab-interview__shot--products {
    display: none;
  }

  .collab-top .collab-bg-motion__media {
    inset: 0;
  }

  /* SP: 水彩PNG下端の白い波切れ目が写真直下に来ないよう、青面を全面カバー */
  .collab-top .collab-bg-motion__photo {
    inset: -4% -6%;
    background-size: cover;
    background-position: center 18%;
  }

  .collab-top__wave {
    /* SP下端波。写真より前面に出して消えないようにする */
    position: relative;
    z-index: 5;
    height: clamp(72px, 16vw, 96px);
    margin-top: calc(clamp(72px, 16vw, 96px) * -1);
  }

  .collab-top__wave-svg--pc {
    display: block;
    /* SPだけ波の高さを少し潰して、緩やかに見せる */
    transform: scaleY(0.92);
    transform-origin: center;
  }

  .collab-top__wave-svg--sp {
    display: none;
  }

  .collab-top__wave-mask--sp {
    display: none;
  }

  .collab-top__wave-img--sp {
    display: none;
    /* 波の入っている領域を表示内へ寄せて、直線に見えないよう調整（SPのみ） */
    object-position: center 80%;
    transform: scale(1);
    transform-origin: center;
  }

  .collab-top__wave-mask-img {
    /* PNGの波成分は下端にあるため、マスク内で下寄せ */
    object-position: center bottom;
  }

  .collab-hero,
  .collab-concept,
  .collab-creators,
  .collab-feature,
  .collab-interview__block,
  .collab-interview__closing,
  .collab-profile,
  .collab-campaign,
  .collab-back {
    height: auto;
    min-height: 0;
  }

  .collab-hero {
    /* 青面〜ブランド / 写真下〜Concept の余白 */
    padding: 16px var(--collab-pad) 28px;
    text-align: left;
  }

  #content .collab-page .collab-hero__brand {
    margin: 0;
    margin-left: 0;
    padding: 0 0 18px;
    text-align: right;
  }

  #content .collab-page .collab-hero__brand img {
    /* SPブランドロゴサイズ */
    width: min(100px, 26vw);
    margin-left: auto;
  }

  .collab-hero__stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: auto;
  }

  /* SP: ロゴ → キャッチ → 写真（左寄せ） */
  .collab-hero__aside {
    order: 1;
    width: 100%;
    gap: 12px;
    justify-items: start;
    text-align: left;
  }

  .collab-hero__logo {
    /* SPキャッチ幅 */
    width: min(72%, 240px);
    margin: 0;
  }

  .collab-hero__catch {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    font-size: clamp(22px, 6.2vw, 28px);
    line-height: 1.45;
    letter-spacing: 0.04em;
    text-align: left;
    max-width: none;
    margin: 0;
  }

  .collab-hero__catch span:last-child {
    padding-left: 0.35em;
  }

  .collab-hero__visual {
    order: 2;
    /* 写真左右余白 */
    width: min(100%, 324px);
    max-width: 92%;
    margin: 8px auto 0;
  }

  .collab-concept {
    padding-top: 12px;
    /* 波が写真に隠れないよう下余白を確保 */
    padding-bottom: clamp(96px, 20vw, 120px);
  }

  .collab-concept .collab-heading {
    font-size: clamp(22px, 5.8vw, 28px);
    letter-spacing: 0.06em;
    margin-bottom: 0.9em;
  }

  /* SP本文のサイズ・行間の共通変数 */
  .collab-page {
    --sp-body-font-size: clamp(15px, 3.25vw, 24px);
    --sp-body-line-height: 2.1;
  }

  .collab-concept .collab-text,
  .collab-creators .collab-text,
  .collab-feature__lead.collab-text,
  .collab-interview__text-col .collab-text,
  .collab-interview__closing-copy .collab-text,
  #content .collab-page .collab-profile__bio,
  .content .collab-page .collab-campaign__desc {
    font-size: var(--sp-body-font-size);
    line-height: var(--sp-body-line-height);
  }

  .collab-concept .collab-text {
    font-family: var(--collab-font-mincho);
  }

  .collab-concept .collab-text p {
    margin-bottom: 1.35em;
  }

  .collab-creators {
    /* 波が見えるよう上方向に重ねる */
    margin-top: -28px;
    padding-top: 56px;
    padding-bottom: 48px;
    background: #ffffff;
    position: relative;
    z-index: 1;
    overflow-x: clip;
  }

  .collab-feature,
  .collab-interview__block,
  .collab-interview__closing {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* SP: Feature〜Interview の余白・見出し・本文サイズを画面幅に合わせて調整 */
  .collab-feature {
    padding-bottom: 0;
  }

  .collab-interview__block {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .collab-interview__block--01 {
    /* リード下〜ラベルの余白 */
    padding-top: 9.2vw;
    padding-bottom: 40px;
  }

  .collab-campaign__cta {
    width: 100%;
    min-width: 0;
    max-width: 280px;
  }

  .collab-campaign__item {
    width: min(240px, 72%);
    margin: 8px auto 0;
  }

  .collab-profile__panel,
  .collab-campaign__panel {
    border-radius: 0;
    padding: 28px 20px;
  }

  .collab-back {
    padding: 4vw var(--collab-pad) 8.8vw;
  }

  .collab-concept__inner,
  .collab-creators__inner,
  .collab-interview__grid,
  .collab-interview__closing-grid {
    min-height: 0;
    height: auto;
  }

  .collab-concept__copy,
  .collab-creators__copy,
  .collab-feature__lead,
  .collab-interview__text-col,
  .collab-interview__closing-copy {
    text-align: left;
  }

  .collab-concept .collab-heading,
  .collab-creators .collab-heading,
  .collab-interview__title {
    font-size: clamp(24px, 6vw, 30px);
  }

  .collab-concept__photos {
    /* 950px付近で width% だけの絶対配置だと写真が巨大化し本文・波に被る */
    position: relative;
    display: block;
    margin-top: 28px;
    width: 100%;
    height: clamp(240px, 50vw, 300px);
    z-index: 1;
    overflow: visible;
  }

  .collab-concept__photo--window,
  .collab-concept__photo--sea {
    position: absolute;
    margin: 0;
  }

  .collab-concept__photo--window {
    right: 0;
    top: 0;
    /* 表示幅を上限にして縦にはみ出さない */
    width: min(48%, 220px);
    z-index: 1;
  }

  .collab-concept__photo--sea {
    left: 0;
    bottom: 0;
    width: min(40%, 178px);
    z-index: 2;
  }

  .collab-creators__inner {
    position: relative;
    display: block;
    text-align: left;
  }

  .collab-creators__copy {
    position: relative;
    z-index: 1;
    text-align: left;
    max-width: none;
    padding-right: 0;
  }

  .collab-creators .collab-heading {
    font-family: var(--collab-font-mincho);
    font-size: clamp(18px, 5.2vw, 26px);
    margin-bottom: 1.1em;
    padding-right: 0;
    white-space: nowrap;
    letter-spacing: 0.02em;
  }

  .collab-creators .collab-text {
    font-family: var(--collab-font-mincho);
    /* font-size / line-height は --sp-body-* 共通ルール */
  }

  .collab-creators .collab-text p {
    margin-bottom: 1.2em;
  }

  /* SP: PC用の丸写真は隠す。本文p内のimgをfloat */
  .collab-creators__circle {
    display: none;
  }

  .collab-creators__float {
    display: block;
    float: right;
    width: min(48vw, 200px);
    height: auto;
    border-radius: 50%;
    margin: 0 -4vw 3vw 4vw;
  }

  .collab-creators .collab-text::after {
    content: "";
    display: block;
    clear: both;
  }

  .collab-feature__top {
    /* 縦並び（写真下の余分な余白を避ける） */
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* 写真がミントに重なる */
    margin-bottom: 0;
  }

  .collab-feature__photo {
    width: 100%;
    max-width: none;
    flex: none;
    position: relative;
    z-index: 2;
    /* 写真下の余分な余白を消し、ミントとの重なりを確保 */
    margin-bottom: calc(-18px - 3.93vw);
  }

  .collab-feature__brand {
    /* ロゴ左 + #01 右横 */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 10px 16px;
    width: 100%;
    justify-items: unset;
  }

  .collab-feature__logo {
    width: min(220px, 58vw);
    margin: 0;
  }

  .content .collab-page .collab-feature__num {
    /* COLLABロゴの文字ラインに揃える */
    margin: 0 0 14px;
    font-size: 36px;
    line-height: 0.85;
    align-self: flex-end;
  }

  .collab-feature__body {
    padding-top: 0;
  }

  /* SP Feature: 写真がミントに重なり、タイトル・本文は帯内の余白で配置 */
  .collab-feature__title-wrap {
    /* 重なりは photo の負マージン側で確保 */
    margin: 0 0 5.87vw;
    padding: 10.27vw 4px 8.24vw;
  }

  .collab-feature__title {
    /* 見出しサイズ・行間 */
    font-size: clamp(18px, 5.09vw, 38px);
    line-height: 1.78;
    max-width: none;
  }

  .collab-feature__title-wrap::before {
    display: block;
    left: calc(-1 * var(--collab-pad));
    right: auto;
    width: calc(100% + 2 * var(--collab-pad));
    top: 0;
    aspect-ratio: 749.588 / 261.521;
    height: auto;
    min-height: 0;
    z-index: 0;
    background-color: #e8f3f1;
    background-image: url("../img/bg-feature-mint-wave-sp.png");
    background-size: 100% 100%;
    background-position: center;
    -webkit-mask-image: url("../img/mask-feature-mint-sp.svg");
    mask-image: url("../img/mask-feature-mint-sp.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    border-radius: 0;
    opacity: 1;
  }

  .collab-feature__title-wrap > .collab-wave-mist {
    left: calc(-1 * var(--collab-pad));
    width: calc(100% + 2 * var(--collab-pad));
    aspect-ratio: 749.588 / 261.521;
    height: auto;
    -webkit-mask-image: url("../img/mask-feature-mint-sp.svg");
    mask-image: url("../img/mask-feature-mint-sp.svg");
  }

  .collab-feature__title-wrap > .collab-wave-mist .collab-wave-mist__paint {
    background-image: url("../img/bg-feature-mint-wave-sp.png");
  }

  .collab-feature__brand::before {
    display: none;
  }

  /* SP Interview: 本文 → 写真の順 */
  .collab-interview__grid,
  .collab-interview__grid--reverse,
  .collab-interview__closing-grid {
    display: flex;
    flex-direction: column;
    /* 余分な行間を避ける */
    gap: 0;
  }

  .collab-interview__text-col,
  .collab-interview__closing-copy {
    order: 1;
  }

  .collab-interview__media-col,
  .collab-interview__closing-photo {
    order: 2;
    margin-top: 28px;
  }

  .collab-interview__media-col--stack,
  .collab-interview__media-col--stagger {
    width: 100%;
    /* 余分な下余白を避ける */
    gap: 0;
  }

  .collab-interview__media-col--stack > figure:not(:last-child),
  .collab-interview__media-col--stagger > .collab-interview__shot:not(:last-child) {
    /* 写真間隔 */
    margin-bottom: 8.4vw;
  }

  /* SP Interview: 写真3枚は同サイズ・同じ左端。PCの absolute スタッガーは使わない */
  .collab-interview__media-col--stagger {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: 0;
  }

  .collab-interview__media-col--stagger .collab-interview__shot {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .collab-interview__media-col--stagger .collab-interview__shot--paint,
  .collab-interview__media-col--stagger .collab-interview__shot--products,
  .collab-interview__media-col--stagger .collab-interview__shot--hold {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .collab-interview__media-col--stack {
    display: flex;
    flex-direction: column;
  }

  .collab-interview__media-col--stack figure {
    width: 100%;
    margin: 0;
  }

  /* Interviewラベルサイズ */
  .content .collab-page .collab-interview__label {
    width: 23.85vw;
    min-width: 90px;
    max-width: 180px;
    height: 7.08vw;
    min-height: 28px;
    max-height: 53px;
    margin: 0 0 3.73vw;
    font-size: clamp(12px, 3.2vw, 16px);
  }

  /* SP: Concept / Creators 見出しの太さ */
  #content .collab-page .collab-concept .collab-heading,
  #content .collab-page .collab-creators .collab-heading {
    font-weight: 700;
  }

  /* SP interview 見出し共通：本文より明確に大きく・太く */
  .content .collab-page .collab-interview__block--01 .collab-interview__title,
  .content .collab-page .collab-interview__block--02 .collab-interview__title,
  .content .collab-page .collab-interview__closing-copy .collab-interview__title {
    margin: 0 0 5.07vw;
    font-size: clamp(20px, 5.1vw, 38px);
    font-weight: 600;
    line-height: 1.82;
    white-space: normal;
  }

  .collab-interview__title-wrap {
    padding: 24px 4px 44px;
    margin-bottom: 4px;
  }

  .collab-interview__title-wrap::before {
    left: calc(-1 * var(--collab-pad));
    transform: none;
    width: calc(100% + 2 * var(--collab-pad));
    min-height: 0;
  }

  /* SP Interview #02: ミント帯はPCより低め。波が文字に食い込まない余白 */
  .collab-interview__block--02 .collab-interview__title-wrap {
    box-sizing: border-box;
    padding: 5.92vw 0 8.4vw;
    margin: 0 0 5.07vw;
    min-height: 0;
  }

  .collab-interview__block--02 .collab-interview__title-wrap::before {
    display: block;
    top: 0;
    left: calc(-1 * var(--collab-pad));
    right: auto;
    width: calc(100% + 2 * var(--collab-pad));
    /* タイトル＋上下余白に合わせて伸ばし、波が文字に食い込まないようにする */
    height: 100%;
    aspect-ratio: auto;
    min-height: 0;
    background-color: #e8f3f1;
    background-image: url("../img/bg-interview-mint-wave-sp.png");
    background-size: 100% 100%;
    background-position: center;
    -webkit-mask-image: url("../img/mask-interview-mint-sp.svg");
    mask-image: url("../img/mask-interview-mint-sp.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .collab-interview__block--02 .collab-interview__title-wrap > .collab-wave-mist {
    top: 0;
    left: calc(-1 * var(--collab-pad));
    width: calc(100% + 2 * var(--collab-pad));
    height: 100%;
    aspect-ratio: auto;
    -webkit-mask-image: url("../img/mask-interview-mint-sp.svg");
    mask-image: url("../img/mask-interview-mint-sp.svg");
  }

  .collab-interview__block--02 .collab-wave-mist .collab-wave-mist__paint {
    background-image: url("../img/bg-interview-mint-wave-sp.png");
  }

  .content .collab-page .collab-interview__block--02 .collab-interview__title {
    /* #02 / Closing 同サイズ・同行間。下余白は title-wrap の padding-bottom */
    margin-bottom: 0;
  }

  /* #02最終写真下端 → Closingミントの余白 */
  .collab-interview__block--02 {
    padding-bottom: 0;
  }

  .collab-interview__closing {
    padding-top: 14.8vw;
    padding-bottom: 40px;
  }

  /* SP Closing: ミント帯内にタイトルを配置 */
  .collab-interview__closing-copy .collab-interview__title-wrap {
    box-sizing: border-box;
    padding: 12vw 0 9.12vw;
    margin: 0 0 7vw;
    min-height: 0;
  }

  .collab-interview__closing-copy .collab-interview__title-wrap::before {
    display: block;
    content: "";
    top: 0;
    left: calc(-1 * var(--collab-pad));
    right: auto;
    width: calc(100% + 2 * var(--collab-pad));
    height: 100%;
    aspect-ratio: auto;
    min-height: 0;
    z-index: 0;
    background-color: #e8f3f1;
    background-image: url("../img/bg-closing-mint-wave-sp.png");
    background-size: 100% 100%;
    background-position: center;
    -webkit-mask-image: url("../img/mask-closing-mint-sp.svg");
    mask-image: url("../img/mask-closing-mint-sp.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .collab-interview__closing-copy .collab-interview__title-wrap > .collab-wave-mist {
    top: 0;
    left: calc(-1 * var(--collab-pad));
    width: calc(100% + 2 * var(--collab-pad));
    height: 100%;
    aspect-ratio: auto;
    -webkit-mask-image: url("../img/mask-closing-mint-sp.svg");
    mask-image: url("../img/mask-closing-mint-sp.svg");
  }

  .collab-interview__closing-copy .collab-wave-mist .collab-wave-mist__paint {
    background-image: url("../img/bg-closing-mint-wave-sp.png");
  }

  .content .collab-page .collab-interview__closing-copy .collab-interview__title {
    /* サイズ・行間は #01/#02 と共通ルール。下余白は title-wrap */
    margin-bottom: 0;
  }

  /* 段落間の追加余白なし（サイズ・行間は --sp-body-*） */
  .collab-interview__text-col .collab-text,
  .collab-interview__closing-copy .collab-text {
    font-family: var(--collab-font-mincho);
  }

  .content .collab-page .collab-interview__text-col .collab-text p,
  .content .collab-page .collab-interview__closing-copy .collab-text p {
    margin: 0;
  }

  /* リード（サイズ・行間は --sp-body-*） */
  .collab-feature__lead.collab-text {
    font-family: var(--collab-font-mincho);
    max-width: none;
  }

  .collab-feature__body {
    padding-bottom: 0;
  }

  .collab-profile__panel,
  .collab-campaign__panel {
    background: #f3f5eb;
  }

  /* SP Profile: ラベルはクリーム上端より上にはみ出し。左右・下の余白を確保 */
  .collab-profile {
    padding: 20px var(--collab-pad) 20px;
    overflow: visible;
  }

  .collab-profile__panel {
    grid-template-columns: 1fr;
    position: relative;
    z-index: 0;
    margin-top: 3.51vw;
    padding: 0 8.5vw 36px;
    border-radius: 0;
    gap: 24px;
    background: transparent;
  }

  .collab-profile__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #f3f5eb;
    pointer-events: none;
  }

  #content .collab-page h2.collab-profile__label {
    margin: 0;
    padding: 4vw 0 4vw;
    font-size: clamp(20px, 4.2vw, 32px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.02em;
  }

  #content .collab-page .collab-profile__name {
    display: block;
    margin: 0 0 2.4vw;
    font-size: clamp(15px, 2.27vw, 18px);
  }

  #content .collab-page .collab-profile__role {
    display: block;
    margin: 0 0 4vw;
    font-size: clamp(13px, 1.87vw, 15px);
  }

  /* サイン右寄せ */
  .collab-interview__sign {
    margin: 1.2vw 0 0;
    text-align: right;
  }

  .collab-interview__sign img {
    width: min(47.5vw, 240px);
    max-width: 356px;
  }

  .collab-profile__art {
    order: 2;
  }

  .collab-profile__art img {
    max-width: 100%;
    margin-inline: auto;
  }

  /* SP Campaign: タイトル2行・期間・本文サイズ、CTAとエコバッグはほぼ密着 */
  .collab-campaign {
    padding: 20px var(--collab-pad) 28px;
    overflow: visible;
  }

  .collab-campaign__panel {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 6.53vw 8.5vw clamp(24px, 6.5vw, 32px);
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }

  .collab-campaign__panel::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: #f3f5eb;
    pointer-events: none;
  }

  .collab-campaign__copy {
    position: relative;
    z-index: 1;
    max-width: none;
  }

  /* ロゴ下端〜タイトルの余白 */
  .content .collab-page p.collab-campaign__logo {
    margin: 0 0 5.07vw;
  }

  .collab-campaign__logo img {
    width: min(49.2vw, 280px);
  }

  #content .collab-page .collab-campaign__title,
  .collab-campaign__title {
    margin: 0 0 2.85vw;
    /* タイトルが折り返さないサイズ */
    font-size: clamp(18px, 5.18vw, 39px);
    line-height: 1.51;
    letter-spacing: 0.04em;
  }

  .content .collab-page .collab-campaign__period {
    margin: 0 0 3.2vw;
    font-family: var(--collab-font-sans);
    /* 期間表記のサイズ（点線幅とのバランス） */
    font-size: clamp(14px, 3.06vw, 23px);
    line-height: 2.19;
  }

  .content .collab-page .collab-campaign__period::after {
    width: 100%;
    margin-top: 2vw;
  }

  .content .collab-page .collab-campaign__desc {
    margin: 0 0 4vw;
    font-family: var(--collab-font-sans);
    /* font-size / line-height は --sp-body-* 共通ルール */
  }

  .collab-campaign__cta,
  .content .collab-page a.collab-campaign__cta {
    display: flex;
    width: min(65.1vw, 100%);
    min-width: 0;
    max-width: 488px;
    height: auto;
    min-height: 12.3vw;
    margin-top: 5.87vw;
    margin-left: auto;
    margin-right: auto;
    padding: 3.2vw 4vw;
    font-size: clamp(13px, 2.4vw, 18px);
  }

  .collab-campaign__item {
    position: relative;
    z-index: 2;
    width: min(52.7vw, 395px);
    max-width: 395px;
    /* エコバッグ＋丸はクリーム内で中央寄せ */
    margin: 0.4vw auto 0;
    align-self: center;
  }

  /* SPフッター: ピカラ光〜モバイルは狭め、モバイル下〜TOPボタンの余白 */
  .content .collab-page .life-common-footer {
    padding: 5vw 5vw 0;
  }

  .content .collab-page .life-common-footer p {
    margin-right: 0;
    margin-bottom: 2.7vw;
  }

  .content .collab-page .life-common-footer p:last-child {
    margin-bottom: 0;
  }

  .collab-back {
    padding: 4vw var(--collab-pad) 8.8vw;
  }

  .collab-page a.collab-back__btn {
    width: min(56.1vw, 421px);
    min-width: 0;
    height: auto;
    min-height: 11.52vw;
    padding: 2.8vw 4vw;
    font-size: clamp(14px, 4.13vw, 31px);
  }
}