@charset "utf-8";
/* Box01 */
#box01{width: 100%; margin: 0 0 120px; align-items: center;}
#box01 .mTit02{margin: 0 0 30px;}

@media screen and (min-width: 1001px) {
    #box01 .img{width: 50%;}
    #box01 .outer{width: 50%; display: flex; justify-content: flex-end; padding: 0 20px;}
    #box01 .inner{width: 100%; max-width: 520px; padding: 0 5rem 0 0;}   
}

@media screen and (max-width: 1000px) {
    #box01{padding: 0 30px;}
    #box01 .outer{width: 100%; margin: 0 0 40px;}
    #box01 .img{width: 100%;}
}

@media screen and (max-width: 768px) {
    #box01{margin: 0 0 80px;}
    #box01 .mTit02{margin: 0 0 20px;}
    #box01 .outer{margin: 0 0 30px;}
}




/* Calendar */
#calendar-wrap{margin-bottom: 30px;}
#calendar{background: #000; text-align: center; position: relative;}

#calendar .head .container {display: flex; font-size: min(2.2vw,2rem); line-height: 1.2; max-width: 1400px; border: 1px solid #fff; background: #000;}
@media only screen and (min-width: 769px) {
    #calendar .head.fix {position: fixed; top: 80px; left: 0; width: 100%; z-index: 8;}
}


#calendar .cont {max-width: 1400px; position: relative; border: 1px solid #fff; border-top: 0;}

#calendar .col{width: 7%; border-right: 1px solid #fff; padding: 26px 0; font-weight: 600;}
#calendar .col:last-of-type{border-right: none;}
#calendar .colfix{width: 16%;}

#calendar .cate{background: #fff; font-size: min(2vw,2.1rem); line-height: 1.4; color: #000; padding: 24px; position: relative;}
#calendar .cate::after{content: ""; width: 100%; height: 1px; background: #000; position: absolute; bottom: -1px; left: 0;}
#calendar .row:last-of-type .cate::after{display: none;}
#calendar .cate p{margin: 10px 0 0 0;}
#calendar .cate img {width: 100%; max-width: 195px;}

#calendar .row{position: relative; border-bottom: 1px solid #fff;}
#calendar .row.last {border-bottom: 0;}
#calendar .row.last .cate::after {display: none;}

#calendar [class*="line"]{position: absolute; top: 0; bottom: 0; width: 1px; border-left: 1px dashed #fff;}
#calendar .line01{left: calc(23% - 1px);}
#calendar .line02{left: calc(30% - 1px);}
#calendar .line03{left: calc(37% - 1px);}
#calendar .line04{left: calc(44% - 1px);}
#calendar .line05{left: calc(51% - 1px);}
#calendar .line06{left: calc(58% - 1px);}
#calendar .line07{left: calc(65% - 1px);}
#calendar .line08{left: calc(72% - 1px);}
#calendar .line09{left: calc(79% - 1px);}
#calendar .line10{left: calc(86% - 1px);}
#calendar .line11{left: calc(93% - 1px);}

#calendar [class*="time"]{position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 2px; background: #fff; display: block;}
#calendar [class*="time"]::before{content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; width: 16px; height: 16px; border-radius: 100%; background: #fff;}
#calendar [class*="time"]::after{content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; width: 0; height: 0; border-top: 9px solid transparent; border-left: 15px solid #fff; border-bottom: 9px solid transparent;}

#calendar .time01{left: 16%;}
#calendar .time02{left: 23%;}
#calendar .time03{left: 30%;}
#calendar .time04{left: 37%;}
#calendar .time05{left: 44%;}
#calendar .time06{left: 51%;}
#calendar .time07{left: 58%;}
#calendar .time08{left: 65%;}
#calendar .time09{left: 72%;}
#calendar .time10{left: 79%;}
#calendar .time11{left: 86%;}
#calendar .time12{left: 93%;}

#calendar .x1{width: 7%;}
#calendar .x2{width: 14%;}
#calendar .x3{width: 21%;}
#calendar .x4{width: 28%;}
#calendar .x5{width: 35%;}
#calendar .x6{width: 42%;}
#calendar .x7{width: 49%;}
#calendar .x8{width: 56%;}
#calendar .x9{width: 63%;}
#calendar .x10{width: 70%;}
#calendar .x11{width: 77%;}
#calendar .x12{width: 84%;}

@media screen and (max-width: 768px) {
    .scrollSp{overflow-x: scroll; margin-right: -15px;}
    #calendar-wrap {padding: 0 30px;}
    #calendar{width: 738px; border: 0;}
    #calendar .head {border: 0; background: #000; z-index: 4; position: sticky; top: 0; left: 0;}
    #calendar .head .container {width: 100%; font-size: min(3.5vw, 1.7rem); border: 0; border-bottom: 1px solid #ffffff;}
    #calendar .cont {width: 100%; border: 0;}

    /*Set sticky*/
    .scrollSp {width: 100%; height: 70vh; overflow: scroll; transform: translateZ(0); -webkit-overflow-scrolling: touch; overscroll-behavior: none; border: 1px solid #ffffff;}

    

    /* calculate */
    #calendar .colfix {width: 16% !important; position: sticky; left: 0; top: 0; z-index: 2; width: 20%;}
    #calendar .col {width: 7%; padding: 20px 0;}
    #calendar .cate {font-size: min(3.5vw, 1.6rem); padding: 5px;}
    #calendar .cate p{margin: 0;}
    #calendar .line01{left: calc(23% - 1px);}
    #calendar .line02{left: calc(30% - 1px);}
    #calendar .line03{left: calc(37% - 1px);}
    #calendar .line04{left: calc(44% - 1px);}
    #calendar .line05{left: calc(51% - 1px);}
    #calendar .line06{left: calc(58% - 1px);}
    #calendar .line07{left: calc(65% - 1px);}
    #calendar .line08{left: calc(72% - 1px);}
    #calendar .line09{left: calc(79% - 1px);}
    #calendar .line10{left: calc(86% - 1px);}
    #calendar .line11{left: calc(93% - 1px);}

    #calendar .time01{left: 16%;}
    #calendar .time02{left: 23%;}
    #calendar .time03{left: 30%;}
    #calendar .time04{left: 37%;}
    #calendar .time05{left: 44%;}
    #calendar .time06{left: 51%;}
    #calendar .time07{left: 58%;}
    #calendar .time08{left: 65%;}
    #calendar .time09{left: 72%;}
    #calendar .time10{left: 79%;}
    #calendar .time11{left: 86%;}
    #calendar .time12{left: 93%;}

    #calendar .x1{width: 7%;}
    #calendar .x2{width: 14%;}
    #calendar .x3{width: 21%;}
    #calendar .x4{width: 28%;}
    #calendar .x5{width: 35%;}
    #calendar .x6{width: 42%;}
    #calendar .x7{width: 49%;}
    #calendar .x8{width: 56%;}
    #calendar .x9{width: 63%;}
    #calendar .x10{width: 70%;}
    #calendar .x11{width: 77%;}
    #calendar .x12{width: 84%;}
}

/* Swipe */
@media only screen and (min-width: 769px) {
    .swipe{display: none;}
}

@media only screen and (max-width: 768px) {
    .swipe{display: flex; justify-content: center; align-items: center; font-size: 1.3rem; margin: 0 0 15px;}
    .swipe:after{content: ""; background: url("../img/common/ic-swipe.png") no-repeat center center/100% auto; width: 26px; height: 26px; margin-left: 10px; position: relative; top: 1px;}
}