@charset "shift_jis";
/* CSS Document */

.layout-wrapper[data-bg-color="1"]>div>div {
    padding: 0;
}

#diswebinar_header h1{
    background:url("/portal/page/out/webinar/2023/header_bg.png") no-repeat left top / cover;
    display: grid;
    grid-template-columns: 15.7% 1fr;
    column-gap: 1em;
    padding: 3.3% 4.45%;
    font-size:1.7em;;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    color: #fff;
    font-weight: bold;
    align-items:center;
}

#diswebinar_header h1 + p{
    position: relative;
}
#diswebinar_header h1 + p a{
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    display: grid;
    grid-template-columns:1fr 1.33em;
    column-gap:0.8em;
    position: absolute;
    top: -6.32em;
    right: 2.7%;
    color: #fff;
    background-color: #0070e3;
    font-size: 1.28em;
    font-weight: bold;
    padding: 1em 2em;
    line-height: 1.33em;
    border-radius: 2.33em;
}
#diswebinar_header h1 + p a::after{
    content: "";
    display: inline-block;
    height: 2em;
    background: url("/portal/page/out/webinar/2023/arrow.svg") no-repeat center /contain;
    border-bottom: #fff 3px solid;
}

#diswebinar_header h1 + p a:hover{
    opacity: 0.8;
    text-decoration: none;
}

/*=========================================
wb_year_label
===========================================*/

#diswebinar_header #wb_year_label{
    text-align: center;
    font-size: 3.42em;
    font-weight: bold;
    color: #000;
    padding: 0.3em;
}
#diswebinar_header #wb_year_label span{
    display: none;
}

#diswebinar_header #wb_year_label span.wb_current_year{
    display: inline;
}


/*=========================================
wb_year_navi
===========================================*/
#diswebinar_header #wb_year_navi{
    position: relative;
    margin: -5em 30px 3em;
}
#diswebinar_header #wb_year_navi li{
    display: flex;
}
#diswebinar_header #wb_year_navi a{
    position: relative;
    color: #0070e3;
    display: inline-block;
    text-decoration: underline;
}
#diswebinar_header #wb_prev_year a{
    padding-left: 1.5em;
    margin-left: -1.5em;
}
#diswebinar_header #wb_prev_year::before{
    content: "��";
    color: #0070e3;
    margin-right: 0.5em;
}
#diswebinar_header #wb_next_year{
    justify-content: flex-end;
}
#diswebinar_header #wb_next_year a{
    padding-right: 1.5em;
    margin-right: -1.5em;
}
#diswebinar_header #wb_next_year::after{
    content: "��";
    color: #0070e3;
    margin-left:0.5em;
}

/*=========================================
wb_month_navi
===========================================*/
#diswebinar_header .wb_month_navi{
    display: none;
}
#diswebinar_header .wb_month_navi.wb_current_month_navi{
    display: block;
}
#diswebinar_header .wb_month_navi ul{
    display:grid;
    margin: 0 30px;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    column-gap: 1px;
    text-align: center;
    font-size: 1.142em;
}

#diswebinar_header .wb_month_navi span{
    display: block;
    padding: 0.3em;
    color: #000;
    background-color: #ddd;
}
#diswebinar_header .wb_month_navi a{
    display: block;
    padding: 0.3em;
    color: #fff;
    background-color: #444;
}

#diswebinar_header .wb_month_navi a.wb_current_month{
    color: #fff;
    background-color: #0070e3;
    padding: 0.7em 0.3em;
}
#diswebinar_header .wb_month_navi a:hover{
    text-decoration: none;
    opacity: 0.8;
}


@media only screen and (max-width:1024px){
    
    #diswebinar_header h1{
        font-size: 2.34vw;
    }
    #diswebinar_header h1 + p a{
        font-size: 1.6vw;
    }
}

@media only screen and (max-width:940px){
     #diswebinar_header h1{
         grid-template-columns: 20% 1fr;
        font-size: 3vw;
    }
    #diswebinar_header h1 + p{
        text-align: right;
        margin:1em 0;
    }
    #diswebinar_header h1 + p a{
        position: static;
        display: inline-grid;
    align-items: center;
        font-size: 1em;
}
    #diswebinar_header h1 + p a br{
        display: none;
    }
    #diswebinar_header #webinar_year_label{
        padding: 0;
        font-size:7vw;
    }
    #diswebinar_header #wb_year_navi{
    margin: -3em 2.667% 1em;
}
    #diswebinar_header .wb_month_navi ul{
        margin: 0 2.667%;
    }
    
    #diswebinar_header .wb_month_navi ul {
        grid-template-columns: repeat(6, 1fr);
        align-items: end;
        grid-row-gap: 1px;
    }
    #diswebinar_header .wb_month_navi a.wb_current_month {
    padding: 0.5em 0.3em;
}
}