.container {
    margin:auto;
    width:80%;
    margin-top: 8px;
    margin-bottom: 8px;
}
.container .page_title {
    text-align: center;
    font-size: x-large;
    font-weight: bold;
}

.flex-box{
    width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
.flex-box .flex-child{
    width:23%;
    margin:2px;
    padding:4px;
    border:solid;
    border-width: 1px;
    border-color:chartreuse;
}

.field-icon {
    color: #555;
    float: right;
    margin-right: 15px;
    margin-top: -40px;
    position: relative;
    z-index: 2;
}

a.ankor{
    display: block;
    color: #000;
    text-decoration: none;
    margin-top: 40px;
    padding-top: 40px;
}

.cap-image {
    width: 30%;
    height: auto;
    margin-top: 4px;
    margin-bottom: 4px;
}

.cap-note {
    width: 65%;
    height: auto;
    margin-top: 4px;
    margin-bottom: 4px;
}

.gomirule {
    width:100%;
}

.calendar{
    border-collapse:collapse;
    margin:auto;
    width:100%;
}

.cal_title{
    width:100%;
    padding-bottom:6px;
    font-size:x-large;
    display: flex;
    justify-content: space-between;
}
.cal_title .cal_month {
    margin-left:12px;
}
.cal_title .cal_area {
    margin-right:12px;
}

.calendar th,.calendar td{
    font-size:1em;
    border:1px solid #bbb;
    vertical-align:top;
    text-align:center;
    line-height:1.1;
}

.calendar .calendardateheaders .colWide {
    width:16%;
}

.calendar .calendardateheaders .colNarrow {
    width:10%;
}

.calendar th{background:#ddedf8;}
.calendar th:first-child{color:#f30;}
.calendar th:last-child{color:#03c;}
.calendar .day_num{text-align:center; font-weight:bold; color:navy; }
.calendar td div{
    text-align:center;
    white-space:nowrap;
    font-size:small;
    margin-bottom: 4px;
}
 
.today{background:#fffbcc}
.saturday{background:#f3f9fd;}
.sunday{background:#fff5f2; width:10%;}
.holiday{background:#fff5f2;}
 
.calendar td a{text-decoration:underline;display:block;width:100%;}
.calendar td a:hover{background:#fe814d;color:#fff;text-decoration:none}
.calendar td a:active{background:#f30;}

.panel-body img{
    width:100%
}

@media screen and (max-width: 800px) {
    .container{
        margin:auto;
        border-collapse:collapse;
        width:80%
    }

    .calendar td div{
        text-align:center;
        font-size:1em;
    }
}

@media screen and (max-width: 600px) {
    .container{
        border-collapse:collapse;
        width:100%
    }

    .flex-box .flex-child{
        width:45%;
        margin:2px;
        padding:4px;
        border:solid;
        border-width: 1px;
        border-color:chartreuse;
    }

    .calendar td div{
        text-align:center;
        font-size:small;
    }
}