/* ==========================================================================
   FV（ファーストビュー）
   ========================================================================== */
.fv {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: calc(var(--header-height) + 4rem) 1.5rem 4rem;
    background: var(--color-navy);
    overflow: hidden;
    opacity: 1;
    transform: none;
}

/* コートライン装飾（FV内 — 横向きサッカーコート） */
.fv__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.fv__court {
    --cl: rgba(255, 255, 255, 0.10);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 88%;
    max-width: 1140px;
    aspect-ratio: 105 / 68;
}

/* 外枠 */
.fv__court-outline {
    position: absolute;
    inset: 0;
    border: 1px solid var(--cl);
}

/* ハーフウェイライン */
.fv__court-halfway {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--cl);
}

/* センターサークル */
.fv__court-center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 17.4%;
    aspect-ratio: 1;
    border: 1px solid var(--cl);
    border-radius: 50%;
}

/* センターマーク */
.fv__court-center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    background: var(--cl);
    border-radius: 50%;
}

/* ペナルティエリア */
.fv__court-penalty {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 15.7%;
    height: 59.3%;
    border: 1px solid var(--cl);
}

.fv__court-penalty--left {
    left: 0;
    border-left: none;
}

.fv__court-penalty--right {
    right: 0;
    border-right: none;
}

/* ゴールエリア */
.fv__court-goal-area {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 5.2%;
    height: 27%;
    border: 1px solid var(--cl);
}

.fv__court-goal-area--left {
    left: 0;
    border-left: none;
}

.fv__court-goal-area--right {
    right: 0;
    border-right: none;
}

/* ペナルティアーク — clip-pathで半円のみ表示 */
.fv__court-arc {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 17.4%;
    aspect-ratio: 1;
    border: 1px solid var(--cl);
    border-radius: 50%;
}

.fv__court-arc--left {
    left: 6%;
    clip-path: inset(0 0 0 56%);
}

.fv__court-arc--right {
    right: 6%;
    clip-path: inset(0 56% 0 0);
}

/* ゴール */
.fv__court-goal {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5%;
    height: 11%;
    border: 1px solid var(--cl);
}

.fv__court-goal--left {
    right: 100%;
    border-right: none;
}

.fv__court-goal--right {
    left: 100%;
    border-left: none;
}

/* ペナルティマーク */
.fv__court-pk-dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    background: var(--cl);
    border-radius: 50%;
}

.fv__court-pk-dot--left {
    left: 10.5%;
}

.fv__court-pk-dot--right {
    left: 89.5%;
}

/* コーナーアーク */
.fv__court-corner {
    position: absolute;
    width: 1.8%;
    aspect-ratio: 1;
    border: 1px solid var(--cl);
    border-radius: 50%;
}

.fv__court-corner--tl {
    top: 0;
    left: 0;
    clip-path: inset(50% 0 0 50%);
}

.fv__court-corner--tr {
    top: 0;
    right: 0;
    clip-path: inset(50% 50% 0 0);
}

.fv__court-corner--bl {
    bottom: 0;
    left: 0;
    clip-path: inset(0 0 50% 50%);
}

.fv__court-corner--br {
    bottom: 0;
    right: 0;
    clip-path: inset(0 50% 50% 0);
}

/* FV下部の横ライン */
.fv::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-line-on-dark);
}

.fv__inner {
    position: relative;
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

.fv__content {
    flex: 1;
    color: var(--color-white);
}

/* デバイスモックアップ */
.fv__devices {
    flex: 0 0 clamp(480px, 48%, 620px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fv__devices--sp-only {
    display: none;
}

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

/* FV テキスト順次フェードインアニメーション */
.fv__anim {
    opacity: 0;
    transform: translateY(20px);
    animation: fvFadeIn 0.7s ease forwards;
}

.fv__anim--1 { animation-delay: 0.2s; }
.fv__anim--2 { animation-delay: 0.45s; }
.fv__anim--3 { animation-delay: 0.65s; }
.fv__anim--4 { animation-delay: 0.85s; }
.fv__anim--5 { animation-delay: 1.05s; }
.fv__anim--devices { animation-delay: 0.7s; }

@keyframes fvFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fv__catch-sub {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-green-light);
    letter-spacing: 0.15em;
    margin-bottom: 1.5rem;
}

.fv__catch-sub-line {
    display: inline-block;
    width: 30px;
    height: 1px;
    background: var(--color-green-light);
    opacity: 0.6;
}

.fv__catch {
    font-size: 3.2rem;
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 1.5rem;
    letter-spacing: 0.02em;
}

.fv__catch-accent {
    color: var(--color-green);
    font-size: 1.3em;
}

.fv__desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
    line-height: 2;
}

.fv__desc-line {
    display: block;
}

.fv__badges {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.fv__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-green);
    padding: 0.4rem 0;
    letter-spacing: 0.05em;
}

.fv__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.fv__actions .btn--outline {
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.3);
}

.fv__actions .btn--outline:hover {
    background: var(--color-white);
    color: var(--color-navy);
    border-color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

.fv__actions .btn--outline:active {
    transform: scale(0.98) translateY(0);
    box-shadow: none;
}

/* スクロールヒント */
.fv__scroll-hint {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-en);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
}

.fv__scroll-line {
    width: 1px;
    height: 50px;
    background: rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
}

.fv__scroll-line::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background: var(--color-green-light);
    border-radius: 50%;
    animation: scrollDot 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes scrollDot {
    0% { top: -6px; opacity: 1; }
    70% { top: 50px; opacity: 1; }
    100% { top: 50px; opacity: 0; }
}