@charset "UTF-8";

.breadcrumb {
	/* margin-block: 0 30px; */
	margin-block: 0;
}

.page_staff_main .title_box {
	text-align: center;
    margin-block: 0.8em 0;
}

.page_staff_main .title_box .title {
	font-size: 40px;
	letter-spacing: .08em;
	font-weight: 700;
	line-height: 1.5;
    display: inline-block;
    position: relative;
}

.page_staff_main .title_box .title::after {
    content: "";
    width: 35px;
    aspect-ratio: 35/20;
    background: url(/wp-content/themes/swell_child/image/deco_section_title.svg) no-repeat center center / contain;
    position: absolute;
    left: 50%;
    bottom: -28px;
    transform: translateX(-50%);
}

.page_staff .common_page_wrap {
	padding-block: 130px;
}

.staff_cont_sec .list ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 45px 27px;
}

.staff_cont_sec .list li a {
	display: block;
	height: 100%;
    border: 2px solid #004680;
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
    transition: 0.3s;
}

/* .staff_cont_sec .list li a .img {
	margin-block: 0 0.5em;
} */

.staff_cont_sec .list li a .img img {
	width: 100%;
	height: 100%;
	aspect-ratio: 290 / 320;
	object-fit: cover;
	object-position: center;
}

.staff_cont_sec .list li a .text_box {
    padding: 20px 18px 12px;
}

.staff_cont_sec .list li a .text_box .name_block {
    margin-top: 8px;
    align-items: center;
}

.staff_cont_sec .list li a .text_box .name {
	color: initial;
	font-size: 24px;
	letter-spacing: .08em;
	font-weight: 700;
	line-height: 1.5;
	/* margin-block: 0 0.1em; */
    position: relative;
	transition: .3s;
}

.staff_cont_sec .list li a .text_box .name::before {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform 0.3s;
}

.staff_cont_sec .list li a .text_box .arrow {
    width: 30px;
    height: 30px;
    background: transparent url(/wp-content/themes/swell_child/image/arrow_white_navy.svg) no-repeat center center / contain;
    flex-shrink: 0;
    transition: 0.3s;
}

.staff_cont_sec .list li a .text_box .text {
	/* color: #646464; */
	font-size: 14px;
	letter-spacing: .08em;
	font-weight: 400;

    padding: 5.5px 15px;
    display: inline-block;
    border-radius: 100vh;
    background-color: #DCE4EF;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #004680;
}

.staff_cont_sec .list li a:hover .text_box .name {
	color: #fff;
}

@media (max-width: 750px) {
	/* .breadcrumb {
		margin-block: 1em 5em;
	}

	.breadcrumb .wrap {
		max-width: 95%;
	} */

    .page_staff .breadcrumb {
        margin-bottom: 5.1vw;
        font-size: 3.1vw;
    }

    .page_staff .breadcrumb.wrap {
        width: initial;
    }

    .page_staff_main .title_box {
        margin-block: 1.3vw 0;
    }

	.page_staff_main .title_box .title {
		font-size: 8.2vw;
	}

    .page_staff_main .title_box .title::after {
        width: 5.4vw;
        bottom: -3.8vw;
    }

	.page_staff .common_page_wrap {
		padding-block: 4vw 15vw;
	}

	.staff_cont_sec .list ul {
		grid-template-columns: repeat(2, 1fr);
		gap: 2.6vw 2.6vw;
	}

	.staff_cont_sec .list li a {
		/* border-bottom: 1px dotted #707070;
		padding-block: 0 0.5em; */
        border: 0.5vw solid #004680;
        border-radius: 1.3vw;
        background-color: #004680;
	}

	/* .staff_cont_sec .list li a .img {
		margin-block: 0 0.6em;
        
	} */

	.staff_cont_sec .list li a .img img {
		aspect-ratio: 17/18;
	}

    .staff_cont_sec .list li a .text_box {
        padding: 1vw 2.6vw 1.5vw;
    }

    .staff_cont_sec .list li a .text_box .name_block {
        margin-top: 0.5vw;
    }

	.staff_cont_sec .list li a .text_box .name {
        border-bottom: 0.5vw solid #fff;
        font-size: 3.6vw;
        line-height: 1.2;
        color: #fff;
	}

    .staff_cont_sec .list li a .text_box .name::before {
        content: initial;
    }

	.staff_cont_sec .list li a .text_box .text {
		padding: 0.6vw 2.1vw;
        font-size: 2.6vw;
	}

    .staff_cont_sec .list li a .text_box .arrow {
        width: 6.2vw;
        height: 6.2vw;
        background: transparent url(/wp-content/themes/swell_child/image/arrow_navy_white.svg) no-repeat center center / contain;
    }

	/* .staff_cont_sec .list li a:hover .text_box .name {
		color: #3E3E3E;
	} */
}