:root {
    --main-color: #A40000;
}

.company .overlap-group14 {
    height: auto;
}

.company .overlap-group7 {
    height: 100%;
    position: initial;
    width: 100%;
}

.company .adobe-stock_381222602 {
    position: initial;
}

.works-wrapper {
    font-family: var(--font-family-gothic);
}

.works-wrapper a {
    cursor: pointer;
}

.worksdetail-wrapper,
.person-wrapper {
    padding: 80px 0;
    max-width: 1200px !important;
    margin: 0 auto;
}

@media(max-width:576px) {

    .worksdetail-wrapper,
    .person-wrapper {
        padding: 40px 0;
        max-width: 400px !important;
    }
}

/* worksdetail */
.worksdetail-ttl {
    text-align: center;
    font-weight: bold;
}

@media(max-width:576px) {
    .worksdetail-ttl {
        margin: 15px 0;
    }
}


.worksdetail-subttl {
    text-align: center;
    font-weight: bold;
    color: var(--main-color);
}

.worksdetail-contents {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 40px 0;
}

@media(max-width:576px) {
    .worksdetail-contents {
        flex-direction: column;
    }
}

.worksdetail-content-description {
    text-align: center;
}

@media(max-width:576px) {
    .worksdetail-content-description {
        text-align: left;
    }
}

.worksdetail-content-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin: 25px 0;
}

@media(max-width:576px) {
	.worksdetail-content-img {
		height: auto;
	}
}

/* person */
.worksdetail-ttl.person {
    text-align: left;
}

.worksdetail-subttl.person {
    text-align: left;
}

.person-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    margin: 60px 0;
}

@media(max-width:576px) {
    .person-content {
        flex-direction: column;
    }
}

.person-content-img {
    width: 40%;
    height: 300px;
    object-fit: cover;
}

@media(max-width:576px) {
    .person-content-img {
        width: 100%;
    }
}

.person-content-descriptions {
    width: 60%;
}

@media(max-width:576px) {
    .person-content-descriptions {
        width: 100%;
    }
}

.person-content-ttl {
    color: var(--main-color);
    font-weight: bold;
}

.person-underline {
    position: relative;
}

.person-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -25px;
    height: 4px;
    width: 100%;
    background: linear-gradient(to right, var(--main-color) 0%, var(--main-color) 2%, #eee 2%, #eee 100%);
}

.person-content.person-underline::after {
    bottom: -40px;
}