@charset "UTF-8";

.page_bg{background-size: contain;}


.calender div{
    width: 100%;
    margin: 0 0 60px 0;
}


/*
.calender div{
    width: 100%;
    height: 100vw;
    box-sizing: border-box;
    overflow: scroll;
    white-space: nowrap;
    margin: 0 0 60px 0;
    border: 3px solid #00a99d;
}

.calender table{
    width: 100%;
    position: relative;
    margin: 0 auto;
    list-style: none;
    border-collapse: collapse;
    box-sizing: border-box;
    font-family: "Shin Go Regular", "sans-serif";
}

.calender table tr:nth-child(1) th{
    position: -webkit-sticky;
    position: sticky;
    top: -3px;
    z-index: 2;
    }

.calender table tr td:nth-child(1){
    position: -webkit-sticky;
    position: sticky;
    top: -60px;
    left: -3px;
    z-index: 1;
}


.calender table tr th:nth-child(1)::before,
.calender table tr td:first-of-type::before{
    content : "" ;
    position : absolute ;
    top : 0 ;
    left : 0 ;
    width : 100% ;
    height : 100% ;
    border-right : 2px solid #00a99d ;
}

.calender table tr:first-of-type th::before{
    content : "" ;
    position : absolute ;
    bottom : -2px ;
    left : 0 ;
    width : 100% ;
    height : 100% ;
    border-bottom : 2px solid #00a99d ;
}



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

.calender table tr:first-of-type {border: none;}


.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: block;
    width: 100%;
    box-sizing: border-box;
    vertical-align: middle;
    align-items: center;
}

.calender table td.name img{
    display: block;
    width: 70%;
    margin: 0 auto;
    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-bottom: 2px solid #00a99d; border-right: 2px solid #00a99d;}
.calender table td.name{border-right: 2px solid #00a99d;}
.calender table th.month{ padding: 10px; width: 100px; line-height: 1.4rem;  border-bottom: 2px solid #00a99d;}
.calender table th.month span { display: block;}
.calender table th.group{width: 14%;border-left: 2px solid #00a99d; border-bottom: 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;}
*/