/* index以外のサブページに反映 */

/*--------------------------------------------------------
    メインビジュアル
--------------------------------------------------------*/
.bl_mvCont{
    background-color: #D1E4F4;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    padding: 40px 20px;
    width: 100%;
}
.bl_mvCont .bl_flexCont{
    margin: 0 auto;
    max-width: 1080px;
}
.bl_mvCont .bl_text{
    max-width: 600px;
}
.bl_mvCont h1{
    color: #0556a1;
    font-weight: bold;
    font-size: 24px;
    text-align: center;
}
.bl_mvCont p{
    color: #000;
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-top: 5px;
    text-align: center;
}
.bl_mvCont figure{
    margin: 40px auto 0;
    max-width: 480px;
}
@media (min-width:768px){
    .bl_mvCont{
        padding: 60px 40px;
    }
    .bl_mvCont .bl_flexCont{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .bl_mvCont h1{
        text-align: left;
        font-size: 26px;
    }
    .bl_mvCont p{
        text-align: left;
        font-size: 18px;
    }
    .bl_mvCont figure{
        margin: 0;
        width: 40%;
    }
}
@media (min-width:1024px){
    .bl_mvCont h1{
        font-size: clamp(1.875rem, 0.173rem + 2.66vw, 2.5rem); /* 30~40px */
    }
    .bl_mvCont p{
        font-size: 24px; /* 18~24px */
    }
}
@media (min-width:1200px){
    .bl_mvCont figure{
        width: 50%;
    }
}

/*--------------------------------------------------------
    ぱんくずリスト
--------------------------------------------------------*/
.bl_breadcrumbs{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    max-width: 1080px;
    margin: 30px auto 60px;
    padding: 0 15px;
}
.bl_breadcrumbs li{
    font-size: 14px;
    font-weight: 500;
}
.bl_breadcrumbs li+li{
    margin-left: 15px;
}
.bl_breadcrumbs li+li::before{
    color: #666;
    content: '>';
    display: inline-block;
    margin-right: 15px;
}
.bl_breadcrumbs li a{
    color: #0556a1;
}
@media (min-width:768px){
    .bl_breadcrumbs{
        padding: 0 30px;
    }
    .bl_breadcrumbs li{
        font-size: 16px;
    }
}
@media (min-width:1100px){
    .bl_breadcrumbs{
        padding: 0;
    }
}

/*--------------------------------------------------------
    共通部分
--------------------------------------------------------*/
/*===== コンテナ =====*/
.bl_cont{
    max-width: 1080px;
}
@media (min-width:1200px){
    .bl_cont{
        margin: 80px auto 120px;
    }
}

/*===== 見出し =====*/
h2::after{
    background-color: #0556a1;
    content: '';
    display: block;
    margin: 10px auto 0;
    width: 30px;
    height: 3px;
}

/*===== リンク・ボタン =====*/
.bl_cont .el_link,
.bl_cont .el_btn{
    margin-top: 60px;
}

/*===== リスト =====*/
.bl_cont ul{
    list-style: none;
}
.bl_cont *+ul{
    margin-top: 20px;
}
.bl_cont ul li{
    position: relative;
    padding-left: 20px;
}
.bl_cont ul li::before{
    color: #0556a1;
    content: '・';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.bl_cont ul li+li{
    margin-top: 15px;
}

/*===== flex =====*/
.bl_cont .bl_flexCont{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
}
.bl_cont *+.bl_flexCont{
    margin-top: 40px;
}
.bl_cont .bl_flexCol{
    width: 100%;
}
.bl_cont .bl_flexCol+.bl_flexCol{
    margin-top: 30px;
}
@media (min-width:768px){
    .bl_cont .bl_flexCol+.bl_flexCol{
        margin-top: 0;
    }
}

/*===== テーブル =====*/
.bl_cont table{
    background-color: #fff;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    margin-top: 60px;
    word-wrap: break-word;
    width: 100%;
}
.bl_cont table tr{
    border-bottom: 2px solid #CCCCCC;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
}
.bl_cont table th{
    color: #0556a1;
    font-size: 18px;
    text-align: left;
    padding: 20px 0;
    width: 100%;
}
.bl_cont table td{
    padding: 0 0 20px;
    width: 100%;
}
@media (min-width:768px){
    .bl_cont table tr::after{
        background-color: #0556a1;
        content: '';
        display: block;
        width: 25%;
        height: 2px;
        position: absolute;
        bottom: -2px;
        left: 0;
    }
    .bl_cont table th{
        text-align: center;
        padding: 30px 15px;
        width: 25%;
    }
    .bl_cont table td{
        padding: 30px 15px;
        width: 70%;
    }
}
@media (min-width:1200px){
    .bl_cont table tr::after{
        width: 20%;
    }
    .bl_cont table th{
        font-size: 20px;
        width: 20%;
    }
    .bl_cont table td{
        width: 75%;
    }
}

/*===== 定義リスト =====*/
.bl_cont dl{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: 15px;
}
.bl_cont dt{
    color: #0556a1;
    font-weight: 500;
    text-align: left;
    width: 15%;
}
.bl_cont dd{
    width: 80%;
}
@media (min-width:768px){
    .bl_cont dt{
        width: 60px;
    }
    .bl_cont dd{
        width: calc( 100% - 80px );
    }
}

/*--------------------------------------------------------
    プログラム概要・支援内容
--------------------------------------------------------*/
.bl_flexCont.shien .bl_flexCol{
    background-color: #EEF4FA;
    border-radius: 10px;
    padding: 30px;
}
.bl_flexCont.shien h3{
    color: #000;
    padding: 0;
}
.bl_flexCont.shien h3::before{
    display: none;
}
.bl_flexCont.shien li+li{
    border-top: 1px solid #CADFF0;
    padding-top: 15px;
}
.bl_flexCont.shien li+li::before{
    top: 15px;
}
.bl_flexCont.shien span{
    color:#0556a1;
    display: block;
    font-weight: 500;
}
@media (min-width:768px){
    .bl_flexCont.shien .bl_flexCol{
        width: 48%;
    }
}

/*--------------------------------------------------------
    募集要項・応募方法
--------------------------------------------------------*/
/*===== 期間外対応 =====*/
.bl_guideline{
    position: relative;
}
.bl_guideline.outside{
    margin-top: 60px;
}
.bl_guideline.outside::after{
    background-color: #ffffff80;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/*--------------------------------------------------------
    よくあるご質問
--------------------------------------------------------*/
/*===== アンカーリンク =====*/
.bl_anchorCont{
    background-color: #EEF4FA;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 40px auto 60px;
    padding: 20px;
}
.bl_anchorCont li{
    padding: 0!important;
    width: 100%;
}
.bl_anchorCont li::before{
    display: none!important;
}
.bl_anchorCont li+li{
    border-top: 1px solid #CADFF0;
    margin-top: 15px;
    padding-top: 15px!important;
}
.bl_anchorCont a{
    font-weight: bold;
    display: block;
    text-align: center;
    margin: 0;
    width: 100%;
}
@media (min-width:768px){
    .bl_anchorCont li{
        margin: 0;
        width: auto;
    }
    .bl_anchorCont li+li{
        border-top: 0;
        margin-top: 0!important;
        padding-top: 0!important;
        border-left: 1px solid #CADFF0;
        margin-left: 10px;
        padding-left: 10px!important;
    }
}
@media (min-width:1024px){
    .bl_anchorCont li+li{
        margin-left: 20px!important;
        padding-left: 20px!important;
    }
}

/*===== 見出し =====*/
.bl_faqCont+h3{
    margin-top: 80px;
}

/*===== 質問コンテナ =====*/
.bl_faqCont{
    background-color: #EEF4FA;
    border-radius: 10px;
    cursor: pointer;
    padding: 20px;
}
.bl_faqCont+.bl_faqCont{
    margin-top: 30px;
}
@media (min-width:768px){
    .bl_faqCont{
        padding: 30px;
    }
}

/* 質問・回答 */
.bl_faqCont .el_frequently,
.bl_faqCont .el_answer{
    position: relative;
}
.bl_faqCont .el_frequently{
    appearance: none;
    background-color: transparent;
    border: none;
    color: #000;
    cursor: pointer;
    font-size: 16px;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    text-align: left;
    outline: none;
    padding: 0;
    padding: 0 35px;
    width: 100%;
}
.bl_faqCont .el_answer{
    display: none;
    margin-top: 30px;
    padding-left: 35px;
}
.bl_faqCont .el_answer.active{
    display: block;
}
@media (min-width:768px){
    .bl_faqCont .el_frequently{
        padding: 0 40px;
    }
    .bl_faqCont .el_answer{
        padding-left: 40px;
    }
}
@media (min-width:1200px){
    .bl_faqCont .el_frequently{
        font-size: 18px;
    }
}

/* 質問・回答　Q・Aアイコン */
.bl_faqCont .el_frequently::before,
.bl_faqCont .el_answer::before{
    font-weight: bold;
    font-size: 24px;
    line-height: 1;
    position: absolute;
    top: -2px;
    left: 0;
}
.bl_faqCont .el_frequently::before{
    content: 'Q.';
    color: #0556a1;
}
.bl_faqCont .el_answer::before{
    content: 'A.';
    color: #d4200d;
}
@media (min-width:768px){
    .bl_faqCont .el_frequently::before,
    .bl_faqCont .el_answer::before{
        font-size: 26px;
    }
}

/* 質問　矢印 */
.bl_faqCont .el_frequently::after{
    background-image: url(../img/icon_faq-arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    right: 0;
    width: 20px;
    height: 20px;
}
.bl_faqCont .el_frequently.active::after{
    transform: scale(1, -1);
}
@media (min-width:768px){
    .bl_faqCont .el_frequently::after{
        width: 25px;
    }
}


/*--------------------------------------------------------
    お問い合わせ
--------------------------------------------------------*/
/*===== お問い合わせ先 =====*/
.bl_contact{
    background-color: #EEF4FA;
    border-radius: 10px;
    margin-top: 40px;
    padding: 20px;
}
@media (min-width:768px){
    .bl_contact{
        padding: 40px 20px;
    }
}

/* 見出し */
.bl_contact h3{
    text-align: center;
    color: #000;
    margin-top: 0!important;
    padding: 0;
}
.bl_contact h3::before{
    display: none;
}
@media (min-width:768px){
    .bl_contact h3 br{
        display: none;
    }
}

/* 担当 */
.bl_contact dl{
    justify-content: center;
    font-size: 18px;
}
.bl_contact dt,
.bl_contact dd{
    width: auto;
}
.bl_contact dd{
    margin-left: 20px;
}
@media (min-width:768px){
    .bl_contact dl{
        font-size: 20px;
    }
}

/* flex */
.bl_contact .bl_flexCont{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    margin: 30px auto 0;
    position: relative;
    max-width: 750px;
}
.bl_contact .bl_flexCol{
    margin: 0;
    text-align: center;
    width: 100%;
}
.bl_contact .bl_flexCol+.bl_flexCol{
    border-top: 1px solid #CADFF0;
    margin-top: 30px;
    padding-top: 30px;
}
.bl_contact h4{
    font-weight: 500;
    margin-top: 0!important;
}
.bl_contact h4::before{
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 30px;
    height: 30px;
    vertical-align: middle;
}
.bl_contact .mail h4::before{
    background-image: url(../img/icon_mail.svg);
}
.bl_contact .tel h4::before{
    background-image: url(../img/icon_tel.svg);
}
.bl_contact h4+p,
.bl_contact h4+a{
    color: #0556a1;
    font-weight: bold;
    font-size: 20px;
}
.bl_contact .el_note{
    color: #333;
    font-weight: normal;
    font-size: 16px;
    margin-top: 15px;
}
@media (min-width:768px){
    .bl_contact .bl_flexCont::before{
        background-color: #CADFF0;
        content: '';
        display: block;
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .bl_contact .bl_flexCol{
        width: 45%;
    }
    .bl_contact .bl_flexCol+.bl_flexCol{
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
    }
}
@media (min-width:1024px){
    .bl_contact h4+p,
    .bl_contact h4+a{
        font-size: 24px;
    }
}

/*--------------------------------------------------------
    募集情報・トピックス　共通部分
--------------------------------------------------------*/
/*===== コンテナ =====*/
.bl_cont.news{
    margin-top: 60px;
}

/*===== ページネーション =====*/
.bl_pagination{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 80px;
}
.bl_pagination a,
.bl_pagination p{
    border-radius: 50%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0!important;
    width: 50px;
    height: 50px;
}
.bl_pagination .el_number{
    border: 1px solid #0556a1;
    background-color: #0556a1;
    margin-left: 20px!important;
}
.bl_pagination .el_number.current{
    background-color: #fff;
    color: #0556a1;
}
.bl_pagination p.el_prev,
.bl_pagination p.el_next{
    opacity: 0.5;
}
.bl_pagination .el_next{
    margin-left: 20px!important;
}

/*--------------------------------------------------------
    トピックス
--------------------------------------------------------*/
/*===== 一覧 =====*/
.bl_topicsList{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: 40px;
    position: relative;
}
.bl_topicsCol{
    border-bottom: 1px solid #CADFF0;
    padding-bottom: 30px;
    width: 100%;
}
.bl_topicsCol+.bl_topicsCol{
    margin-top: 30px;
}
.bl_topicsCol figure{
    aspect-ratio: 4 / 3;
    border: 1px solid #CADFF0;
    overflow: hidden;
}
.bl_topicsCol figure img{
    object-fit: cover;
    object-position: center;
    transition: transform .6s ease;
    width: 100%;
    height: 100%;
}
.bl_topicsCol a:hover{
    opacity: 1;
}
.bl_topicsCol a:hover img{
    transform: scale(1.1);
}
.bl_topicsCol img{
    width: 100%;
}
.bl_topicsCol time{
    color: #0556a1;
    display: block;
    font-weight: 500;
    margin: 10px auto 5px;
}
.bl_topicsCol p{
    color: #000;
}
@media (min-width:768px){
    .bl_topicsCol{
        border-bottom: none;
        padding-bottom: 0;
        width: 46%;
    }
    .bl_topicsCol+.bl_topicsCol{
        margin-top: 0;
    }
    .bl_topicsCol:nth-child(n+3){
        margin-top: 40px;
    }
}
@media (min-width:1024px){
    .bl_topicsCol{
        width: 31%;
    }
   .bl_topics .bl_topicsList::after{
        content: '';
        display: block;
        width: 31%;
    }
     .bl_topicsCol:nth-child(n+3){
        margin-top: 0;
    }
    .bl_topicsCol:nth-child(n+4){
        margin-top: 40px;
    }
}

/*--------------------------------------------------------
    募集情報
--------------------------------------------------------*/
/*===== 一覧 =====*/
.bl_infoList{
    margin: 30px auto;
}
.bl_infoCol{
    border-bottom: 1px solid #CADFF0;
    padding-bottom: 20px;
}
.bl_infoCol+.bl_infoCol{
    margin-top: 20px;
}
.bl_infoCol time{
    color: #0556a1;
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
}
.bl_infoCol p{
    color: #000;
}
@media (min-width:1200px){
    .bl_infoCol a{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .bl_infoCol time{
        margin: 0;
    }
    .bl_infoCol p{
        width: calc( 100% - 130px );
    }
}

/*--------------------------------------------------------
    募集情報・トピックス　記事ページ
--------------------------------------------------------*/
/*===== コンテナ =====*/
.single{
    margin-top: 60px;
}

/*===== タイトルコンテナ =====*/
.single .bl_titleCont{
    border-bottom: 2px solid #0556a1;
    margin-bottom: 40px;
    padding-bottom: 20px;
}
.single .bl_titleCont .el_time{
    color: #0556a1;
    font-weight: 500;
    margin-bottom: 10px;
}
.single .bl_titleCont h2{
    text-align: left;
    margin: 0;
}
.single .bl_titleCont h2::after{
    display: none;
}

/*===== ボタン =====*/
.single .el_btn.list{
    margin-top: 120px;
}

/*===== 見出し =====*/
.single h3,
.single h4{
    margin: 40px auto 20px;
}

.single figure{
    display: block;
    margin: 0 auto;
    max-width: 650px;
}
.single .bl_flexCont > *:nth-child(n+2){
    margin-top: 30px;
}

/*===== 768px以上で横並び =====*/
@media (min-width:768px){
    .single .bl_flexCont > figure{
        margin: 0;
        max-width: none;
    }
    .single .bl_flexCont > *:nth-child(n+2){
        margin-top: 0;
    }

    /* 2つ横並び */
    .single .bl_flexCont.col2 > *{
        width: 48%;
    }
    .single .bl_flexCont.col2 > *:nth-child(n+3){
        margin-top: 40px;
    }

    /* 3つ横並び */
    .single .bl_flexCont.col3 > *{
        width: 31%;
    }
    .single .bl_flexCont.col3 > *:nth-child(n+4){
        margin-top: 40px;
    }

    /* 4つ横並び */
    .single .bl_flexCont.col4 > *{
        width: 24%;
    }
    .single .bl_flexCont.col4 > *:nth-child(n+5){
        margin-top: 20px;
    }
}