@charset 'UTF-8';



/*
FV
================================================ */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== ファーストビュー ===== */
.fv {
    --fv-ratio: 16 / 10;
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    place-items: center;
    padding: clamp(24px, 6vh, 56px) 5vw;
    overflow: clip;
}

.fv::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../images/fv.png") no-repeat center / cover;
    opacity: 0;
    animation: fvBgIn .9s ease forwards;
    animation-delay: .2s;
}

@keyframes fvBgIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fv-logo {
    width: clamp(300px, 30vw, 490px);
    height: auto;
    z-index: 1000;
}

@media (min-width: 768px) {
    .fv-logo {
        width: clamp(300px, 30vw, 700px);
    }
}

@media (min-width: 1024px) {
    .fv-logo {
        width: clamp(320px, 25vw, 400px);
    }
}


.fv-scroll {
    align-self: end;
    width: clamp(28px, 8vw, 56px);
    margin-top: clamp(12px, 2vh, 24px);
}


@media (min-width: 768px) {
    .fv {
        aspect-ratio: auto;
        min-height: clamp(560px, 100svh, 820px);
        padding-block: clamp(32px, 8vh, 72px);
    }

    .fv-scroll {
        width: clamp(32px, 4vw, 64px);
    }
}


.fv-scroll {
    opacity: 0;
    animation: fvScrollIn .9s ease forwards;
    animation-delay: 1.8s;
}

@keyframes fvScrollIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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


@media (prefers-reduced-motion: reduce) {
    .fv-scroll {
        animation: none;
        opacity: 1;
    }
}


/* ===== FV 基本 ===== */
.fv {
    position: relative;
    background: url("images/fv.png") center/cover no-repeat;
    isolation: isolate;
}


@media (max-width: 600px) {

    .fv::before {
        background-image: url("../images/sp-fv.png");
    }

    .fv {
        background-image: url("images/sp-fv.png");
    }
}



.fv-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: clamp(16px, 4vw, 48px);
}


.fv-copy {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 16px;
    padding: clamp(16px, 3vw, 28px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
    margin-top: 1rem;
}

.fv-title {
    margin: 0 0 .4em;
    line-height: 1.35;
    font-size: clamp(1.6rem, 4.4vw, 2.6rem);
    color: #17212a;
    font-family: var(--ff-hand);
    text-align: center;
}

.fv-sub {
    margin: 0;
    color: #4b5560;
    line-height: 1.9;
    font-size: clamp(1rem, 2.2vw, 1.125rem);
}

.fv-media {
    width: 100%;
}

.logo-video {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin-inline: auto;
    border-radius: 14px;
}



/* ===== レスポンシブ ===== */
@media (max-width: 960px) {
    .fv-inner {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
    }

    .fv-media {
        order: -1;
    }

    .logo-video {
        max-width: 680px;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 520px) {
    .fv-copy {
        border-radius: 12px;
    }

    .logo-video {
        border-radius: 12px;
    }
}

/* 動画が苦手な環境への配慮（省エネ） */
@media (prefers-reduced-motion: reduce) {
    .logo-video {
        opacity: .9
    }
}



/*
GRID
================================================ */
.grid {
    width: 94vw;
    margin: 0 auto 3vw;
    display: grid;
    gap: 2vw;
    grid-template-columns: repeat(2, 46vw);
    grid-template-rows: repeat(8, 46vw);
}

.grid-item {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(100%);
}


.grid-first {
    grid-column: 1/3;
    grid-row: 1/2;

}

.grid-secound {
    grid-column: 1/3;
    grid-row: 2/3;
}


.grid-third {
    grid-column: 1/3;
    grid-row: 3/4;

}

.grid-fourth {
    grid-column: 1/3;
    grid-row: 4/5;
}

.grid-fifth {
    grid-column: 1/3;
    grid-row: 8/9;
}




@media (min-width: 600px) {

    .grid {
        width: 80vw;
        gap: 1vw;
        grid-template-columns: repeat(3, 26vw);
        grid-template-rows: repeat(4, 26vw);
    }

    .grid-big-bottom {
        grid-column: 2/4;
        grid-row: 4/5;
    }

    .grid-item {
        transition: .3s;
    }

    .grid-item:hover {
        filter: grayscale(0);
        box-shadow: 0 0 2rem rgba(0, 0, 0, .5);
        transform: scale(1.1);
        z-index: 3;
        position: relative;
    }

    .grid-first {
        grid-column: 1/3;
        grid-row: 1/2;

    }

    .grid-secound {
        grid-column: 2/4;
        grid-row: 2/3;
    }


    .grid-third {
        grid-column: 1/3;
        grid-row: 3/4;

    }

    .grid-fourth {
        grid-column: 1/3;
        grid-row: 4/5;

    }

    .grid-fifth {
        grid-column: 3/4;
        grid-row: 5/6;
    }

}


/*
LIGHTBOX LUMINOUS
================================================ */
.lum-lightbox.lum-open {
    z-index: 4;
}

.lum-lightbox-inner img {
    max-width: 120vw;
    max-height: 80vh;
}




/*
DESKTOP SIZE
================================================ */
@media (min-width: 600px) {

    .header-name {
        font-size: 5rem;
    }
}


/* === Grid内だけデフォルトのカーソルを消す（PCのみ） === */
@media (pointer: fine) {
    .grid a {
        cursor: pointer;
    }

    .grid {
        cursor: default;
    }
}

/* カスタムカーソル本体 */
.cursor-hint {
    position: fixed;
    inset: 0 auto auto 0;
    transform: translate(-50%, 50%);
    z-index: 9999;
    pointer-events: none;
    padding: 8px 10px;
    border-radius: 999px;
    font: 600 12px/1.1 system-ui, "Noto Sans JP", sans-serif;
    background: rgba(0, 0, 0, .75);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
    opacity: 0;
    scale: .92;
    transition: opacity .15s ease, scale .15s ease;
    white-space: nowrap;
}

/* 表示時 */
.cursor-hint.is-visible {
    opacity: 1;
    scale: 1;
}

/* 省データ/低モーション配慮（任意） */
@media (prefers-reduced-motion: reduce) {
    .cursor-hint {
        transition: none;
    }
}


/* ===== FV: キャッチコピー===== */
.fv-media .logo-video {
    opacity: 0;
    transform: translateY(4px);
    animation: fvVideoIn .6s ease forwards;
}

.fv-copy {
    opacity: 0;
    transform: translateY(8px);
    animation: fvCopyIn .6s ease forwards;
    animation-delay: 1.5s;
}

@keyframes fvVideoIn {
    from {
        opacity: 0;
        transform: translateY(4px)
    }

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

@keyframes fvCopyIn {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

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

@media (prefers-reduced-motion: reduce) {

    .fv-media .logo-video,
    .fv-copy {
        animation: none;
        opacity: 1;
        transform: none;
    }
}