﻿
#Wrapper {
    position: relative;
    /*width: 1080px;*/
    width: 860px;
    /*height: 1420px;*/
    height: 790px;
    margin: auto;
    overflow: hidden;
    background-color: #ffffff;
    /*box-shadow:0 0 0 1px #000000;*/
}

#ScheduleArea {
    height: 100%;
    width: 100%;
    /*font-size: 20px;*/
    font-size: 12px;
    display: flex;
    justify-content: space-between;
}

/* 人物パネル */
.Person {
    /*width: 32.5%;*/
    width: 100%;
    height: 100%;
}

/* 人物名 */
.PersonName {
    display:none;
    width:100%;
    height:50px;
    line-height:50px;
    text-align:center;
    font-size:32px;
}

/* カレンダーエリア */
.CalendarArea {
    width:100%;
    /*height:calc(100% - 50px);*/
    height:100%;

    display:flex;
    justify-content:space-between;
}

.Calendar {
    position:relative;
    width:50%;
    height:100%;
}

.CalendarTitle {
    width:99%;
    height:50px;
    line-height:50px;
    margin:auto;
    
    border:2px solid #ffffff;
    border-bottom:none;
    color:#ffffff;
    font-weight:bold;
    font-size:26px;
    text-align:center;
}

.CalendarTable {
    width:99%;
    margin:auto;
    border-collapse:collapse;
}
.CalendarTable th,
.CalendarTable td {
    /*height: 35px;
    line-height: 35px;*/
    height: 18px;
    line-height: 18px;
    border: 2px solid #ffffff;
    text-align: center;
}
.CalendarTable .DateRow td {
    width: 37.5%;
    /*width: 99%;*/
}
.CalendarTable .DateRow td:first-child {
    position: relative;
    width: 25%;
    /*width: 50%;*/
    font-size: 80%;
    font-weight: bold;
}
.CalendarTable .DateRow td.sunday {
    color:#ff0000;
}
.CalendarTable .DateRow td.saturday {
    color:#0000ff;
}

.CalendarRemarks {
    position: absolute;
    width: 99%;
    /*height: 175px;*/
    height: 100px;
    left: 0;
    right: 0;
    bottom: 0px;
    margin: auto;
    padding: 5px;
    border: 2px solid #ffffff;
    /*font-size: 16px;*/
    font-size: 12px;
    overflow-y: scroll;
}

/* 各部の色 */
/*.Calendar:nth-of-type(2n+1) .CalendarTitle {*/
.Calendar:nth-of-type(1) .CalendarTitle{
    background-color: rgb(237,125,49);
}
/*.Calendar:nth-of-type(2n) .CalendarTitle {*/
.Calendar:nth-of-type(2) .CalendarTitle{
    background-color: rgb(112,173,71);
}
/*.Calendar:nth-of-type(2n+1) th,
.Calendar:nth-of-type(2n+1) td {*/
.Calendar:nth-of-type(1) th, 
.Calendar:nth-of-type(1) td {
    background-color: rgb(248,215,205);
}
/*.Calendar:nth-of-type(2n+1) tr:nth-of-type(2n) th,
.Calendar:nth-of-type(2n+1) tr:nth-of-type(2n) td {*/
.Calendar:nth-of-type(2n+1) tr:nth-of-type(2) th, 
.Calendar:nth-of-type(2n+1) tr:nth-of-type(2) td {
    background-color: rgb(252,236,232);
}

/*.Calendar:nth-of-type(2n) th,
.Calendar:nth-of-type(2n) td {*/
.Calendar:nth-of-type(2) th, 
.Calendar:nth-of-type(2) td {
    background-color: rgb(213,227,207);
}
/*.Calendar:nth-of-type(2n) tr:nth-of-type(2n) th,
.Calendar:nth-of-type(2n) tr:nth-of-type(2n) td {*/
.Calendar:nth-of-type(2) tr:nth-of-type(2n) th, 
.Calendar:nth-of-type(2) tr:nth-of-type(2n) td {
    background-color: rgb(235,241,233);
}
/*.Calendar:nth-of-type(2n+1) .CalendarRemarks {*/
.Calendar:nth-of-type(1) .CalendarRemarks {
    background-color: rgb(248,215,205);
}
/*.Calendar:nth-of-type(2n) .CalendarRemarks {*/
.Calendar:nth-of-type(2) .CalendarRemarks {
    background-color: rgb(213,227,207);
}