@charset "utf-8";

.sub .key:after  {
    aspect-ratio: 192 / 83;
    content: "";
    background-image: url(/common/images/sub_key_bg_pc.webp);
    mix-blend-mode: hard-light;
    background-position: center top;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: auto;
    z-index: 3;
}

main section.sec1 .sec1_inner   {
    min-height: 320px;
}

.sub main section.sec1 .sec1_inner::after   {
    background-position: center center;
}

main section.sec2 .inner    {
    padding-top: min(3.9683vw, 60px);
    padding-bottom: min(3.9683vw, 60px);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

main section:not(.sec1) .inner  {
    max-width: 1280px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

main section:not(.sec1) {
    z-index: 4;
}

main section.sec2   {
    display: flex;
    flex-direction: column;
    gap: min(1.3228vw, 20px);
}

main section.sideimglayout .sideimg_item    {
    min-height: 470px;
    height: 100%;
}

main section.sideimglayout .sideimg_item .inner {
    justify-content: flex-start;
}

main section.sideimglayout .sideimg_item:nth-of-type(2n) .inner {
    justify-content: flex-end;
}

main section.sideimglayout .sideimg_item .inner > .flex {
    max-width: 900px;
    width: 100%;
    gap: 4.4444%;
    align-items: flex-start;
}

main section.sec2 .sideimg_item:nth-of-type(2n) .inner:after  {
    left: auto;
    right:  calc((100% - 100vw) / 2);
    border-radius: 250px 0 0 250px;
}

main section.sideimglayout .sideimg_item .inner .imgarea    {
    width: min(33.333vw,300px);
    border-radius: 10px;
    overflow: clip;
    border: 3px solid #FFF;
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
}

main section.sideimglayout .sideimg_item .inner .infoarea   {
    width: min(61.111vw,550px);
    padding-bottom: 0;
}

main section.sideimglayout .sideimg_item .inner .infoarea .titlearea    {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: min(0.33vw,5px);
}

main section.sideimglayout .sideimg_item .inner .infoarea .titlearea:after  {
    display: none;
}

main section.sideimglayout .sideimg_item .inner .titlearea .flex,
main section.sideimglayout .sideimg_item .inner .titlearea .flex *   {
    gap: 0.5rem;
    line-height: 1;
}

main section.sideimglayout .sideimg_item .inner .titlearea .flex.roboto-condensed span:last-of-type  {
    letter-spacing: -5%;
}

main section.sideimglayout .sideimg_item .inner .infoarea p:not(.circle_button)   {
    border-bottom: 1px dashed #0761A2;
}
.circle_button a  {
    padding-left: 0;
    justify-content: center;
    color: #D61B1E;
    font-weight: 500;
    height: min(2.6455vw, 40px);
    border-radius: min(1.3228vw, 20px);
    width: 100%;
}

.circle_button a:after  {
    display: none !important;
}

main section.sideimglayout .sideimg_item .inner .infoarea > .flex {
    align-items: flex-end;
    gap: 0;
}
main section.sideimglayout .sideimg_item .inner .infoarea > .flex .col:has(table) {
    flex: 1;
}

main section.sideimglayout .sideimg_item .inner .infoarea > .flex .col table  {
    width: 100%;
    border-top: 1px solid #999999;
    border-left: 1px solid #999999;
}

main section.sideimglayout .sideimg_item .inner .infoarea > .flex .col table tr   {
    border-bottom:  1px solid #999999;
}

main section.sideimglayout .sideimg_item .inner .infoarea > .flex .col table tr th,
main section.sideimglayout .sideimg_item .inner .infoarea > .flex .col table tr td    {
    border-right:  1px solid #999999;
    line-height: 187.5%;
    padding: 0 min(0.6614vw, 10px);
}

main section.sideimglayout .sideimg_item .inner .infoarea > .flex .col table tr th    {
    background-color: #0561A1;
    color: white;
    text-align: center;
}
main section.sideimglayout .sideimg_item .inner .infoarea > .flex .col table tr td    {
    text-align: right;
}
main section.sideimglayout .sideimg_item .inner .infoarea > .flex .col table tr td:first-of-type  {
    text-align: center;
}
main section.sec2 .sideimg_item .inner:after  {
    content: "";
    background: #FFFFFF;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 0px 30px 30px 0px;
    min-height: 470px;
    height: 100%;
    position: absolute;
    top: 0;
    left:  calc((100% - 100vw) / 2);
    right: auto;
    width: calc(77.41% + (100vw - 100%) / 2);
    z-index: 1;
}

main section.sec2 .sideimg_item:nth-of-type(2n) .inner:after    {
    border-radius: 30px 0 0 30px;
}

@media screen and (max-width: 834px) {
    .sub .key:after   {
        background-image: url(/common/images/sub_key_bg_sp.webp);
        aspect-ratio: 67/105;
    }
}

main section.sec3   {
    background-image: url(/assets_work/common/images/separator_bg.webp);
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: center top;
    aspect-ratio: 48/25;
    display: flex;
    justify-content: center;
    align-items: center;
}

main section.sec3 img   {
    width: 100%;
}

main section.sec4 .inner    {
    max-width: 1240px;
}

main section.sec4 .inner > .infotable:not(:last-of-type)   {
    margin-bottom: min(1.3228vw, 20px);
}

main section.sec4 .inner > .infotable > .flex  {
    gap: 7.88%;
}
main section.sec4 .inner > .infotable > .flex > .col:first-child   {
    width: 54.187%;
}

main section.sec4 .inner > .infotable .col:last-child   {
    width: 27.586%;
}

main section.sec4 .inner > .infotable .col .titlearea {
    flex-direction: row;
    gap: min(1.3228vw, 20px);
    border-bottom: 1px solid #0761A2;
    padding-bottom: 10px;
    position: relative;
}

main section.sec4 .inner > .infotable .col .titlearea *  {
    color: #1155A4;
    text-align: left;
}

main section.sec4 .inner > .infotable .col > .flex  {
    gap: min(0.6614vw, 10px);
}

main section.sec4 .inner > .infotable .col > .flex .col {
    width: calc((100% - min(0.5208vw, 10px)) / 2);
    border-radius: 9px;
    overflow: clip;
}

main section.sec4 .inner > .infotable .col > .flex .col img {
    width: 100%;
}

.mark   {
    display: flex;
    justify-content: flex-end;
}
main section.sec4 .inner > .infotable .col > .flex .col:has(.mark)  {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}
main section.sec4 .inner > .infotable .col > .flex .col .mark   {
    justify-content: flex-start;
    align-items: flex-end;
}

.mark img   {
    width: min(6.6138vw, 100px) !important;
}

@media screen and (max-width: 834px)    {
    main section:not(.sec1) .inner  {
        padding: 7.5vw 5vw;
    }
    .sub .key_navarea .tabs .tab    {
        width: 50%;
    }
    main section.sec2   {
        gap: 5vw;
    }
    main section.sideimglayout .sideimg_item .inner .imgarea    {
        width: 75vw;
    }
    main section.sec2 .sideimg_item .inner:after    {
        width: 95vw;
    }
    
    main section.sideimglayout .sideimg_item .inner > .flex {
        width: 81.25vw;
        gap: 5vw;
    }
    main section.sideimglayout .sideimg_item:nth-of-type(2n) .inner {
        padding-right: 10vw;
    }
    main section.sideimglayout .sideimg_item .inner .infoarea > .flex   {
        justify-content: flex-start;
        gap: 5vw;
    }
    
    main section.sideimglayout .sideimg_item .inner .infoarea .titlearea > h2   {
        text-align: left;
        width: 100%;
    }
    
    .mark   {
        justify-content: flex-start;
    }
    
    main section.sec4 .mark {
        justify-content: flex-end;
    }
    .mark img   {
        width: 25vw !important;
    }
    
    main section.sideimglayout .sideimg_item .inner .infoarea > .flex .col table tr th, main section.sideimglayout .sideimg_item .inner .infoarea > .flex .col table tr td  {
        padding: 1vw;
    }
    
    main section.sec3   {
        overflow-y: clip;
        aspect-ratio: none;
    }
    main section.sec3 img   {
        max-width: none;
        width: auto;
        height: 60vw;
        margin: 20vw 0;
    }
    
    main section.sec4 .inner > .infotable > .flex   {
        flex-direction: column;
    }
    
    main section.sec4 .inner > .infotable > .flex > *   {
        width: 100% !important;
    }
    main section.sideimglayout .sideimg_item .inner .infoarea .circle_button    {
        position: static;
    }
    .circle_button a    {
        height: 12.5vw;
        border-radius: 6.25vw;
    }
    
    main section.sec4 .inner > .infotable:not(:last-of-type)   {
        margin-bottom: 5vw;
    }
    .flex1 {
        flex: 1 !important;
    }
    
    main section.sec4 .inner > .infotable .col > .flex .col:has(.mark)  {
        width: 25vw;
    }
    .address    {
        line-height: 150%;
    }
}