main {
    overflow-x: hidden;
}

#about {
    display: flex;
    align-items: center;
    gap: calc(64 / 1500 * 100vw);
    padding: var(--xxl) 0 var(--lg) clamp(20px, (100vw - 1280px) / 2, 50vw);
    position: relative;
}

#about .content_wrap {
    display: flex;
    flex-direction: column;
    gap: var(--lg);
    position: relative;
}

#about .content_wrap::before {
    content: '';
    width: min(calc(1200 / 1500 * 100vw), 1200px);
    width: 1200px;
    aspect-ratio: 1 / 1;
    background-image: url(../img/company/about_bg.svg);
    background-size: cover;
    position: absolute;
    top: 78px;
    left: -1019px;
}

#about .list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

#about .list .item {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#about .list .item:nth-child(2) {
    padding-left: min(calc(120 / 1500 * 100vw), 120px);
}

#about .list .item:nth-child(3) {
    padding-left: min(calc(80 / 1500 * 100vw), 80px);
}

#about .list .num_wrap {
    display: flex;
    align-items: center;
    gap: 24px;
}

#about .list .num {
    color: var(--main-primary);
    font-size: 80px;
    font-weight: 700;
    line-height: 1;
}

#philosophy {
    padding: var(--xxl) 0 var(--xxxl);
    background-color: var(--main-primary);
}

#philosophy .inner {
    position: relative;
    z-index: 0;
}

#philosophy .content {
    display: flex;
    flex-direction: column;
    gap: var(--lg);
    max-width: 600px;
    margin-left: auto;
    color: var(--base-white);
}

#philosophy .content .ttl {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#philosophy .content .primary_btn {
    max-width: 300px;
    background-color: transparent;
    border: 1px solid var(--base-white);
}

#philosophy .img {
    position: absolute;
    width: min(calc(845 / 1500 * 100vw), 845px);
    top: -54px;
    left: -110px;
    z-index: -1;
}

#message {
    padding: var(--xxl) 0;
}
#message .sec_ttl_wrap {
        margin-bottom: var(--lg);
    }

#message .content_wrap {
    display: flex;
    gap: min(calc(64 / 1500 * 100vw), 64px);
}

#message .img {
    width: 50%;
    max-width: 608px;
}

#message .content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 50%;
    max-width: 608px;
}

#message .content .en_text {
    max-width: 406px;
}

#message .content .text_wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#message .content .name_wrap {
    text-align: right;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 8px;
}

#message .content .name_wrap .name {
    display: inline-block;
    width: 91px;
    margin-left: 24px;
}

#overview {
    padding: var(--xxxl) 0 var(--xxl);
    background-color: var(--surface-light);
}

#overview .inner {
    display: flex;
    flex-direction: column;
    gap: var(--xl);
}

#brand {
    display: flex;
    padding: 40px clamp(20px, calc(64 / 1500 * 100vw), 64px);
    background-color: var(--base-white);
}

#brand .ttl_wrap {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 40%;
    max-width: 350px;
    border-right: 1px solid var(--border-light);
}

#brand .ttl_wrap .ttl_xxl {
    font-size: min(calc(18 / 300 * 100vw), 18px);
}

#brand .logo_wrap {
    display: flex;
    width: 85%;
}

#brand .main_logo {
    width: 53%;
    max-width: 373px;
    padding: 0 min(calc(64 / 1500 * 100vw), 64px);
}

#brand .color_wrap {
    display: flex;
    flex-direction: column;
    gap: 36px;
    width: 100%;
    padding: 0 min(calc(40 / 1500 * 100vw), 40px);
}

#brand .color_wrap .item {
    display: flex;
    align-items: center;
    gap: 16px;
}

#brand .color_wrap .item .color_box {
    width: 72px;
    width: min(calc(72 / 1500 * 100vw), 72px);
    aspect-ratio: 1 / 1;
}

#brand .color_wrap .item:nth-child(1) .color_box {
    background-color: var(--main-primary);
}

#brand .color_wrap .item:nth-child(2) .color_box {
    background-color: #000;
}

#brand .color_wrap .item:nth-child(3) .color_box {
    background-color: #e8e8e8;
}

#profile .en_ttl {
    margin-bottom: var(--lg);
}

#overview .list_wrap {
    display: flex;
    gap: 40px;
}

#overview .list_wrap .list {
    width: 50%;
}

#accreditation {
    display: flex;
    align-items: center;
    gap: min(calc(64 / 1500 * 100vw), 64px);
    padding: 24px min(calc(64 / 1500 * 100vw), 64px);
    background-color: var(--base-white);
}

#accreditation .ttl_s {
    width: 102px;
}

#accreditation dl.list {
    width: calc(100% - 168px);
}

#accreditation dl.list .item:last-child {
    border: 1px solid transparent;
}

#access {
    padding: var(--xxl) 0 var(--xxxxl);
}

#access .en_ttl {
    margin-bottom: var(--lg);
}

#access .content_wrap {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

#access .content_wrap .content {
    display: flex;
    align-items: flex-start;
    gap: min(calc(40 / 1500 * 100vw), 40px);
}

#access .content_wrap .content:nth-child(1) {
    padding-bottom: var(--lg);
    border-bottom: 1px solid var(--border-light);
}

#access .content_wrap .content:nth-child(2) {
    flex-direction: row-reverse;
}

#access .content_wrap .text_wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 400px;
}

#access .content_wrap .text_wrap .ttl {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#access .content_wrap .text_wrap .ttl .ttl_xs {
    color: var(--main-primary);
}

#access .content_wrap .google_map {
    width: calc(100% - (400px + min(calc(40 / 1500 * 100vw), 40px)));
    height: 441px;
}

#access .content_wrap .google_map iframe {
    width: 100%;
    height: 100%;
}

#awards {
    padding: var(--xxxl) 0;
    background-color: var(--surface-light);
}

#awards .inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

#awards .dots_list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#awards .dots_list .item {
    display: flex;
    gap: 16px;
}

#awards .dots_list .item dt {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    width: 120px;
}

#awards .dots_list .item dt::before {
    content: '';
    display: inline-block;
    width: 20px;
    aspect-ratio: 20 / 26;
    background-image: url(../img/common/li_icon.svg);
    background-size: cover;
    line-height: 1.6;
}

#awards .dots_list .item dd {
    width: calc(100% - 136px);
}

#awards .ttl_m {
    text-align: center;
}

#history {
    padding: var(--xxxl) 0 var(--xl);
    color: var(--base-white);
    background-color: var(--surface-dark);
}

#history .sec_ttl_wrap {
    margin-bottom: var(--lg);
}

.history_list .item {
    display: flex;
    gap: 16px;
}

.history_list .year {
    width: 120px;
    padding-right: 20px;
    color: var(--text-sub);
    font-size: 32px;
    font-weight: 900;
    font-family: 'Lato', sans-serif;
    position: relative;
    z-index: 0;
}

.history_list .year.bold {
    color: var(--main-primary);
}

.history_list .year::before {
    content: '';
    width: 10px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: var(--main-primary);
    position: absolute;
    top: 19px;
    right: 5px;
}

.history_list .year::after {
    content: '';
    width: 2px;
    height: 100%;
    background-color: var(--text-desc);
    position: absolute;
    top: 0;
    right: 9px;
    z-index: -1;
}

.history_list .item:first-child .year::after {
    height: calc(100% - 19px);
    top: 19px;
}

.history_list .text_m {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: calc(100% - 136px);
    padding: 12px 0 24px;
}

.history_slider img {
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1422px) {
    #about {
        padding-left: clamp(20px, 5vw, 64px);
    }
}

@media (max-width: 1023px) {
    .parallax01 .parallax_img {
        object-position: top 50% right 25%;
    }

    #philosophy {
        padding-bottom: 40px;
    }

    #philosophy .content {
        width: 100%;
        max-width: none;
    }

    #philosophy .img {
        position: static;
        margin: 40px auto 0;
    }

    #brand {
        flex-direction: column;
        gap: 40px;
    }

    #brand .ttl_wrap {
        width: 100%;
        max-width: none;
        padding: 0;
        padding-bottom: 40px;

        border-right: none;
        border-bottom: 1px solid var(--border-light);
    }

    #brand .logo_wrap {
        width: 100%;
        gap: 80px;
    }

    #brand .main_logo {
        max-width: 200px;
        padding: 0;
    }

    #brand .color_wrap {
        width: 65%;
        padding: 0;
        gap: 16px;
    }

    #overview .list_wrap a {
        text-decoration: underline;
    }

    #access .content_wrap .content,
    #access .content_wrap .content:nth-child(2) {
        flex-direction: column;
    }

    #access .content_wrap .text_wrap,
    #access .content_wrap .google_map {
        width: 100%;
    }

    #access .content_wrap .google_map {
        height: 300px;
    }

    #access .content_wrap .text_wrap a {
        text-decoration: underline;
    }

    #awards .dots_list .item dt::before {
        width: 18px;
    }
}

@media (max-width: 768px) {
    #about {
        flex-direction: column;
        gap: 40px;
        padding: 64px min(calc(20 / 400 * 100vw), 20px);
    }

    #about .content_wrap::before {
        width: min(calc(160 / 400 * 100vw), 160px);
        aspect-ratio: 160 / 930;
        background-image: url(../img/company/about_bg_sp.svg);
        left: calc(-1 * min(calc(20 / 400 * 100vw), 20px));
    }

    #about .list .item:nth-child(2) {
        padding-left: min(calc(64 / 400 * 100vw), 64px);
    }

    #about .list .item:nth-child(3) {
        padding-left: min(calc(24 / 400 * 100vw), 24px);
    }

    #about .list .num_wrap {
        gap: 16px;
    }

    #about .list .num {
        font-size: min(calc(50 / 400 * 100vw), 50px);
    }

    #about .img {
        max-width: 400px;
    }

    #philosophy .content .primary_btn {
        max-width: none;
    }

    #philosophy .img {
        width: 100%;
    }

    #philosophy .img img {
        position: relative;
        width: 130%;
        max-width: 640px;
        left: 50%;
        transform: translateX(-50%);
    }

    #message .content_wrap {
        flex-direction: column;
        gap: var(--lg);
    }

    #message .img {
        width: 100%;
        margin: 0 auto;
    }

    #message .content {
        width: 100%;
        max-width: none;
    }

    #brand {
        align-items: center;
    }

    #brand .ttl_wrap {
        width: 100%;
        max-width: 320px;
    }

    #brand .logo_wrap {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    #brand .color_wrap {
        width: 100%;
        max-width: 320px;
    }

    #brand .color_wrap .item .color_box {
        width: 40px;
    }

    #overview .list_wrap {
        flex-direction: column;
        gap: 0;
    }

    #overview .list_wrap .list {
        width: 100%;
    }

    dl.list .item {
        flex-direction: column;
    }

    dl.list .item dt {
        padding: 0;
    }

    #accreditation {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    #accreditation .ttl_s,
    #accreditation dl.list {
        width: 100%;
    }

    #awards .dots_list {
        gap: 16px;
    }

    #awards .dots_list .item {
        flex-direction: column;
        gap: 0;
    }

    #awards .dots_list .item dt,
    #awards .dots_list .item dd {
        width: 100%;
    }

    #awards .dots_list .item dt {
        gap: 0;
    }

    #awards .dots_list .item dd {
        padding-left: 18px;
    }

    .history_list .item {
        gap: 8px;
    }

    .history_list .year {
        width: min(calc(72 / 400 * 100vw), 72px);
        font-size: min(calc(20 / 400 * 100vw), 20px);
    }

    .history_list .year::before {
        top: 8px;
    }

    .history_list .text_m {
        width: calc(100% - 72px);
        padding: 4px 0 8px;
    }
}