/* ================================================

PARTS : MV

================================================ */

/* ········ FV = TOP PAGE ········ */
.fv {
    height: 100vh;
    height: 100svh;
    display: grid;
    place-items: center;
    position: relative;
}

.fv__head {
    padding-right: var(--space-l);
    padding-bottom: var(--space-m);
    color: #ffff;
    letter-spacing: 0.3em;
    white-space: nowrap;
    font-size: clamp(25px, 3vw, 38px);
    gap: var(--space-sm);
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
}

.fv__subcopy {
    font-size: clamp(15px, 2vw, 20px);
    margin-top: 5em;
}

.fv__hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.fv__hero video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (width < 768px) {

    .fv__copy,
    .fv__subcopy {
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }
}

/* ········ KV = ABOUT ········ */
.page-about .kv__head{
    top: 15%;
}

.page-about .kv__subcopy {
}

.page-about .kv__subcopy span {
    margin-top: 5em;
}

/* ········ KV = WORKS ········ */
.kv {
    width: 100%;
    height: 100vh;
    height: 100svh;
    position: relative;
}

.kv__hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.kv__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kv__head {
    position: absolute;
    top: 12%;
    right: 5%;
    color: #ffff;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: var(--space-sm);
}

.kv__copy {
    font-size: var(--fontSize-5xl);
    letter-spacing: 0.3em;
    white-space: nowrap;
}

.kv__subcopy {
    font-size: var(--fontSize-2xl);
    letter-spacing: 0.3em;
    white-space: nowrap;
}

.kv__cat {
    --min-size: 21;
    --max-size: 48;
    font-size: var(--clamp-size);
    letter-spacing: 0.3em;
    white-space: nowrap;
    padding: 0.05em 1em;
    width: 50%;
    background-color: #ffffff82;
    position: absolute;
    bottom: 5%;
}

@media (width < 768px) {
.kv__cat {
    width: unset;
}
}

/* ········ KV = COMMIT ········ */

.page-commit .kv__head {
    align-items: flex-end;
    bottom: 2.5%;
    top: unset;
    padding: 2em 0;
}

.page-commit .kv__subcopy span {
    display: block;
}

.page-commit .kv__subcopy span:first-child {
    margin-top: -1em;
}

.page-remodeling .kv__hero img {
        object-position: left 20% top 0%;
}


/* ================================================

PARTS:LINKS

================================================ */
.links {
    padding-top: var(--space-8xl);
    padding-bottom: var(--space-8xl);
}

.links ul {
    display: flex;
    justify-content: center;
    gap: clamp(16px, 18.6vw, 260px);
}

/* ········ arrow ········ */
.arrow-container {
    position: relative;
    width: auto;
    height: clamp(110px, 62vw, 274px);
    aspect-ratio: 47 / 274;
}

.arrow-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../../img/common/links_arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.arrow-text {
    position: absolute;
    top: 40px;
    right: 0;
    margin: 0;
    font-size: var(--fontSize-xm);
    font-weight: 500;
    color: #333;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0.5em;
    z-index: 2;
}