@media all and (orientation: portrait) {
    div.landport {
        /* 縦向き専用の追加装飾 */
    }

            html,
            body {
                margin: 0;
                padding: 0;
                height: 100%;
            }

            body {
                background-image: url(img/BG1.jpg);
                background-position: center center;
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-size: cover;
                background-color: beige;
                margin: 0;
                font-size: 14px;
            }

            header {
                background: rgba(115, 190, 150, 1.0);
                height: 40px;
            }

            main {
                margin: 0 auto;
                padding-top: 0px;
                
            }

            footer {
                width: 100%;
                position: fixed;
                bottom: 0;
                height: 210px;
                background: rgba(115, 190, 150, 1.0);
                color: #fff;
                font-size: 11px;
                font-weight: 500;
                text-align: center;
            }

            .footer-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(2, 1fr);
                grid-column-gap: 5px;
                grid-row-gap: 0px;
                max-width: 360px;
                height: 100%;
                margin: 0 auto;
            }

            .main-contents {
                width: 100%;
                text-align: center;
                display: grid;
                grid-template-columns: repeat(1, 1fr);
                grid-template-rows: repeat(3, 1fr);
            }

             .title {
                grid-column: 1;
                grid-row: 1;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .comment {
                grid-column: 1;
                grid-row: 2;
                font-size: 18px;
                line-height: 30px;
                font-weight: 600;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: left;
                margin: 20px;

            }

            .facebook {
                grid-column: 1;
                grid-row: 3;
                margin: 10px auto;
                border: 2px solid #ccc;
                width: 360px;
                height: 500px;
            }

            .menu-01 {
                grid-column: 1;
                grid-row: 1;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .menu-02 {
                grid-column: 2;
                grid-row: 1;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .menu-03 {
                grid-column: 3;
                grid-row: 1;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .menu-04 {
                grid-column: 1;
                grid-row: 2;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .menu-05 {
                grid-column: 2;
                grid-row: 2;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .menu-06 {
                grid-column: 3;
                grid-row: 2;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .btn-circle-border-double {
                display: inline-block;
                text-decoration: none;
                color: #fff;
                width: 80px;
                height: 80px;
                line-height: 80px;

                border-radius: 50%;
                border: double 4px #fff;
                text-align: center;
                overflow: hidden;
                transition: .6s;
            }

            .btn-circle-border-double:hover {
                -webkit-transform: rotateY(360deg);
                transform: rotateY(360deg);
            }

        }