@charset "utf-8";

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

main section.sec2 .inner .content .scrollhint   {
    text-align: center;
}
main section.sec2 .inner .content .scrollhint img   {
    width: 881px;
    overflow-x: scroll;
}

main section.sec3.sideimglayout .sideimg_item .inner {
    padding: 0 20px;
}

main section.sec3.sideimglayout .sideimg_item .inner .flex {
    gap: 8%;
    align-items: flex-start;
}

main section.sec3.sideimglayout .sideimg_item .inner .imgarea    {
    width: 25.2%;
}

main section.sec3.sideimglayout .sideimg_item .inner .infoarea   {
    width: 37.57%;
}

main section.sec3.sideimglayout .sideimg_item .inner .infoarea .titlearea.ex_title    {
    width: 107%;
}

main section.sec3.sideimglayout .sideimg_item .inner .infoarea .titlearea > *    {
    text-wrap: nowrap;
}

main section.sec4   {
    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.sec4 img   {
    width: 100%;
}

main section.sec5 .inner {
    max-width: 1280px;
}

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

main section.sec5.sideimglayout .sideimg_item .inner .flex   {
    gap: 5.89%;
    align-items: center;
}

main section.sec5.sideimglayout .sideimg_item .inner .flex:has(.subimgarea) {
    align-items: flex-start;
}
main section.sideimglayout .sideimg_item .inner .imgarea    {
    width: 23.43%;
}


main section.sec5.sideimglayout .sideimg_item .inner .infoarea   {
    width: 42.12%;
    padding-bottom: 0;
}

main section.sec5.sideimglayout .sideimg_item .inner .flex:has(.subimgarea) .infoarea {
    padding-top: min(1.3021vw, 25px);
}

main section.sec5.sideimglayout .sideimg_item .inner .infoarea h3  {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: linear-gradient(90deg, #0761A2 0%, #03243C 100%);
    border-radius: 50px;
    color: white;
    line-height: 163.6%;
    padding: min(0.5208vw, 10px);
}

main section.sec5.sideimglayout .sideimg_item .inner .infoarea .subimgarea  {
    max-width: 300px;
}

main section.sec5.sideimglayout .sideimg_item .inner .infoarea .subimgarea img {
    border-radius: min(0.5208vw, 10px);
}

@media screen and (max-width: 834px)    {
    main section.sec2 .inner .content:has(.scrollhint)  {
        width: 100vw;
        position: relative;
        margin-left: -5vw;
    }
    .scrollhint {
        overflow-x: scroll;
    }
    .scrollhint img  {
        width: 800px;
        max-width: none;
        margin-left: 5vw;
        margin-right: 5vw;
    }
    
    main section.sec3.sideimglayout .sideimg_item .inner > .flex   {
        gap: 5vw;
    }
    main section.sec3.sideimglayout .sideimg_item .inner .infoarea .titlearea.ex_title  {
        width: 100%;
    }
    main section.sec3.sideimglayout .sideimg_item .inner .imgarea   {
        display: flex;
    }
    
    main section.sec3.sideimglayout .sideimg_item:nth-of-type(2n) .inner .imgarea   {
        justify-content: flex-end;
    }
    main section.sec3.sideimglayout .sideimg_item .inner .imgarea img   {
        width: 56.25vw;
    }
    
    main section.sideimglayout .sideimg_item .inner .infoarea   {
        padding-bottom: 5vw;
    }
    
    main section.sec4   {
        overflow-y: clip;
        aspect-ratio: none;
    }
    main section.sec4 img   {
        max-width: none;
        width: auto;
        height: 60vw;
        margin: 20vw 0;
    }
    
    main section.sec5.sideimglayout .sideimg_item:not(:last-of-type)    {
        margin-bottom: 7.5vw;
    }
    main section.sec5.sideimglayout .sideimg_item .inner > .flex  {
        gap: 5vw;
    }

    main section.sec5.sideimglayout .sideimg_item .inner .imgarea   {
        display: flex;
        justify-content: center;
    }
    
    main section.sec5.sideimglayout .sideimg_item .inner .imgarea img   {
        width: 56.25vw;
    }
    
    main section.sec5.sideimglayout .sideimg_item .inner .infoarea h3   {
        height: 12.5vw;
        border-radius: 6.25vw;
        text-align: center;
    }
    
    main section.sec5.sideimglayout .sideimg_item .inner .infoarea h3:has(br)   {
        height: 22.5vw;
        border-radius: 11.25vw;
    }
    
    main section.sec5.sideimglayout .sideimg_item .inner .infoarea .subimgarea  {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}