/* =========================================================================
   MISSION の2枚の写真（2026-09-26 採用）
   普通の四角い写真2枚を、最初は重ねておき、画面に入ると「シュッ、シュッ」と2拍で扇形に開く。
   ========================================================================= */
.mfan.mission__photo { position: relative; overflow: visible; aspect-ratio: 16 / 10; }
.mfan__card {
  position: absolute; margin: 0; overflow: hidden;
  box-shadow: 0 26px 42px -20px rgba(10, 10, 10, 0.6);
  transform-origin: 50% 125%;
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.1, 1);
  will-change: transform;
}
.mfan__card img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
/* 開いた位置（最終形） */
.mfan__card--a { left: 0; top: 8%; width: 64%; aspect-ratio: 4 / 3; z-index: 1; transform: rotate(-5deg); }
.mfan__card--b { left: 46%; top: 20%; width: 50%; aspect-ratio: 4 / 3; z-index: 2; transform: rotate(4deg); transition-delay: 0.14s; }
/* はじまり：2枚がくっついて重なっている */
.js .mfan:not(.is-fanned) .mfan__card--a { transform: translate3d(14%, 4%, 0) rotate(0deg); }
.js .mfan:not(.is-fanned) .mfan__card--b { transform: translate3d(-62%, -8%, 0) rotate(0deg); }
.js .mfan:not(.is-fanned) .mfan__card { transition-delay: 0s; }
/* スマホ：横幅いっぱいで同じ動き */
@media (max-width: 899px) {
  .mfan.mission__photo { aspect-ratio: 10 / 9; }
  .mfan__card--a { width: 78%; top: 4%; }
  .mfan__card--b { width: 62%; left: 36%; top: 36%; }
  .js .mfan:not(.is-fanned) .mfan__card--a { transform: translate3d(10%, 10%, 0) rotate(0deg); }
  .js .mfan:not(.is-fanned) .mfan__card--b { transform: translate3d(-40%, -20%, 0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mfan__card { transition: none; }
}
@media (max-width: 899px) {
  .mission__body { margin-top: 5vh; } /* 以前の小さな写真の重ね置き用の余白をやめる */
}