@charset "UTF-8";
/* CSS Document */

/*下層MV*/
#company-offices #lower_mv {
    background: url("../../assets/img/company/offices/mv.webp") no-repeat;/*各ページごとに変更*/
    background-size: cover;
    background-position: center;
}
#company-offices main {
    margin-top: 80px;/*各ページごとに変更*/
}


#offices h2,#group h2 {
    color: #333333;
    margin-bottom: 40px;
}
@media (max-width: 768px) {
    #offices h2,#group h2 {
        margin-bottom: 24px;
    }
}

/*事業所*/
#offices .hq {
    width: 85%;
    display: flex;
    gap: 32px;
    justify-content: flex-start;
}
#offices .hq img {
    width: calc(62% - 16px);
    object-fit: contain;
    align-self: flex-start;
}
#offices .hq .text_wrap {
    width: calc(38% - 16px);
    padding-top: 16px;
}

#offices .hq h3 {
    font-size: 2.4rem;
    font-weight: 400;
    padding-left: 18px;
    position: relative;
}
#offices .hq h3::before {
    content: '';
    background: var(--LB-color);
    height: 28px;
    width: 2px;
    position: absolute;
    top: 54%;
    left: 0;
    transform: translateY(-50%);
}
#offices .hq h3 + div {
    margin-top: 24px;
}
#offices .hq dl {
    margin-top: 16px;
}
#offices .hq dl dt {
    font-weight: 600;
}

@media (max-width: 1080px) {
    #offices .hq {
        width: 100%;
    }
    #offices .hq img {
        width: calc(50% - 16px);
    }
    #offices .hq .text_wrap {
        width: calc(50% - 16px);
    }
}
@media (max-width: 768px) {
    #offices .hq {
        flex-direction: column;
    }
    #offices .hq img {
        width: 100%;
    }
    #offices .hq .text_wrap {
        width: 100%;
        padding-top: 0;
    }
    #offices .hq h3 + div {
        margin-top: 16px;
    }
}

.g-map a {
    color: var(--LB-color);
    font-weight: 600;
}
.g-map {
    padding-left: 22px;
    margin-top: 8px;
    display: inline-block;
    transition: 0.3s;
    position: relative;
}
.g-map::before {
    content: '';
    background: url("../../assets/img/company/offices/icon_g-map.svg") no-repeat;
    background-size: contain;
    width: 16px;
    height: 16px;
    border-right-width: 16px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.g-map:hover {
    opacity: 0.8;
}

#offices > .wrapper {
    margin-top: 40px;
}

.ex_link a {
    color: var(--LB-color);
    font-weight: 600;
}
.ex_link {
    padding-left: 22px;
    margin-top: 8px;
    display: inline-block;
    transition: 0.3s;
    position: relative;
}
.ex_link::before {
    content: '';
    background: url("../../assets/img/company/offices/icon_ex_link.svg") no-repeat;
    background-size: contain;
    width: 16px;
    height: 16px;
    border-right-width: 16px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.ex_link:hover {
    opacity: 0.8;
}

@media (max-width: 490px) {
    .g-map,.ex_link {
        margin-top: 5px;
    }
}



/*事業所リスト*/
.group_list {
    display: grid;
    grid-template-columns: repeat(3 , 1fr);
    gap: 32px 20px;
}
.group_list h4 {
    font-size: 1.8rem;
    font-weight: 400;
    padding-left: 9px;
    position: relative;
    margin-top: 16px;
}
.group_list h4::before {
    content: '';
    background: var(--LB-color);
    height: 20px;
    width: 2px;
    position: absolute;
    top: 54%;
    left: 0;
    transform: translateY(-50%);
}
.group_list h4 + div {
    margin-top: 8px;
}

@media (max-width: 768px) {
    .group_list {
        display: grid;
        grid-template-columns: repeat(2 , 1fr);
        gap: 30px 20px;
    }
}
@media (max-width: 500px) {
    .group_list {
        gap: 24px 12px;
    }
    .group_list h4 {
        margin-top: 6px;
    }
    .group_list h4::before {
        height: 24px;
    }
    .group_list h4 + div {
        font-size: 1.3rem;
    }
}
@media (max-width: 490px) {
    .group_list {
        grid-template-columns: 1fr;
    }
    
}


/*事業内容一覧*/
.company-list {
    padding: 80px 0;
    background: #F2F2F2;
}
.company-list h2 {
    text-align: left;
    margin-bottom: 40px;
}

.company-list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 64px;
}
.company-list ul li {
    width: calc((100% - 128px) / 3);
}
.company-list ul li > div {
    display: flex;
    gap: 24px;
    align-items: center;
    width: 100%;
}
.company-list ul li > div a {
    display: block;
    font-size: 1.6rem;
    font-weight: 400;
    padding-bottom: 16px;
    border-bottom: 1px solid #A0A0A0;
    width: 60%;
    padding-right: 24px;
    position: relative;
    transition: 0.3s;
}
.company-list ul li > div a::after {
    content: '';
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--LB-color);
    border-right: 2px solid var(--LB-color);
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 30%;
    right: 12px;
    border-radius: 1px;
    transition: 0.25s ease-in-out;
}
.company-list ul li > div img {
    max-width: 116px;
    width: 40%;
}

.company-list ul li > div a:hover {
    color: #5C5C5C;
}
.company-list ul li > div a:hover::after {
    right: 9px;
}

@media (max-width: 1200px) {
    .company-list ul {
        gap: 32px 40px;
    }
    .company-list ul li {
        width: calc((100% - 80px) / 3);
    }
}
@media (max-width: 1100px) {
    .company-list ul {
        gap: 32px;
    }
    .company-list ul li {
        width: calc((100% - 64px) / 3);
    }
}
@media (max-width: 1080px) {
    .company-list ul {
        gap: 24px 32px;
    }
    .company-list ul li {
        width: calc((100% - 32px) / 2);
    }
}
@media (max-width: 700px) {
    .company-list ul {
        gap: 24px;
    }
    .company-list ul li {
        width: 100%;
    }
    .company-list ul li > div img {
        max-width: inherit;
        width: 35%;
    }
    .company-list ul li > div a {
        width: 65%;
    }
}