@charset "UTF-8";

/************************************************************/
/*   C1   */
/************************************************************/
@media screen and (max-width:767px) { /*SP*/
    #C1{
        padding: 60px 0 0;
        overflow: hidden;
    }
    .C1_set{
        width: 100%;
    }
    .C1_key_set{
        width: 100%;
        margin-bottom: 40px;
        display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-end;
        flex-direction: column;
    }
    .C1_key_svg{
        height: 39vw; max-height: 144px;
        aspect-ratio: 185 / 144;
        margin-bottom: 20px;
    }
    .C1_key_box{
        font-size: 1.8rem; font-weight: bold; line-height: 1;
    }
    .C1_box{
        width: 100%;
    }
    .C1_tx01{
        margin-bottom: 15px;
        font-size: 2.1rem; font-weight: bold;
    }
    .C1_BR{
        display: inline;
    }
    .C1_tx02{
        font-size: 1.6rem; line-height: 2.5;
    }
    .C1_img{
        width: 90%;
        margin-bottom: -30px;
    }
}
@media screen and (min-width:768px) and ( max-width:1023px) { /*TB*/
    #C1{
        padding: 90px 0 0;
        overflow: hidden;
    }
    .C1_set{
        width: 100%;
    }
    .C1_key_set{
        width: 100%;
        margin-bottom: 30px;
        display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-end;
        flex-direction: column;
    }
    .C1_key_svg{
        height: 100px;
        aspect-ratio: 110 / 20;
        margin-bottom: 30px;
    }
    .C1_key_box{
        font-size: 3.2rem; font-weight: bold; line-height: 1;
    }
    .C1_box{
        width: 100%;
    }
    .C1_tx01{
        margin-bottom: 45px;
        font-size: 2.4rem; font-weight: bold;
        line-height: 2.4rem;
    }
    .C1_BR{
        display: none;
    }
    .C1_tx02{
        font-size: 1.6rem; line-height: 2.5;
    }
    .C1_img{
        width: 70%;
        margin-bottom: -40px;
    }
}
@media screen and (min-width:1024px) , print { /*PC*/
    #C1{
        padding: 90px 0;
        position: relative; z-index: 1;
    }
    .C1_set{
        width: 100%;
        display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
        flex-direction: column;
    }
    .C1_key_set{
        width: 100%; max-width: 1080px;
        margin-bottom: 30px;
        display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-end;
        flex-direction: column;
    }
    .C1_key_svg{
        height: 130px;
        aspect-ratio: 110 / 20;
        margin-bottom: 30px;
    }
    .C1_key_box{
        font-size: 3.2rem; font-weight: bold; line-height: 1;
    }
    .C1_box{
        width: 100%; max-width: 840px;
        padding-right: 395px;
    }
    .C1_tx01{
        margin-bottom: 45px;
        font-size: 2.4rem; font-weight: bold;
        line-height: 2.4rem;
    }
    .C1_BR{
        display: none;
    }
    .C1_tx02{
        font-size: 1.6rem; line-height: 2.5;
    }
    .C1_img{
        position: absolute; z-index: -1;
        bottom: 0; left: 0; right: 0; margin: auto;
        width: 100%; max-width: 1420px;
        height: 100%;
        display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: flex-end;
    }
    .C1_img img{
        width: 740px;
    }
}

/************************************************************/
/*   C2 - Video   */
/************************************************************/
@media screen and (max-width:767px) { /*SP*/
    #C2{
        height: 160px;
        position: relative;
        overflow: hidden;
    }
    #video {
        min-width: 100%; min-height: 100%;
        width: 100%; height: 100%;
        object-fit: cover;
        position: absolute;
        top: 50%; left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    .coverTop {
        width: 100%; height: 100%;
        position: absolute; z-index: 1;
        background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.164) 50%, rgba(0, 0, 0, 0.384) 50%);
        background-size: 2px 2px;
    }
}
@media screen and (min-width:768px) , print { /*PC&TB*/
    #C2{
        height: 450px;
        position: relative;
        overflow: hidden;
    }
    #video {
        min-width: 100%; min-height: 100%;
        width: 100%; height: 100%;
        object-fit: cover;
        position: absolute;
        top: 50%; left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    .coverTop {
        width: 100%; height: 100%;
        position: absolute; z-index: 1;
        background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.164) 50%, rgba(0, 0, 0, 0.384) 50%);
        background-size: 2px 2px;
    }
}

/************************************************************/
/*   C3 - 1YR SCHEDULE   */
/************************************************************/
@media screen and (max-width:767px) { /*SP*/
    #C3{
        padding: 60px 0 0;
    }
    .C3_key_set{
        width: 100%;
        text-align: center;
    }
    .C3_key_svg{
        height: 39vw; max-height: 144px;
        aspect-ratio: 290 / 144;
        margin: 0 auto 20px;
    }
    .C3_key_box{
        font-size: 2.1rem; font-weight: bold; line-height: 1;
    }
}
@media screen and (min-width:768px) and ( max-width:1023px) { /*TB*/
    #C3{
        padding: 90px 0 0;
    }
    .C3_key_set{
        width: 100%;
        text-align: center;
    }
    .C3_key_svg{
        height: 100px;
        aspect-ratio: 833 / 130;
        margin: 0 auto 20px;
    }
    .C3_key_box{
        font-size: 3.2rem; font-weight: bold; line-height: 1;
    }
}
@media screen and (min-width:1024px) , print { /*PC*/
    #C3{
        padding: 90px 0 0;
    }
    .C3_key_set{
        width: 100%;
        text-align: center;
    }
    .C3_key_svg{
        height: 130px;
        aspect-ratio: 833 / 130;
        margin: 0 auto 20px;
    }
    .C3_key_box{
        font-size: 3.2rem; font-weight: bold; line-height: 1;
    }
}

/* scroll area */
@media screen and (max-width:767px) { /*SP*/
    .C3_set{
        width: 100%;
        padding: 60px 0 0;
        position: relative; z-index: 1;
    }
    .C3_set::before{
        content: ''; position: absolute; z-index: -1;
        top: 0; left: 20px;
        width: 80vw; max-width: 300px;
        height: 100%;
        background-image: url(/about/img/schedule_bgimg01_sp.svg), url(/about/img/schedule_bgimg02_sp.svg);
        background-repeat: no-repeat;
        background-position: top 70px left, bottom 10px left;
        background-size: contain;
    }
    .C3_scroll_box{
        width: 100%;
        -webkit-overflow-scrolling: touch;
        overflow-x: scroll;
    }
    .C3_box{
        height: 147vw; max-height: 550px;
        aspect-ratio: 2756 / 800;
        padding: 0 10px;
    }
}
@media screen and (min-width:768px) , print { /*PC&TB*/
    .C3_set{
        width: 100%;
        padding: 90px 0 0;
        position: relative; z-index: 1;
    }
    .C3_set::before{
        content: ''; position: absolute; z-index: -1;
        top: 0; left: 0; right: 0; margin: auto;
        width: 100%; max-width: 1450px;
        height: 100%;
        background-image: url(/about/img/schedule_bgimg01_pc.svg), url(/about/img/schedule_bgimg02_pc.svg);
        background-repeat: no-repeat;
        background-position: top 120px center, bottom 20px center;
        background-size: calc(100% - 100px);
    }
    .C3_scroll_box{
        width: 100%;
        padding: 0 0 10px;
        -webkit-overflow-scrolling: touch;
        overflow-x: scroll;
    }
    .C3_box{
        height: 56vw; max-height: 800px;
        aspect-ratio: 2836 / 800;
        padding: 0 50px;
    }
}

/************************************************************/
/*   C4 - STAFF   */
/************************************************************/
@media screen and (max-width:767px) { /*SP*/
    #C4{
        padding: 60px 0;
    }
    .C4_key_set{
        width: 100%;
        text-align: center;
        margin-bottom: 30px;
    }
    .C4_key_svg{
        height: 18vw; max-height: 65px;
        aspect-ratio: 323 / 130;
        margin: 0 auto 20px;
    }
    .C4_key_box{
        font-size: 2.1rem; font-weight: bold; line-height: 1;
    }
}
@media screen and (min-width:768px) and ( max-width:1023px) { /*TB*/
    #C4{
        padding: 90px 0;
    }
    .C4_key_set{
        width: 100%;
        text-align: center;
        margin-bottom: 60px;
    }
    .C4_key_svg{
        height: 100px;
        aspect-ratio: 323 / 130;
        margin: 0 auto 20px;
    }
    .C4_key_box{
        font-size: 3.2rem; font-weight: bold; line-height: 1;
    }
}
@media screen and (min-width:1024px) , print { /*PC*/
    #C4{
        padding: 90px 0;
    }
    .C4_key_set{
        width: 100%;
        text-align: center;
        margin-bottom: 60px;
    }
    .C4_key_svg{
        height: 130px;
        aspect-ratio: 323 / 130;
        margin: 0 auto 20px;
    }
    .C4_key_box{
        font-size: 3.2rem; font-weight: bold; line-height: 1;
    }
}

/* slide box */
@media screen and (max-width:767px) { /*SP*/
    .C4_slide_box{
        width: 100%;
    }
    .C4_slide_img{
        width: 100%;
        margin-bottom: 20px;
    }
    .C4_slide_inner{
        width: 100%;
    }
    .C4_slide_name{
        text-align: right;
        margin-bottom: 20px;
        font-size: 2.1rem; font-weight: bold; line-height: 1;
    }
    .C4_slide_name span{
        display: inline-block;
        font-size: 1.6rem; font-weight: normal;
    }
    .C4_slide_tx{
        font-size: 1.6rem;
    }
}
@media screen and (min-width:768px) , print { /*PC&TB*/
    .C4_slide_box{
        width: 100%;
    }
    .C4_slide_img{
        width: 100%;
        margin-bottom: 20px;
    }
    .C4_slide_inner{
        width: 100%;
    }
    .C4_slide_name{
        text-align: right;
        margin-bottom: 20px;
        font-size: 2.4rem; font-weight: bold; line-height: 1;
    }
    .C4_slide_name span{
        display: inline-block;
        font-size: 1.6rem; font-weight: normal;
    }
    .C4_slide_tx{
        font-size: 1.6rem;
    }
}

/* SLICK */
@media screen and (max-width:767px) { /*SP*/
    .C4_slide_wrap{
        width: 100%;
    }
    #C4_slide_set{
        width: 100%;
        position: relative;
    }
    #C4_slide_set ._slickBox{
        padding: 0 20px;
    }
}
@media screen and (min-width:768px) and ( max-width:839px) { /*TB*/
    .C4_slide_wrap{
        width: 100%;
    }
    #C4_slide_set{
        width: 100%;
        padding: 0 20px;
        position: relative;
    }
    #C4_slide_set ._slickBox{
        max-width: 420px;
        padding: 0 30px;
    }
}
@media screen and (min-width:840px) , print { /*PC*/
    .C4_slide_wrap{
        width: 100%;
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
        overflow: hidden;
    }
    #C4_slide_set{
        width: 1260px;  /* 420px * box数 */
        position: relative;
    }
    #C4_slide_set ._slickBox{
        width: 420px;
        padding: 0 30px;
    }
}

/* slick arrow */
@media screen and (max-width:767px) { /*SP*/
    .C4_prev{
        position: absolute; z-index: 1;
        top: 25%; left: 20px;
        width: 14px; height: 30px;
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
    }
    .C4_next{
        position: absolute;
        top: 25%; right: 20px;
        width: 14px; height: 30px;
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
    }
    .C4_prev svg,
    .C4_next svg{
        height: 30px;
        aspect-ratio: 14 / 32;
        fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;
    }
    .C4_prev:hover,
    .C4_next:hover{
        cursor: pointer;
    }
}
@media screen and (min-width:768px) and ( max-width:839px) { /*TB*/
    .C4_prev{
        position: absolute; z-index: 1;
        top: calc((50% - 90px) /2); left: calc((100% - 100vw) /2 + 50px);
        width: 40px; height: 90px;
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
    }
    .C4_next{
        position: absolute;
        top: calc((50% - 90px) /2); right: calc((100% - 100vw) /2 + 50px);
        width: 40px; height: 90px;
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
    }
    .C4_prev svg,
    .C4_next svg{
        height: 90px;
        aspect-ratio: 14 / 32;
        fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;
    }
    .C4_prev:hover,
    .C4_next:hover{
        cursor: pointer;
    }
}
@media screen and (min-width:840px) and ( max-width:1279px) { /*TB*/
    .C4_prev{
        position: absolute; z-index: 1;
        top: calc((270px - 90px) /2); left: calc((100% - 100vw) /2 + 50px);
        width: 40px; height: 90px;
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
    }
    .C4_next{
        position: absolute;
        top: calc((270px - 90px) /2); right: calc((100% - 100vw) /2 + 50px);
        width: 40px; height: 90px;
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
    }
    .C4_prev svg,
    .C4_next svg{
        height: 90px;
        aspect-ratio: 14 / 32;
        fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;
    }
    .C4_prev:hover,
    .C4_next:hover{
        cursor: pointer;
    }
}
@media screen and (min-width:1280px) , print { /*PC*/
    .C4_prev{
        position: absolute; z-index: 1;
        top: calc((270px - 90px) /2); left: 300px;
        width: 40px; height: 90px;
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
    }
    .C4_next{
        position: absolute;
        top: calc((270px - 90px) /2); right: 300px;
        width: 40px; height: 90px;
        display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;
    }
    .C4_prev svg,
    .C4_next svg{
        height: 90px;
        aspect-ratio: 14 / 32;
        fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;
    }
    .C4_prev:hover,
    .C4_next:hover{
        cursor: pointer;
    }
}