/* ------------------------------------------------
PARTS : KV 
------------------------------------------------ */
.kv {
    width: 100%;
    height: clamp(440px, 78vh, 700px);

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
.page-about .kv ,.page-recruit .kv,.post-type-archive-staff .kv {
        height: clamp(440px, 77vh, 700px);
}

/* 私たちについて */
.page-about .kv img {
    object-position: bottom 40% right 54%;
}

/* おおの家 */
.page-oonoya .kv img {
    object-position: top 20% left 50%;
}

/* さくらホーム */
.page-sakurahome .kv img {
    object-position: top 40% left 50%;
}

/* クランクB */
.page-crank-b .kv img {
    object-position: top 20% left 50%;    
}

/* クランク */
.page-crank .kv img {
    object-position: bottom 20% left 50%;    
}

/* ----------------------------------------
PARTS : STAFF LINKS
---------------------------------------- */
.staff__links {
    content: "";
    background: url(../../img/parts/staff_links.avif) no-repeat center/cover;
    width: 100%;
    height: clamp(320px, 36.36vw, 520px);
    display: grid;
    place-items: center;
    position: relative;

    .btn__wrap{
        position: relative;
        z-index: 2;
    }

    .btn-bg-pink{
        border: none;
    }
}

.staff__links::after {
    content: "";
    background-color: #0000006a;
    width: 100%;
    display: grid;
    place-items: center;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1
}


/* おおの家ページ */
.page-oonoya .staff__links {
    background: url(../../img/parts/staff_links_oonoya.avif) no-repeat center/cover;
}

/* さくらんぼページ */
.page-sakuranbo .staff__links {
    background: url(../../img/parts/staff_links_sakuranbo.avif) no-repeat center/cover;
}

/* クランクページ */
.page-crank-b .staff__links {
    background: url(../../img/parts/staff_links_crankB.avif) no-repeat center/cover;
}

/* クランクページ */
.page-crank .staff__links {
    background: url(../../img/parts/staff_links_crank.avif) no-repeat center/cover;
}


/* ----------------------------------------
LINKS
---------------------------------------- */
.links {
    background-color: var(--color-bg-beige);
}

.links__columns {
    display: grid;
    /* 260px以下になったらカラム落ち */
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md) clamp(24px, 4.5vw, 64px);
}

.links__column {
    display: grid;
    justify-items: center;
    grid-template-rows: subgrid;
    grid-row: span 3;
    background-color: #fff;
    border-radius: 3.8cqi;
    padding: clamp(16px, 2.5vw, 30px) clamp(16px, 2.5vw, 30px) clamp(24px, 3.5vw, 40px);
    cursor: pointer;
}


.links__column p {
    width: stretch;
}

.links__img {
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    margin-bottom: var(--space-xs);
}

.links__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.links__btn {
    width: clamp(200px, 18.6vw, 220px);
    pointer-events: none;
}

.links__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
}

/* カラム全体にマウスを乗せた時に画像が変化 */
.links__column:hover .links__img img {
    opacity: 0.8;
    transition: 0.3s ease-in-out;
}

.links__column:hover .links__btn{
    filter: brightness(1.1);
}

/* .links__btn のスタイル */
.links__btn {
    /* ボタンラッパーのスタイル */
}


@media (width < 768px) {
    .links__columns {
        grid-template-columns: 1fr;
    }

    .links__column{
        padding: clamp(16px, 3.9vw, 30px) clamp(16px, 3.9vw, 30px) clamp(30px, 5.2vw, 40px);
    }
}


.page-about .links__column {
    grid-row: span 2;
}