.yoko{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /*width: 60%;*/
    margin-left: auto;
    margin-right: auto;
}

#mainmenu button {
    box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px 0px 1px 1px rgba(0, 0, 0, 0.1) inset;
    width:100px;
    height:35px;
}

h2 {
    margin-top:3px;
    margin-bottom:3px;
}

#mainmenu button.w45per{
    width:115px;
    margin-left:auto;
    margin-right:auto;
}

.menublock{
    margin-left:auto;
    margin-right:auto;
    background-color: #e2ebfd;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px 5px 5px 5px;
    width: 355px;
    border: 1px #b5b5b5 solid;
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6));
}

#mainmenu div.divLogo {
    /*display: flex;*/
}
#mainmenu div.divLogo img {
    position:fixed;
    left:0px;
    bottom:50px;
    width:10%;
}
#mainmenu div.divLogo h1 {
    white-space:nowrap;
}

#mainmenu input[type="button"]:hover {
    color:black;
}

#mainmenu button {
    box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px 0px 1px 1px rgba(0, 0, 0, 0.1) inset;
    width:250px;
    margin-top:5px;
    margin-bottom:5px;
    height: 35px;
}

#mainmenu button:hover {
    box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1), 0px 0px 1px 1px rgba(0, 0, 0, 0.1) inset;
    background-color:#6a96f542;
}


.img50 {
    width:25px;
    padding-left:10px;
    padding-right:10px;
    vertical-align:middle;
}


.advcomment{
    color:blue;
    font-size:9pt;
}

.textleft{
    text-align:left;
}

.obi{
    width:100%;
    background-color:#e1d0ff;
}

.ButtonBlink{
    font-weight: 900;
    animation: blinkBoss 1s infinite alternate;
}
@keyframes blinkBoss{
   0% { color: white }
 100% { color: red;
        background-color: yellow;
 }
}

/*
    お問い合わせ先
*/

#divinfo{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    bottom:0px;
    left:0px;
    background-color: rgba(37, 36, 35, 0.70);
    display:none;
    z-index:999;
}

#divinfo > div{
    text-align:center;
    vertical-align:middle;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 100px;
    margin: auto;
    height: fit-content;
    width: 90%;
    background-color: #ececec;
}

#divinfo > table{
    text-align:center;
    vertical-align:middle;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    height: fit-content;
    width: 60%;
    background-color: #ececec;
}

#divInfoDetail{
    margin-bottom: 20px;
    margin-top: 20px;
}

#divInfoClose{
    position: absolute;
    left: 45%;
}

#divinfo ao{
    color:blue;
}
#divinfo pink{
    color:deeppink;
}

.tblinfo,.tblinfo th,.tblinfo td{
    border-collapse: collapse;
    border: 1px;
    border-style: solid;
    border-color: black;
    text-align:left;
    margin-left: auto;
    margin-right: auto;
}

.tblinfo th {
    background-color:#e2ebfd;
}

/*
    マニュアル
*/

#divManual{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    bottom:0px;
    left:0px;
    background-color: rgba(37, 36, 35, 0.70);
    display:none;
    z-index:999;
}

#divManual > div{
    text-align:center;
    vertical-align:middle;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 100px;
    margin: auto;
    height: fit-content;
    width: 60%;
    background-color: #ececec;
}

#divManual > table{
    text-align:center;
    vertical-align:middle;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    height: fit-content;
    width: 60%;
    background-color: #ececec;
}

#divManualDetail{
    margin-bottom: 20px;
    margin-top: 20px;
}

#divManualClose{
    position: absolute;
    left: 45%;
}

#divManual ao{
    color:blue;
}
#divManual pink{
    color:deeppink;
}

.tblManual,.tblManual th,.tblManual td{
    border-collapse: collapse;
    border: 1px;
    border-style: solid;
    border-color: black;
    text-align:left;
    margin-left: auto;
    margin-right: auto;
}

.tblManual th {
    background-color:#e2ebfd;
}

/*
    お知らせ
*/

#divOsirase{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    bottom:0px;
    left:0px;
    background-color: rgba(37, 36, 35, 0.70);
    display:none;
    z-index:999;
}

/*#divOsirase > div{*/
#divOsirase1{
    text-align:center;
    vertical-align:middle;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 100px;
    margin: auto;
    height: 80%;
    width: 60%;
    background-color: #ececec;
    overflow:scroll;
}

.osiraseTopDoc{
    padding: 0.5em;
    font-weight: bold;
    background: #e1ffe6;
    border: solid 2px #ec7f7f;
    border-radius: 10px;
    color: #ec7f7f;
    text-align:left;
    width:80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

.osiraseDoc{
    width:80%;
    background: #e2ebfd;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:10px;
    border: 1px #b5b5b5 solid;
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.6));
}

.osirasehead{
    padding: 8px 12px;
    margin: -1px;
    border: none;
    font-size: 18px;
    text-align: left;
    color: #000;
}

.osirasebody{
    background: #fffbf4;
    padding: 5px;
    border: solid 1px #be9fff;
    margin-bottom: 3px;
    margin-left: 3px;
    margin-right: 3px;
    text-align: left;
}

#divOsiraseClose{
    position: absolute;
    left: 45%;
    bottom: 10%;
}



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

.message {
  font-size: 12pt;
  font-weight: 900;
  animation: blinkAnime 1s infinite alternate;
}
@keyframes blinkAnime{
   0% { color: black }
/* 100% { color: red }*/
 100% { color: blue }
}

.message2 {
  font-size: 8pt;
  font-weight: 900;
  animation: blinkAnime2 1s infinite alternate;
}
@keyframes blinkAnime2{
   0% { color: black }
 100% { color: red }
}


/*
これは打ち消すため一番最後に記述する
*/
@media screen and (max-width: 885px){
    .yoko 
    {
        display: inline-block;
    }

    #mainmenu button 
    {
        width:100%;
    }

    #mainmenu button.w45per
    {
        width:100%;
    }

    #divinfo
    {
        display:none;
    }

    #mainmenu div.divLogo img 
    {
        display:none;
    }

}

@media screen and (max-width: 320px){
    .yoko 
    {
        display: inline-block;
    }

    #mainmenu button 
    {
        width:100%;
    }

    #mainmenu button.w45per
    {
        width:100%;
    }

    #divinfo
    {
        display:none;
    }

    #mainmenu div.divLogo img 
    {
        display:none;
    }

    .menublock{
        width: 250px;
    }

}