@charset "UTF-8";

@media screen and (768px <=width <=1024px),
(max-width:768px) and (orientation: landscape) {

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

    a {
        text-decoration: none;
        color: #111;
    }

    span.link a,
    a.link {
        text-decoration: none;
        color: #02abfa;
    }

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

    .each-post {
        width: calc((100% - 40px * 4) / 2);
        aspect-ratio: 1.6;
        margin: 40px;
        margin-bottom: 50px;
    }


    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: 100%;
        height: calc(100vw / 1.7);
        max-height: 100%;
        margin-left: 0px;
        display: flex;
    }

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

    div.contents .cf {
        position: absolute;
        width: max(400px, 30%);
        max-width: 100%;
        left: 50%;
        transform: translateX(-50%);
        height: 240px;
        top: min(calc(80px + 100vw / 1.7 + 50px), calc(100% - 240px));
        color: #f3eaea;
        padding: 10px;
        text-align: center;
    }

    .cf-title {
        font-size: clamp(15px, 7vw, 40px);
    }

    .cf-cnt {
        font-size: clamp(9px, 3vw, 15px);
    }
}