/* ===== ファーストビュー：左半分に縦長の大きな1枚、右半分に小さな3枚を組み、右下から広がるように現れる。
   中央（左右の写真の境目）に縦書きの言葉 ===== */
.fv { position: relative; overflow: hidden; background: var(--pale); }
.fv__img {
  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid-template-rows: 40.7% 59.3%;
  aspect-ratio: 16 / 9;
  -webkit-mask-image: radial-gradient(circle farthest-corner at 100% 100%, #000 60%, transparent 90%);
  mask-image: radial-gradient(circle farthest-corner at 100% 100%, #000 60%, transparent 90%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}
.js .fv__img { animation: fv-in 2s forwards; }
@keyframes fv-in {
  from { -webkit-mask-position: -100% 0; mask-position: -100% 0; }
  to { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
.fv__p { position: relative; overflow: hidden; }
.fv__p img { width: 100%; height: 100%; object-fit: cover; }
.fv__p1 { grid-column: 2 / 4; grid-row: 1; }
.fv__p2 { grid-column: 3; grid-row: 2; }
.fv__p3 { grid-column: 2; grid-row: 2; }
.fv__p4 { grid-column: 1; grid-row: 1 / 3; }
.fv__p1 img { object-position: 50% 60%; }
/* 大きな1枚は左右を反転し、人物が中央の言葉と右の写真の方を向くようにする（スマホは反転しない） */
.fv__p4 img { object-position: 50% 40%; transform: scaleX(-1); }
/* 縦書きの言葉の下だけ、写真をわずかに沈めて白い文字を読みやすく */
.fv__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 18% 46% at 50% 46%, rgba(8, 56, 72, 0.34), rgba(8, 56, 72, 0) 100%);
  pointer-events: none;
}
.fv__img { position: relative; }

.fv__copy {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: row-reverse;
  gap: 0.9em;
  translate: -50% -50%;
  color: #fff;
  font-family: var(--ff);
  font-size: clamp(1.375rem, 0.7rem + 1.45vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 0 2px rgba(8, 56, 72, 0.35), 0 0 18px rgba(8, 56, 72, 0.45);
}
.fv__copy span { writing-mode: vertical-rl; }
.fv__copy span:last-child { padding-top: 2.4em; }
.js .fv__copy { opacity: 0; transition: opacity 1.5s ease; }
.js .fv.is-text .fv__copy { opacity: 1; }


@media (prefers-reduced-motion: reduce) {
  .js .fv__img { animation: none; }
  .js .fv__copy { opacity: 1; clip-path: none; transition: none; animation: none; }
}

/* スマホ：画面の高さいっぱい。上に横長の1枚、下は左に大きく1枚・右に縦長2枚 */
@media (max-width: 40.625rem) {
  .fv { height: calc(100svh - var(--band)); min-height: 560px; max-height: 900px; }
  .fv__img { height: 100%; aspect-ratio: auto; grid-template-columns: 50% 50%; grid-template-rows: 21.5% 39.25% 39.25%; }
  .fv__p1 { grid-column: 1 / 3; grid-row: 1; }
  .fv__p2 { grid-column: 2; grid-row: 2; }
  .fv__p3 { grid-column: 2; grid-row: 3; }
  .fv__p4 { grid-column: 1; grid-row: 2 / 4; }
  .fv__p4 img { object-position: 60% 50%; transform: none; }
  .fv__img::after { background: radial-gradient(ellipse 40% 34% at 50% 52%, rgba(8, 56, 72, 0.4), rgba(8, 56, 72, 0) 100%); }
  .fv__copy { top: 52%; font-size: 1.5rem; }
}