.top_bg001 {
            background-image: url("../img/sky_001.png");
            animation-name: sky001;
            animation-duration: 1s;
            animation-timing-function: ease;
            animation-delay: 0s;
            animation-iteration-count: infinite;
            animation-direction: normal;
            animation-fill-mode: none;
            animation-play-state: running;
        }
        
        .top_bg002 {
            background-image: url("../img/sky_003.png");
            animation-name: sky002;
            animation-duration: 1s;
            animation-timing-function: ease;
            animation-delay: 0s;
            animation-iteration-count: infinite;
            animation-direction: normal;
            animation-fill-mode: none;
            animation-play-state: running;
        }
        
        .top_bg003 {
            background-image: url("../img/sky_001.png");
        }
        
        .top_bg004 {
            background-image: url("../img/sky_003.png");
        }
        
        body {
            margin: 0;
            padding: 0;
        }
        
        .top_bg {
            background-image: url("../img/fondobg.png");
            background-repeat: no-repeat;
            background-size: 100%;
        }
        
        .baseFrame {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: flex-start;
        }
        
        .menuFrame {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 48vw;
            height: 100vh;
            /*
background-color: #FF0000;
opacity: 0.5;
*/
        }
        
        .contentFrame {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 48vw;
            height: 100vh;
            /*
background-color: #FFFF00;
opacity: 0.5;
*/
        }
        
        .bord00 {
            opacity: 0.1;
            background-color: #000000;
            min-width: 16px;
            min-height: 100vh;
        }
        
        .bord01 {
            opacity: 0.2;
            background-color: #000000;
            min-width: 8px;
            min-height: 100vh;
        }
        
        .bord02 {
            opacity: 0.3;
            background-color: #000000;
            min-width: 4px;
            min-height: 100vh;
        }
        
        .bord03 {
            opacity: 0.5;
            background-color: #000000;
            min-width: 2px;
            min-height: 100vh;
        }
        
        /*
        .topMsgs {
            color: #FFFFFF;
            font-size: x-large;
            font-weight: 1200;
            text-shadow: 4px 4px 10px #000000;
        }
        */

        .topMsgs {
            color: #000000;
            font-size: 64px;
            font-weight: bolder;
            
            letter-spacing:-0.05em;
            font-family: Helvetica, sans-serif , "游ゴシック" , "Meiryo UI","ヒラギノ角ゴ Pro","Roboto";
            text-shadow: 2px 2px 2px #FFFFFF,
                         -2px 2px 2px #FFFFFF,
                         2px -2px 2px #FFFFFF,
                         -2px -2px 2px #FFFFFF;
        }

        .topMsgs2 {
            color: #000000;
            font-size: xx-small;
            font-weight: bolder;
            
            letter-spacing:0.01em;
            font-family: Helvetica, sans-serif , "游ゴシック" , "Meiryo UI","ヒラギノ角ゴ Pro","Roboto";
            text-shadow: 2px 2px 2px #FFFFFF,
                         -2px 2px 2px #FFFFFF,
                         2px -2px 2px #FFFFFF,
                         -2px -2px 2px #FFFFFF;
        }

        .topMsgs3 {
            color: #000000;
            font-size: 24px;
            font-weight: bolder;
            
            letter-spacing:-0.05em;
            font-family: Helvetica, sans-serif , "游ゴシック" , "Meiryo UI","ヒラギノ角ゴ Pro","Roboto";
            text-shadow: 2px 2px 2px #FFFFFF,
                         -2px 2px 2px #FFFFFF,
                         2px -2px 2px #FFFFFF,
                         -2px -2px 2px #FFFFFF;
        }


        li {
            list-style-type: none;
            padding: 8px;
        }
        
        .barFrame {
            z-index: 201;
            position: fixed;
            display: block;
        }
        
        .barCont {
            position: relative;
            height: auto !important;
            height: 100%;
            min-height: 100%;
            padding-bottom: 130px;
        }
        
        .logoBase {
            position: fixed;
            left: 2vw;
            top: 2vh;
        }
        
        .barBase {
            position: fixed;
            background-color: #000000;
            opacity: 0.2;
            left: 2vw;
            top: 16vh;
            width: 450px;
            height: 48px;
            border-radius: 8px;
        }
        
        .menuBar {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 4px;
        }
        
        .menuBox {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
            border-color: #FFFFFF;
            border-style: solid;
            border-width: 2px;
            box-shadow: 4px 4px 10px #000000;
            width: 72px;
            height: 24px;
            border-radius: 4px;
            padding: 2px;
            margin: 3px;
            cursor: pointer;
            font-size: small;
        }
        
        .topicFrame {
            z-index: 201;
            position: fixed;
            display: block;
        }
        
        .topicCont {
            position: relative;
            height: auto !important;
            height: 100%;
            min-height: 100%;
            padding-bottom: 130px;
        }
        
        .topicBase {
            position: fixed;
            background-color: #000000;
            opacity: 0.6;
            width: 400px;
            height: 200px;
            right: 2vw;
            top: 2vh;
            border-radius: 8px;
        }
        
        .topicBar {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 4px;
        }
        
        .topicBox {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #000000;
            background-color: #FFFF00;
            border-color: #FFFFFF;
            border-style: solid;
            border-width: 2px;
            box-shadow: 4px 4px 10px #000000;
            width: 80px;
            height: 170px;
            border-radius: 4px;
            /*         text-shadow: 4px 4px 10px #000000; */
            padding: 2px;
            margin: 4px;
            cursor: pointer;
        }
        
        .topicInfo {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #000000;
            background-color: #FFFFFF;
            border-color: #C0C0C0;
            border-style: solid;
            border-width: 2px;
            box-shadow: 4px 4px 10px #000000;
            width: 340px;
            height: 170px;
            border-radius: 4px;
            font-size: x-large;
            /*  text-shadow: 4px 4px 10px #000000; */
            padding: 2px;
            margin: 4px;
            cursor: pointer;
        }
        
        .langFrame {
            z-index: 201;
            position: fixed;
            display: block;
        }
        
        .langCont {
            position: relative;
            height: auto !important;
            height: 100%;
            min-height: 100%;
            padding-bottom: 130px;
        }
        
        .langBase {
            position: fixed;
            background-color: #000000;
            opacity: 0.2;
            width: calc(50% - 96px);
            height: 36px;
            left: 2vw;
            bottom: 2vh;
            border-radius: 8px;
        }
        
        .langBar {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 3px;
        }
        
        .langBox {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
            background-color: #000000;
            border-color: #FFFFFF;
            border-style: solid;
            border-width: 2px;
            box-shadow: 4px 4px 10px #000000;
            width: 72px;
            height: 18px;
            border-radius: 4px;
            font-size: xx-small;
            /*         text-shadow: 4px 4px 10px #000000; */
            padding: 2px;
            margin: 2px;
            cursor: pointer;
        }
        
        .rightFrame {
            z-index: 201;
            position: fixed;
            display: block;
        }
        
        .rightCont {
            position: relative;
            height: auto !important;
            height: 100%;
            min-height: 100%;
            padding-bottom: 130px;
        }
        
        .rightBase {
            position: fixed;
            background-color: #000000;
            opacity: 0.2;
            width: 40px;
            height: 135px;
            right: 2vw;
            top: 50vh;
            border-radius: 8px;
        }
        
        .rightBar {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 3px;
        }
        
        .rightBox {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
            background-color: #000000;
            border-color: #FFFFFF;
            border-style: solid;
            border-width: 2px;
            box-shadow: 4px 4px 10px #000000;
            width: 72px;
            height: 118px;
            border-radius: 4px;
            font-size: x-large;
            /*         text-shadow: 4px 4px 10px #000000; */
            padding: 2px;
            margin: 2px;
            cursor: pointer;
        }

        .leftFrame {
            z-index: 201;
            position: fixed;
            display: block;
        }
        
        .leftCont {
            position: relative;
            height: auto !important;
            height: 100%;
            min-height: 100%;
            padding-bottom: 130px;
        }
        
        .leftBase {
            position: fixed;
            background-color: #000000;
            opacity: 0.2;
            width: 40px;
            height: 135px;
            left: 2vw;
            top: 50vh;
            border-radius: 8px;
        }
        
        .leftBar {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 3px;
        }
        
        .leftBox {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
            background-color: #000000;
            border-color: #FFFFFF;
            border-style: solid;
            border-width: 2px;
            box-shadow: 4px 4px 10px #000000;
            width: 72px;
            height: 118px;
            border-radius: 4px;
            font-size: x-large;
            /*         text-shadow: 4px 4px 10px #000000; */
            padding: 2px;
            margin: 2px;
            cursor: pointer;
        }
        
        .fBoxLBase {
            position: fixed;
            left: 9vw;
            top: 50vh;
        }
        
        .fBoxL {
            position: relative;
            display: inline-block;
            padding: 0 15px;
            width: auto;
            min-width: 115px;
            height: 40px;
            line-height: 34px;
            color: #19283C;
            text-align: center;
            background: #F6F6F6;
            border: 3px solid #19283C;
            border-radius: 4px;
            z-index: 0;
        }
        
        .fBoxL:before {
            content: "";
            position: absolute;
            top: 50%;
            left: -8px;
            margin-top: -9px;
            display: block;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 0 9px 9px 9px;
            border-color: transparent transparent  #F6F6F6 transparent;
            z-index: 0;
        }
        
        .fBoxL:after {
            content: "";
            position: absolute;
            top: 50%;
            left: -12px;
            margin-top: -10px;
            display: block;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 0 10px 10px 10px;
            border-color: transparent transparent  #19283C transparent;
            z-index: -1;
        }

        .fBoxRBase {
            position: fixed;
            right: 9vw;
            top: 50vh;
        }
        
        .fBoxR {
            position: relative;
            display: inline-block;
            padding: 0 15px;
            width: auto;
            min-width: 115px;
            height: 40px;
            line-height: 34px;
            color: #19283C;
            text-align: center;
            background: #F6F6F6;
            border: 3px solid #19283C;
            border-radius: 4px;
            z-index: 0;
        }
        
        .fBoxR:before {
            content: "";
            position: absolute;
            top: 50%;
            right: -8px;
            margin-top: -9px;
            display: block;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 9px 0 9px 9px;
            border-color: transparent transparent transparent #F6F6F6;
            z-index: 0;
        }
        
        .fBoxR:after {
            content: "";
            position: absolute;
            top: 50%;
            right: -12px;
            margin-top: -10px;
            display: block;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 10px 0 10px 10px;
            border-color: transparent transparent transparent #19283C;
            z-index: -1;
        }
        /*
.base {
width: 200px;
height: 200px;
background-color: #0000FF;
animation-name: rotation;
animation-duration: 10s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: none;
animation-play-state: running;
}
*/
        /*    background-image: url("../img/sky_001.png"); */
        /*
.base {
background-image: url("../img/sky_001.png");
width: 100vw;
height: 100vh;
animation-name: sky000;
animation-duration: 2s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
}
*/
        
        @keyframes sky002 {
            0% {
                opacity: 0.0;
            }
            50% {
                opacity: 0.5;
            }
            100% {
                opacity: 1.0;
            }
        }
        /*
@keyframes rotation {
0% {
transform: scale(.3);
}
50% {
transform: scale(.6) rotate(-45deg);
background: red;
}
100% {
transform: scale(1) rotate(180deg);
background: yellow;
}
}
*/