@charset "UTF-8";

@media screen and (max-width:768px) and (orientation: portrait) {

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

    div.garally {
        display: flex;
        justify-content: space-around;
        flex-direction: column;
    }


    a {
        text-decoration: none;
        color: #02abfa;
    }

    th,
    td {
        width: 100%;
        display: block;
        border: 0px;
    }

    /* ===== STYLE OF TABLES ===== */

    table.style1,
    table.style1 td,
    table.style1 th {
        border: none;
    }

    table.style1 th {
        color: #5ec0be;
    }

    table.style1 td {
        padding-left: 20px;
    }

    .cocktail-table-td {
        width: 100%;
        padding: 10px;
    }

    .cocktail-table-td2 {
        width: calc(100% / 2);
        padding: 10px;
    }

    /* ====================== */


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

    .each-post {
        width: calc(100% - 80px);
        aspect-ratio: 1.6;
        margin: 40px;
    }


    div.wrapper1 {
        padding: 20px;
    }

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

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

    div#video-area {
        height: 100%;
        width: 100%;
        margin: auto;
        display: flex;
    }

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

    div.contents .cf {
        position: absolute;
        max-width: 80%;
        width: 600px;
        left: 50%;
        transform: translateX(-50%);
        bottom: 50px;
        color: #f3eaea;
        padding: 10px;
        text-align: center;
    }

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

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

}