@charset "UTF-8";

@media screen and (min-width:1024px) {

    div.content2 {
        width: 70%;
        margin: 0 auto;
    }

    .head-container {
        height: 80px;
    }

    a.udl-anm {
        text-decoration: none;
        transition: .3s;
        color: #000;
        background: linear-gradient(#02abfa, #02abfa) 0 100%/0 2px no-repeat;
    }

    a.udl-anm:hover {
        background-size: 100% 2px;
    }

    span.link a,
    a.link {
        text-decoration: none;
        transition: .3s;
        color: #02abfa;
        background: linear-gradient(#02abfa, #02abfa) 0 100%/0 2px no-repeat;
    }

    span.link a:hover,
    a.link:hover {
        background-size: 100% 2px;
    }

    .all-posts {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .each-post {
        width: calc((100% - 30px * 6) / 3);
        aspect-ratio: 1.6;
        margin: 30px;
        margin-bottom: 50px;
    }

    .view-all a:hover {
        color: lightseagreen;
        text-decoration: underline;
    }

    .view-all a:hover span.arrow {
        text-decoration: none;
        background-color: #cccccc;
        transform: scale(1.2);
    }

    .view-all a:hover span.arrow::after {
        animation: arrowMove .5s;
    }

    @keyframes arrowMove {
        0% {
            transform: translateX(0) rotate(45deg);
            opacity: 1;
        }

        50% {
            transform: translateX(50%) rotate(45deg);
            opacity: 0;
        }

        50.1% {
            transform: translateX(-80%) rotate(45deg);
            opacity: 0;
        }

        100% {
            transform: translateX(0) rotate(45deg);
            opacity: 1;
        }
    }

    .post-text:hover {
        opacity: 0.7;
    }

    .post-text:hover .link-text {
        background-size: 100% 2px;
    }

    div.breadcrumbs span a:hover {
        background-size: 100% 2px;
    }

    div.wrapper1 {
        display: flex;
        display: -webkit-flex;
        padding: 20px;
        align-items: flex-start;
        -webkit-align-items: flex-start;
    }

    div.wrapper1 figure {
        width: 40%;
        text-align: center;
    }

    div.wrapper1 img {
        width: 100%;
        height: auto;
    }

    div.service-content {
        width: 65%;
        margin-left: 5%;
        border-top: #777 solid 1px;
        padding-top: 20px;
    }

    header.service-title {
        width: 30%;
        position: -webkit-sticky;
        position: sticky;
        border-top: #777 solid 1px;
        padding-top: 20px;
        top: 120px;
    }

    .update-info p {
        display: inline;
        padding-right: 20px;
    }

    /* STYLE OF TABLES */


    table.style1 {
        border: none;
        width: 500px;
    }

    table.style1 th {
        border: none;
        border-bottom: #5ec0be solid 2px;
        width: 400px;
        padding-left: 10px;
        padding-right: 10px;
    }

    table.style1 td {
        border: none;
        border-bottom: #888 solid 1px;
        width: 100px;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* ------------------ */

    div#video-area {
        width: min(calc(100vw - 450px), 70%);
        aspect-ratio: 1.7;
        max-height: 100%;
        margin-left: 0px;
        display: flex;
    }

    div.contents {
        display: flex;
        flex-direction: row;
        height: 100vh;
        padding: 80px 0;
        flex-wrap: wrap;
        background-color: #222;
        position: relative;
    }

    div.contents .cf {
        position: absolute;
        width: max(450px, 30%);
        right: 0px;
        top: 50%;
        transform: translateY(-50%);
        color: #f3eaea;
        padding: 10px;
        text-align: center;
    }

    .cf-title {
        font-size: 40px;
    }

    .cf-cnt {
        font-size: 15px;
    }
}