html,
body{
width: 100%;
height: 100%;
box-sizing: border-box;
list-style: none;
}

*{
margin: 0;
padding: 0;
}

#cal{
width: 100%;
border-left: solid 1px #ccc;
border-top: solid 1px #ccc;
}

#cal .week{
width: 100%;
display: flex;
}


.week dl{
width: 14.1%;
border-collapse: collapse;
border-right: solid 1px #ccc;
border-bottom: solid 1px #ccc;
background: #f1f1f1;
min-height:100px;
}


.week .sun dt{
color: #c00;
}
.week .sat dt{
color: #00c;
}

.week dl.yokohama{
background: rgba(65,105,225,.2);
}

.week dl.on{
cursor: pointer;
}
.week dl.on:hover{
opacity: .5;
}

.week dl.jinguu{
background: rgba(60,179,113,.2);
}
.week dl.tokyodome{
background: rgba(255,165,0,.2);
}

.week dl span{
font-size: 10px;
}
.week dl span.order{
padding: 3px;
background: #fc0;
border-radius: 3px;
font-style: normal;
font-size: 80%;
display: block;
}
.week dl span.order em{
font-style: normal;
font-weight: bold;
margin: 0 5px;
}
.week dl span.order i{
font-size: 10px;
font-style: normal;
}

.week dl span.ss{
padding: 3px;
background: #fff;
border-radius: 2px;
margin-right: 4px;
color: #00c;
}

#u113593138856152904868{
background-color: #6aa942;
color: #fff;
}

#u114323422577503219183{
background-color: #ec716a;
color: #fff;
}

#u106591710644454372492{
background-color: #db0516;
color: #fff;
}

#u117312414096248564888{
background-color: #008b7d;
color: #fff;
}

#u110146532960938265130{
background-color: #3248a8;
color: #fff;
}

@media screen and ( max-width:699px ){
  #cal .week{
    display: block;
  }
  .week dl{
    width: 100%;
  }
  .week dl.sp{
    display: none;
  }

}

#dummy{
width: 100%;
height: 100%;
position: fixed;
top:0;
left: 0;
background: rgba(0,0,0,.5);
display: table;
}

#dummyInner{
display: table-cell;
text-align: center;
vertical-align: middle;
}

#Frame{
width: 50%;
background: #fff;
margin: 0 auto;
height: 90%;
text-align: center;
z-index: 9999;
}

.fade{
position: absolute;
-webkit-transition: opacity .3s linear, top .3s ease-out;
-moz-transition: opacity .3s linear, top .3s ease-out;
-o-transition: opacity .3s linear, top .3s ease-out;
transition: opacity .3s linear, top .3s ease-out;
top: -100%;
left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
}

.fade.in{
top:50%;
}

#Frame select{
font-size: 18px;
margin-top: 30px;
}

#Frame .btn{
display: flex;
justify-content: center;
list-style: none;
margin: 20px;
}

#Frame .btn li{
width: 30%;
padding: 5px;
border-radius: 5px;
background: #ff1a00;
color: #fff;
cursor: pointer;
}

#Frame .btn li:hover{
opacity: .5;
}

#Frame .btn li.close{
background: #222;
}

#Frame textarea{
width: 80%;
height: 50px;
}

.caution{
color: #c00;
font-size: 80%;
font-weight: bold;
}

@media screen and ( max-width:699px ){
  #Frame{
    width: 90%;
  }
}




span.home {
    cursor: pointer;
    display: inline-block;
    padding: 3px 6px;
    margin-bottom: 0;
    font-size: 80%;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    background-image: linear-gradient(to bottom, #7593f6, #5676dd);
    text-shadow: 0 1px 1px rgb(255 255 255 / 75%);
    border: solid 1px #0b236f;
    color: #fff;
    -webkit-box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 2px rgb(0 0 0 / 5%);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 2px rgb(0 0 0 / 5%);
    margin-right: 20px;
}

.prevnext{
width: 90%;
margin: 0 auto;
display: flex;
list-style: none;
justify-content: space-between;
padding: 0;
}

.prevnext li{
margin: 0;
width: 45%;
margin: 10px 0;
}

.prevnext a{
display: block;
text-align: center;
text-decoration: none;
padding: 3px 6px;
margin-bottom: 0;
font-size: 80%;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
background-image: linear-gradient(to bottom, #ccc, #aaa);
text-shadow: 0 1px 1px rgb(255 255 255 / 75%);
border: solid 1px #aaa;
color: #222;
-webkit-box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 2px rgb(0 0 0 / 5%);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1px 2px rgb(0 0 0 / 5%);
margin-right: 20px;

}