/* MV試作：集合写真の切り抜き ＋ 背景に制作物カードが流れる（2026-10-07・ローカル検証用） */

/* 既存MVの要素を外す（風車＝新舞子のシンボルは残す） */
.brand-mv .brand-coast,
.brand-mv .mv-local-background{display:none}
/* 風車：右上に小さく。人物（z2）の後ろ、背景（z0）の前 */
.brand-mv .turbine{left:83.8%;top:3%;width:10.5%;z-index:1;opacity:.95}

/* 背景の流れ（3列） */
.brand-mv .flow{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.brand-mv .flow::after{
  /* 左側のコピーの可読性確保 ＋ 全体を少し紙色に沈める */
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--paper) 0%,var(--paper) 30%,rgba(253,251,247,.6) 48%,rgba(253,251,247,.08) 70%,rgba(253,251,247,0) 100%),
    linear-gradient(180deg,rgba(253,251,247,.55) 0%,rgba(253,251,247,0) 18%,rgba(253,251,247,0) 82%,rgba(253,251,247,.55) 100%);
}
.brand-mv .flow-row{
  position:absolute;left:-12%;width:124%;display:flex;gap:1.6cqw;
  transform:rotate(-5deg);
}
.brand-mv .flow-row:nth-child(1){top:4%}
.brand-mv .flow-row:nth-child(2){top:38%}
.brand-mv .flow-row:nth-child(3){top:72%}
.brand-mv .flow-track{display:flex;gap:1.6cqw;flex:none;animation:mvFlow var(--dur,60s) linear infinite}
.brand-mv .flow-row.reverse .flow-track{animation-direction:reverse}
.brand-mv .flow-card{
  flex:none;height:14cqw;border-radius:6px;overflow:hidden;background:#fff;
  box-shadow:0 10px 30px rgba(12,36,63,.14);opacity:.55;
}
.brand-mv .flow-card.sp{height:16cqw}
.brand-mv .flow-card img{height:100%;width:auto;display:block}
@keyframes mvFlow{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 動画背景版：CSSの流れの代わりに書き出した動画を敷く（フェードは同じ ::after を重ねる） */
.brand-mv .flow-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;opacity:.6}

/* 集合写真（切り抜き） */
.brand-mv .team{
  position:absolute;z-index:2;right:2%;top:14%;bottom:auto;width:43%;
  display:flex;align-items:flex-end;justify-content:center;pointer-events:none;
}
.brand-mv .team::before{
  /* 床の影 */
  content:"";position:absolute;left:8%;right:8%;bottom:-1.2cqw;height:5cqw;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(12,36,63,.16),rgba(12,36,63,0) 70%);
  filter:blur(8px);
}
.brand-mv .team img{
  position:relative;width:100%;height:auto;filter:drop-shadow(0 14px 24px rgba(12,36,63,.14));
  /* 足先を紙色になじませる */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 88%,rgba(0,0,0,.55) 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 88%,rgba(0,0,0,.55) 100%);
}

/* コピー側：上の余白が空きすぎるので開始位置を上げる */
.brand-mv .copy{top:19%}

@media(max-width:760px){
  .brand-mv .stage{display:flex;flex-direction:column}
  .brand-mv .flow{position:absolute}
  .brand-mv .flow::after{background:linear-gradient(180deg,var(--paper) 0%,rgba(253,251,247,.45) 40%,rgba(253,251,247,.1) 70%,rgba(253,251,247,.5) 100%)}
  .brand-mv .flow-card{height:26cqw}
  .brand-mv .flow-card.sp{height:30cqw}
  .brand-mv .team{position:relative;right:auto;bottom:auto;width:100%;margin-top:18px;padding:0 3%}
  .brand-mv .team::before{bottom:-2cqw;height:8cqw}
  .brand-mv .copy{top:auto}
  /* スマホの風車：集合写真の右上に小さく */
  .brand-mv .turbine{top:auto;bottom:44cqw;left:auto;right:4%;width:15%;z-index:1;opacity:.95}
}
@media(prefers-reduced-motion:reduce){.brand-mv .flow-track{animation:none}}