/* base */
#base {
    width: 1220px;
    margin: 0 auto;
    text-align: left;
    color: #333;
    /* font-family: メイリオ,Meiryo,ヒラギノ角ゴ pro w3,hiragino kaku gothic pro,ＭＳ Ｐゴシック,sans-serif; */
    font: 400 15px helvetica neue,noto sans jp,yu gothic,YuGothic,ヒラギノ角ゴ pron w3,hiragino kaku gothic pron,Arial,メイリオ,Meiryo,sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

div#cont div#c3_lrr{
    width: 950px;
}

/* Layout */
.l_section{}

.l_section--primary{}

.l_section__item{
    margin-top: 24px;
}

.l_section--secondary{
    margin-top: 48px;
}

.l_section--thirdly{}

.l_nav{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.l_nav--localNav{
    /* margin:24px 0px; */
    font-size: 18px;
    list-style: none;
    border: 3px solid #DA231B;
    border-radius: 50px;
    /* padding: 20px; */
    color: #000;
}

.l_nav__item{
    position: relative;
}

.l_nav__item::before{
    position: absolute;
    content: "";
    top: 0;
    right: -10px;
    z-index: 1;
    width: 20px;
    height: 30px;
    border-right: 3px solid #DA231B;
    background: #fff;
    transform: skew(30deg);
}

.l_nav__item::after{
    position: absolute;
    content: "";
    bottom: 0;
    right: -10px;
    z-index: 1;
    width: 20px;
    height: 31px;
    border-right: 3px solid #DA231B;
    background: #fff;
    transform: skew(-30deg);
}

.l_nav__item:last-child::before,.l_nav__item:last-child::after{
    content: none;
    border-right: none;
    background: none;
}

.l_nav__target{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0px 20px;
    color: inherit;
    font-weight: bold;
}

.l_nav__target::before{
    position:absolute;
    border-right: solid 13px transparent;
    border-left: solid 13px #E2344A;
    top: -2px;
    left: -1px;
    z-index: 10;
}

.l_nav__target::after{
    position:absolute;
    border-left: solid 13px #fff;
    border-right: solid 13px transparent;
    top: -2px;
    left: -2px;
    z-index: 20;
}

.l_nav__target_txt{}

.l_nav__item--left{
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}
.l_nav__item--left:hover{
    background: #DA231B;
    color: #fff;
}

.l_nav__item--middle{}
.l_nav__item--middle:hover{
    background: #DA231B;
    color: #fff;
}

.l_nav__item--left:hover::before,.l_nav__item--left:hover::after,
.l_nav__item--middle:hover::before, .l_nav__item--middle:hover::after{
    background: #DA231B;
}


.l_nav__item--right{}
.l_nav__item--right:hover{
    background: #DA231B;
    color: #fff;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}

.l_grid {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap
}

.l_grid__item {
    display: flex
}

.l_grid__inner {
    display: block;
    width: 100%
}

.l_grid--hasGutter {
    margin: -12px
}


/* Module */
.m_herosArea{}

.m_herosArea__keyvisual{}

.m_keyvisual__heading{}

.m_keyvisual__img{}

.m_keyvisual__img>img{}

.m_herosArea__nav_wrap{}

.m_herosArea__copy{}

.m_herosArea__copy_txt{}

.m_herosArea__copy_link{
    font-weight: 500;
}

.m_herosArea__copy_link:hover{
    text-decoration: underline;
    opacity: .6;
}

.m_heading__ttl_wrap{
    font-size: 22px;
    font-weight: bold;
    padding-bottom: 8px;
    border-bottom: 2px dotted #DA231B;
}

.m_heading__ttl--step{
    position: relative;
    padding: 20px 0 0 24px;
    color: #DA231B;
}

.m_heading__ttl--step::before{
    position: absolute;
    content: url('../../../resource/img/webins_apply/webins-howto_ttl.png');
    left: 0;
    top: 0;
    display: block;
}

.m_heading__ttl{
    padding-left: 24px;
}

.m_body{}

.m_body__txt{}

.m_body__txt--attention{
    color: #666666;
}

.m_body__link{}

.m_body__link:hover{
    text-decoration: underline;
    opacity: .6;
}

.m_contact__btn{
    display: flex;
    justify-content: center;
}

.m_contact__link{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    box-shadow: inset -2px 0px 0 rgb(255 255 255 / 40%), -2px 2px 0 #b11b0b;
    color: #fff;
    background-color: #EA3636;
    font-size: 16px;
    font-weight: 600;
    height: 48px;
    width: 40%;
    line-height: 1.3;
    margin: 0 0 2px 2px;
    padding: 7px;
}

.m_contact__link:hover{
    box-shadow: inset -2px 2px 0 rgb(255 255 255 / 40%);
    transform: translate(-2px, 2px);
    text-decoration: none;
}

.m_contact__inner{}

.m_nav__wrap{
    margin-top: 24px;
}

.m_nav{
    /* display: flex;
    align-items: stretch;
    justify-content: flex-start; */
    margin: 0 auto
}

.m_nav__item__wrap{
    /* display: flex;
    height: 130px;
    width: 100%;
    padding: 2px;
    margin: 10px; */
}

.m_nav__item{
    position: relative;
    margin: 5px;
    padding: 8px 0;
    border: 2px solid #ccc;
    border-radius: 8px;
    text-align: center;
    font-weight: 700;
    background: #fff;
    color: #000;
    cursor: pointer;
}

.m_nav__link{}
.m_nav__link::before{
    content: "";
    display: block;
    width: 80%;
    height: 52px;
    margin: 0 auto 4px;
    line-height: 0;
    background: no-repeat center center;
}

.m_nav__link_koukaikouza_wrap--active{}
.m_nav__link_koukaikouza_wrap{}
.m_nav__link_koukaikouza_wrap--active, .m_nav__link_koukaikouza_wrap:hover{
    background: #E50C21;
    color: #fff;
    border: 1px solid #E50C21;

}

.m_nav__link_elearning_wrap--active{}
.m_nav__link_elearning_wrap{}
.m_nav__link_elearning_wrap--active, .m_nav__link_elearning_wrap:hover{
    background: #dc4682;
    color: #fff;
    border: 1px solid #dc4682;
}

.m_nav__link_text_wrap--active{}
.m_nav__link_text_wrap{}
.m_nav__link_text_wrap--active,  .m_nav__link_text_wrap:hover{
    background: #1B3EB1;
    color: #fff;
    border: 1px solid #1B3EB1;
}
.m_nav__link_assessment_wrap--active{}
.m_nav__link_assessment_wrap{}
.m_nav__link_assessment_wrap--active, .m_nav__link_assessment_wrap:hover{
    background: #5A39A8;
    color: #fff;
    border: 1px solid #5A39A8;
}
.m_nav__link_monchamp_wrap--active{}
.m_nav__link_monchamp_wrap{}
.m_nav__link_monchamp_wrap--active, .m_nav__link_monchamp_wrap:hover{
    background: #9E8313;
    color: #fff;
    border: 1px solid #9E8313;

}
.m_nav__link_other_wrap--active{}
.m_nav__link_other_wrap{}
.m_nav__link_other_wrap--active, .m_nav__link_other_wrap:hover{
    background: #333;
    color: #fff;
    border: 1px solid #333;
}

.m_nav__link_koukaikouza{}
.m_nav__link_koukaikouza::before{
    background-image: url('../../../resource/img/webins_apply/webins-howto_icon-bup-off.png');
    background-size: 28px 28px;
}

.m_nav__link_koukaikouza_wrap--active > .m_nav__link_koukaikouza::before,
.m_nav__link_koukaikouza_wrap:hover > .m_nav__link_koukaikouza::before{
    background-image: url('../../../resource/img/webins_apply/webins-howto_icon-bup-on.png');
    background-size: 28px 28px;
}

.m_nav__link_elearning{}
.m_nav__link_elearning::before{
    background-image: url('../../../resource/img/webins_apply/webins-howto_icon-elearning-off.png');
    background-size: 28px 28px;
}
.m_nav__link_elearning_wrap--active > .m_nav__link_elearning::before,
.m_nav__link_elearning_wrap:hover > .m_nav__link_elearning::before{
    background-image: url('../../../resource/img/webins_apply/webins-howto_icon-elearning-on.png');
    background-size: 28px 28px;
}
.m_nav__link_text{}
.m_nav__link_text::before{
    background-image: url('../../../resource/img/webins_apply/webins-howto_icon-text-off.png');
    background-size: 28px 28px;
}
.m_nav__link_text_wrap--active > .m_nav__link_text::before,
.m_nav__link_text_wrap:hover > .m_nav__link_text::before{
    background-image: url('../../../resource/img/webins_apply/webins-howto_icon-text-on.png');
    background-size: 28px 28px;
}

.m_nav__link_assessment{}
.m_nav__link_assessment::before{
    background-image: url('../../../resource/img/webins_apply/webins-howto_icon-assessment-off.png');
    background-size: 28px 28px;
}
.m_nav__link_assessment_wrap--active > .m_nav__link_assessment::before,
.m_nav__link_assessment_wrap:hover > .m_nav__link_assessment::before{
    background-image: url('../../../resource/img/webins_apply/webins-howto_icon-assessment-on.png');
    background-size: 28px 28px;
}

.m_nav__link_monchamp{}
.m_nav__link_monchamp::before{
    background-image: url('../../../resource/img/webins_apply/webins-howto_icon-monchamp-off.png');
    background-size: 28px 28px;
}
.m_nav__link_monchamp_wrap--active > .m_nav__link_monchamp::before,
.m_nav__link_monchamp_wrap:hover > .m_nav__link_monchamp::before{
    background-image: url('../../../resource/img/webins_apply/webins-howto_icon-monchamp-on.png');
    background-size: 28px 28px;
}

.m_nav__link_other{}
.m_nav__link_other::before{
    background-image: url('../../../resource/img/webins_apply/webins-howto_icon-other-off.png');
    background-size: 28px 28px;
}
.m_nav__link_other_wrap--active > .m_nav__link_other::before,
.m_nav__link_other_wrap:hover > .m_nav__link_other::before{
    background-image: url('../../../resource/img/webins_apply/webins-howto_icon-other-on.png');
    background-size: 28px 28px;
}

.m_inner_body__wrap{}

.m_inner_body{
    position: relative;
}

.m_inner__heading{
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
}

.m_inner__heading--koukaikouza{
    background: #ffdce4;
}

.m_inner__heading--text{
    background: #DBE3FF;
}

.m_inner__heading--assessment{
    background: #E2D6FF;
}

.m_inner__heading--monchamp{
    background: #F5EDCD;
}

.m_inner__heading--other{
    background: #D8D8D8;
}

.m_inner__ttl{}

.m_inner_body__section_wrap{
    margin-left: 12px;
    padding-left: 18px;
    border-left: 2px dotted;
}

.m_inner_body__section_wrap--noborder{
    margin-left: 12px;
    padding-left: 18px;
}

.m_inner_body__section_wrap::before{
    content: "";
    position: absolute;
    display: block;
    left: 16px;
    bottom: 0;
    width: 15px;
    height: 15px;
    border-top: 1px solid;
    border-right: 1px solid;
    transform: translateX(-11px) rotate(135deg);

}

.m_inner_body__section{}
.m_inner_body__section + .m_inner_body__section{
    margin-top: 48px;
}

.m_inner_body__subttl_wrap{
    padding: 5px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 24px;
}

.m_inner_body__subttl_wrap--koukaikouza{
    background: #E50C21;
}

.m_inner_body__subttl_wrap--text{
    background: #1B3EB1;
}

.m_inner_body__subttl_wrap--assessment{
    background: #5A39A8;
}

.m_inner_body__subttl_wrap--monchamp{
    background: #9E8313;
}

.m_inner_body__subttl_wrap--other{
    background: #333;
}

.m_inner_body__subttl{
    padding: 2px 10px;
}

.m_inner_body__text_wrap{}

.m_inner_body__text{}

.m_inner_body__text--attention{
    color: #666666;
}

.m_inner_body__img_wrap{}

.m_inner_body__img{
    margin: 15px 0px 15px 10px;
}

.m_inner_body__img>img{
    width: 100%;
}

.m_inner_body__img_link{}
.m_inner_body__img_link:hover{
    opacity: .6;
}

.m_banners {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -12px;
}

.m_banners__item {
    display: flex;
    justify-content: center;
    padding: 12px;
}

.m_banners__target {
    display: block;
    box-shadow: 4px 4px 8px #999;
    line-height: 0;
    transition: .3s opacity;
}

.m_banners__target:hover {
    opacity: .7;
}

/* utility */
.u_col1{width:8.333%;}
.u_col2{width:16.667%;}
.u_col3{width:25%;}
.u_col4{width:33.333%;}
.u_col5{width:41.666%;}
.u_col6{width:50%;}
.u_col7{width:58.333%;}
.u_col8{width:66.666%;}
.u_col9{width:75%;}
.u_col10{width:83.33%;}
.u_col11{width:91.666%;}
.u_col12{width:100%;}
.u_hide{display: none;}
.u_inline{display: block;}
.u_mt64{margin-top: 64px;}
.u_mb64{margin-bottom: 64px;}
@media screen and (max-width:768px){
    #base {
        width: 100%;
    }
    div#cont div#c3_lrr{
        width: 100%;
    }
    .l_nav__target_txt{
        font-size: 16px;
        letter-spacing: -1px;
    }
    .m_nav__item__wrap{
        margin: unset;
    }
    .m_nav__link{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0 auto;
        font-size: 12px;
        letter-spacing: -1px;
    }
    .m_nav__link::before{
        content: "";
        display: block;
        width: 50px;
        margin: unset;
        line-height: 0;
    }
    .m_nav__item{
        height: 72px;
    }
    .u_resMdCol1{width:8.333%;}
    .u_resMdCol2{width:16.667%;}
    .u_resMdCol3{width:25%;}
    .u_resMdCol4{width:33.333%;}
    .u_resMdCol5{width:41.666%;}
    .u_resMdCol6{width:50%;}
    .u_resMdCol7{width:58.333%;}
    .u_resMdCol8{width:66.666%;}
    .u_resMdCol9{width:75%;}
    .u_resMdCol10{width:83.33%;}
    .u_resMdCol11{width:91.666%;}
    .u_resMdCol12{width:100%;}
    .u_resMdHide{display: none;}
    .u_resMdInline{display: inline;}
    .u_resMdUnset{display: unset;}
}

@media screen and (max-width:599px){
    .m_nav__link{
        font-size: 14px;
    }
    .m_nav {
        justify-content: space-around;
        margin: -15px;
    }
    .u_resSmCol1{width:8.333%;}
    .u_resSmCol2{width:16.667%;}
    .u_resSmCol3{width:25%;}
    .u_resSmCol4{width:33.333%;}
    .u_resSmCol5{width:41.666%;}
    .u_resSmCol6{width:50%;}
    .u_resSmCol7{width:58.333%;}
    .u_resSmCol8{width:66.666%;}
    .u_resSmCol9{width:75%;}
    .u_resSmCol10{width:83.33%;}
    .u_resSmCol11{width:91.666%;}
    .u_resSmCol12{width:100%;}
    .u_resSmHide{display: none;}
    .u_resSmInline{display: inline;}
}

/* js */
.js_section {
    transition-duration: 600ms;
}
.js_hide_nav {
    opacity: 0;
    height: 0;
    transform: translate(0, 100px);
}
.js_inline_nav {
    opacity: 1;
    transform: translate(0, 0);
    height: auto;
}