@charset "utf-8";

.office_wrap { position: relative; margin-bottom: calc(60px + 58vw);}
.office_wrap:last-child { margin-bottom: 0; }
.office_card { display: flex; flex-direction: column; gap: 20px; padding: calc(24px + 20vw) 24px calc(24px + 36vw); margin: 40vw 0 18vw; border-radius: 16px; background: #FFF; }
.office_info { display: flex; flex-direction: column; gap: 12px; }
.office_num .office_tel, .office_num .office_fax { line-height: 1em; white-space: nowrap; }
.office_map { display: block; width: 100%; height: 200px; border-radius: 12px; }
.office_map_wrap { display: flex; flex-direction: column; gap: 12px; }
.office_map_link { align-self: flex-start; border-bottom: 1px solid; line-height: 1.5; }
.office_map_link:hover { border-color: transparent; }
.office_img_container { position: absolute; aspect-ratio: 3/2; object-fit: cover; background: #CCC; overflow: hidden; }
.office_img_main_container { top: -40vw; right: -5vw; width: 90vw; border-top-left-radius: 1000px; border-bottom-left-radius: 1000px; }
.office_img_sub_container { bottom: -18vw; left: -5vw; width: 81vw; border-top-right-radius: 1000px; border-bottom-right-radius: 1000px; }
.office_img_container img { width: 100%; height: 100%; object-fit: cover; }
.office_name_en { position: absolute; top: calc(20vw - 0.5em); right: -5vw; color: #DECFBF; font-size: 32px; line-height: 1; }

@media ( min-width: 500px ) {
    .office_wrap { margin-bottom: calc(11vw + 84px );}
    .office_card { padding: 24px 24px calc(22vw + 24px); margin: 13vw 0 11vw; }
    .office_wrap:first-child .office_card { margin-top: 0; }
    .office_map { height: 300px; }
    .office_area { position: absolute; top: calc(100% - 22vw); right: 24px; width: calc(50% - 24px); text-align: justify; }
    .office_img_container { aspect-ratio: 4/3; }
    .office_img_main_container { top: -84px; width: 52vw; }
    .office_img_sub_container { bottom: -11vw; width: 44vw; }
    .office_name_en { top: calc(39vw - 84px - 0.5em); }
}
@media ( min-width: 768px ) {
    .office_wrap { margin-bottom: 180px;}
    .office_card { width: calc(100% - 120px); padding: 60px 60px 50px; }
    .office_wrap:first-child .office_card { margin-top: 30px; }
    .office_wrap:last-child .office_card { margin-bottom: 0; }
    .office_info { width: 320px; }
    .office_map_wrap { width: 90%; }
    .office_area { position: static; width: fit-content; }
    .office_img_main_container { top: -60px; right: calc(50% - 50vw); width: calc(50vw + 50% - 420px); }
    .office_img_sub_container { top: min(71.25vw - 335px, 37.5vw + 115px); right: calc(50% - 50vw); left: auto; width: calc(40vw + 40% - 320px); max-width: min(calc(14vw + 130px), calc(5vw + 256px)); border-radius: 0; border-top-left-radius: 1000px; border-bottom-left-radius: 1000px; }
    .office_name_en { top: -0.5em; left: 0; font-size: 60px; }
    .office_wrap:nth-child(2n) .office_card { align-items: flex-end; margin-left: auto; }
    .office_wrap:nth-child(2n) .office_img_main_container { right: auto; left: -5vw; border-radius: 0; border-top-right-radius: 1000px; border-bottom-right-radius: 1000px; }
    .office_wrap:nth-child(2n) .office_img_sub_container { right: auto; left: -5vw; border-radius: 0; border-top-right-radius: 1000px; border-bottom-right-radius: 1000px; }
    .office_wrap:nth-child(2n) .office_name_en { right: 0; left: auto; }
}
@media ( min-width: 1025px ) {
    .office_info { width: calc(100% - min(50vw, 660px) + 140px); }
    .office_map_wrap { width: calc(100% - min(35vw, 420px) + 140px); }
    .office_img_container { right: 0; aspect-ratio: 2/1; border-radius: 1000px; }
    .office_img_main_container { width: min(50vw, 660px); }
    .office_img_sub_container { top: min(calc(25vw - 20px), 310px); width: min(35vw, 420px); max-width: none; }
    .office_wrap:nth-child(2n) .office_img_container { border-radius: 1000px; left: 0; }
}
@media ( min-width: 1200px ) {
    .office_info { width: calc(100% - min(50vw, 660px) + 100px); }
    .office_map_wrap { width: calc(100% - min(35vw, 420px) + 100px); }
}