@charset "UTF-8";

.page_bg{background-size: contain;}

.calender div{
    width: 100%;
    box-sizing: border-box;
    padding:50px;
    margin: 0 0 60px 0;
    background: #fff;
    display: flex;
    box-shadow:5px 5px 8px 3px rgba(0,0,0,0.1);
}

.calender table{
    width: 900px;
    margin: 0 auto;
    border: 3px solid #00a99d;
    list-style: none;
    border-collapse: collapse;
    box-sizing: border-box;
    font-family: "Shin Go Regular", "sans-serif";
}

.calender table tr{
    border-top: 1px solid #00a99d;
    font-family: "Shin Go Regular", "sans-serif";
}



.calender table th{
    background: #fff;
    color: #00a99d;
    font-size: 1.2rem;
    padding: 8px 2px;
}

.calender table td{
    background: #fff9b1;
    font-feature-settings: "palt";
}

.calender table td span{
    display: block;
    width: 100%;
    height: 14px;
    background: #ff0000;
}

.calender table td.name,
.calender table td.group{
    padding: 4px 10px;
    vertical-align: middle;
}

.calender table td.name p{
    font-size: 1rem;
    display: inline-block;
    width: 130px;
    box-sizing: border-box;
    vertical-align: middle;
    align-items: center;
}

.calender table td.name img{
    display: inline-block;
    width: 72px;
    box-sizing: border-box;
    vertical-align: -6px;
}

.calender table td p.text{
    font-size: 0.55rem;
    line-height: 1rem;
    margin: 3px 0 0 0;
    display: block;
    text-align: center;
}




/*枠線と幅*/
.calender table th.name{width: 21%; border: 2px solid #00a99d;}
.calender table td.name{border-right: 2px solid #00a99d;}
.calender table th.month{width: 4%; line-height: 1.4rem; border-top: 2px solid #00a99d; border-bottom: 2px solid #00a99d;}
.calender table th.month span { display: block;}
.calender table th.group{width: 14%;border: 2px solid #00a99d;}
.calender table td.group{border-left: 2px solid #00a99d; text-align:center; font-size: 0.9rem;}


/*最初の三角*/
.calender table td span.first{
    display: block;
    width: calc(100% - 10px);
    height: 14px;
    background: #ff0000;
    margin:0 0 0 auto;
    position: relative;
}


.calender table tr td span.first:before{
    content: "";
    display: block;
    position: absolute;
    left: -10px;
    width: 10px;
    height: 14px;
    margin: 0 10px 0 0;
    background:linear-gradient(to bottom right, transparent 50%, #ff0000 50%) top left/ 100% 50% no-repeat,
    linear-gradient(to top right, transparent 50%, #ff0000 50%) bottom left / 100% 50% no-repeat;
}



/*最初　三角だけ*/
.calender table td span.first_triangle{
    display: block;
    width: calc(100% - 40px);
    height: 14px;
    background: #ff0000;
    margin:0 0 0 auto;
    position: relative;
}


.calender table tr td span.first_triangle:before{
    content: "";
    display: block;
    position: absolute;
    left: -10px;
    width: 10px;
    height: 14px;
    margin: 0 10px 0 0;
    background:linear-gradient(to bottom right, transparent 50%, #ff0000 50%) top left/ 100% 50% no-repeat,
    linear-gradient(to top right, transparent 50%, #ff0000 50%) bottom left / 100% 50% no-repeat;
}

/*最初の三角　半分まで*/
.calender table td span.first_half{
    display: block;
    width: calc(100% - 28px);
    height: 14px;
    background: #ff0000;
    margin:0 0 0 auto;
    position: relative;
}


.calender table tr td span.first_half:before{
    content: "";
    display: block;
    position: absolute;
    left: -10px;
    width: 10px;
    height: 14px;
    background:linear-gradient(to bottom right, transparent 50%, #ff0000 50%) top left/ 100% 50% no-repeat,
    linear-gradient(to top right, transparent 50%, #ff0000 50%) bottom left / 100% 50% no-repeat;
}










/*最後の三角*/
.calender table td span.last{
    display: block;
    width: calc(100% - 10px);
    height: 14px;
    background: #ff0000;
    margin:0 auto 0 0;
    position: relative;
}


.calender table tr td span.last:before{
    content: "";
    display: block;
    position: absolute;
    right: -20px;
    width: 10px;
    height: 14px;
    margin: 0 10px 0 0;
    background:linear-gradient(to bottom left, transparent 50%, #ff0000 50%) top left/ 100% 50% no-repeat,
    linear-gradient(to top left, transparent 50%, #ff0000 50%) bottom left / 100% 50% no-repeat;
}



/*最後　三角だけ*/
.calender table td span.last_triangle{
    display: block;
    width: calc(100% - 40px);
    height: 14px;
    background: #ff0000;
    margin:0 auto 0 0;
    position: relative;
}


.calender table tr td span.last_triangle:before{
    content: "";
    display: block;
    position: absolute;
    right: -20px;
    width: 10px;
    height: 14px;
    margin: 0 10px 0 0;
    background:linear-gradient(to bottom left, transparent 50%, #ff0000 50%) top left/ 100% 50% no-repeat,
    linear-gradient(to top left, transparent 50%, #ff0000 50%) bottom left / 100% 50% no-repeat;
}


/*最後の三角　半分まで*/
.calender table td span.last_half{
    display: block;
    width: calc(100% - 28px);
    height: 14px;
    background: #ff0000;
    margin:0 auto 0 0;
    position: relative;
}


.calender table tr td span.last_half:before{
    content: "";
    display: block;
    position: absolute;
    right: -20px;
    width: 10px;
    height: 14px;
    margin: 0 10px 0 0;
    background:linear-gradient(to bottom left, transparent 50%, #ff0000 50%) top left/ 100% 50% no-repeat,
    linear-gradient(to top left, transparent 50%, #ff0000 50%) bottom left / 100% 50% no-repeat;
}



/*１ヶ月だけ*/
.calender table td span.one_term{
    display: block;
    width: calc(100% - 20px);
    height: 14px;
    background: #ff0000;
    margin:0 auto;
    position: relative;
}

.calender table tr td span.one_term:before{
    content: "";
    display: block;
    position: absolute;
    right: -20px;
    width: 10px;
    height: 14px;
    margin: 0 10px 0 0;
    background:linear-gradient(to bottom left, transparent 50%, #ff0000 50%) top left/ 100% 50% no-repeat,
    linear-gradient(to top left, transparent 50%, #ff0000 50%) bottom left / 100% 50% no-repeat;
}

.calender table tr td span.one_term:after{
    content: "";
    display: block;
    position: absolute;
    left: -10px;
    width: 10px;
    height: 14px;
    margin: 0 10px 0 0;
    background:linear-gradient(to bottom right, transparent 50%, #ff0000 50%) top left/ 100% 50% no-repeat,
    linear-gradient(to top right, transparent 50%, #ff0000 50%) bottom left / 100% 50% no-repeat;
}



/*コンブ用*/
.calender table td.konbu span{
    display: block;
    width: calc(100% - 20px);
    height: 14px;
    background: #ff0000;
    margin:0 auto;
    position: relative;
}

.calender table tr td.konbu span.konbu_double:before{
    content: "";
    display: block;
    position: absolute;
    right: -20px;
    width: 10px;
    height: 14px;
    margin: 0 10px 0 0;
    background:linear-gradient(to bottom left, transparent 50%, #ff0000 50%) top left/ 100% 50% no-repeat,
    linear-gradient(to top left, transparent 50%, #ff0000 50%) bottom left / 100% 50% no-repeat;
}

.calender table tr td.konbu span.konbu_double:after{
    content: "";
    display: block;
    position: absolute;
    left: -10px;
    width: 10px;
    height: 14px;
    margin: 0 10px 0 0;
    background:linear-gradient(to bottom right, transparent 50%, #ff0000 50%) top left/ 100% 50% no-repeat,
    linear-gradient(to top right, transparent 50%, #ff0000 50%) bottom left / 100% 50% no-repeat;
}





/* 偶数列の背景色（TOPだけ） */
.calender table th:nth-child(odd) {background:#fff;}
.calender table th:nth-child(even) {background:#cceeeb;}

/*白*/
.calender table tr.white td:nth-child(odd) {background:#fff;}
.calender table tr.white td:nth-child(even) {background:#cdeeeb;}

/*黄色*/
.calender table tr.yellow td:nth-child(odd) {background:#fff9b1;}
.calender table tr.yellow td:nth-child(even) {background:#cde7a6;}

/*最後の列の背景色*/
.calender table tr th:last-of-type{background:#fff;}
.calender table tr.white td:last-of-type{background:#fff;}
.calender table tr.yellow td:last-of-type{background:#fff9b1;}

/*コンブ表の色修正*/
.calender table tr.yellow td.konbu{background: linear-gradient(90deg, #cde7a6 0%, #cde7a6 50%, #fff9b1 50%, #fff9b1 100%);}
.calender table tr.yellow td.konbu_green{background:  #cde7a6;}
.calender table tr.yellow td.konbu_yellow{background:  #fff9b1;}