@charset 'utf-8';

/* flexboxのスタイル追加 */
.l_pr-m_flexbox {
    gap: 20px 5px;
}

.l_pr-m_flexbox_card {
    width: calc(100% / 3 - 5px);
    display: flex;
    flex-direction: column;
    text-align: center;
}

.l_pr-m_flexbox_card a {
    border-radius: 8px;
    transition: .5s;
    border: 1px solid transparent;
    padding: 5px 0;
}

/* ホバーした時は早めにtransitionする */
.l_pr-m_flexbox_card a:hover {
    background: #fffcf5;
    border: #f7a919 1px solid;
    transition: .3s;
}

.l_pr-m_flexbox_card a:active {
    transform: scale(.95);
}

.l_pr-m_flexbox_card figure {
    font-weight: 500;
    font-size: .95em;
    padding: 0 15px;
    margin: 0 auto;
    background-image: url(../) repeat;
}

.l_pr-m_flexbox_card figure img {
    object-fit: contain;
    width: auto;
    margin: 0 auto;
    height: 280px;
    /* box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.08); */
}

.l_pr-m_flexbox_card .l_pr-m_date {
    font-size: .85em;
    font-weight: normal;
    color: #666;
}

@media(max-width:1024px) {

    /* 1024px以下になったら２列固定する */
    .l_pr-m_flexbox {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .l_pr-m_flexbox li {
        width: 100%;
    }

}

/* タイトル付きボックス */
@media (max-width: 768px) {
    .l_outreach.unit_title_box {
        padding: 2em .5em 0 10px;
    }
}

/* パディング無し */
.l_no_padding {
    padding: 0 !important;
}

/* ----------------------- */
/* アコーディオン　タイトル */
/* ----------------------- */
.bpts_accordion_area.l_outreach_acd>li {
    margin-bottom: 15px;
}

.bpts_accordion_area.l_outreach_acd section {
    border-bottom: none;
    /* box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.1); */
}

.l_outreach_acd .accordion_title {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-left: 10px;
    padding-top: .5em;
    padding-bottom: .5em;
    border-left: 3px solid #4eb2d9;
}

.l_outreach_acd .accordion_title.close {
    border-left: 3px solid #fff;
    box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.1);
}

.l_outreach_acd_title_wrap {
    display: flex;
    flex-direction: column;
    width: calc(100% - 80px);
}

/* タグのラップ */
.l_outreach_acd_tag_area {
    display: flex;
    flex-wrap: wrap;
}

.l_outreach_acd .accordion_title h3 {
    font-size: 1.05em;
    line-height: 1.5;
}

/* タイトル内のタグ */
.accordion_title .l_outreach_acd_tag.type,
.accordion_title .l_outreach_acd_tag.course {
    font-size: .85em;
}

/* 各授業のアコーディオンタイトル　サムネイル画像 */
.l_outreach_acd .accordion_title .l_accordion_thumb {
    width: 90px;
    height: auto;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

@media(max-width:768px) {
    .l_outreach_acd .accordion_title h3 {
        font-size: 1em;
        margin-bottom: 5px;
    }

    .l_outreach_acd .accordion_title .l_accordion_thumb {
        width: 75px;
    }
}

/* ----------------------- */
/* タグ　※全体 */
/* ----------------------- */
.l_outreach_acd_tag {
    display: inline-block;
    margin: 3px 5px 3px 0;
    padding: 0 1em;
    border-radius: 20px;
    background-color: #ececec;
    font-weight: 500;
    color: #8a8a8a;
    line-height: 1.6;
}

.l_outreach_acd_tag.onoff_on,
.l_outreach_acd_tag.onoff_on.type {
    font-weight: 600;
    color: #ffffff;
    background-color: #3d4653;
}

/* 授業形態 */
.l_outreach_acd_tag.onoff_on.type {
    color: #3d4653;
    background-color: #ffffff;
    border: 1px solid #3d4653;
}

.l_outreach_acd_tag.onoff_on.course {
    color: #fff;
    background-color: #3b3b3b;
}

/* 情報 */
.l_outreach_acd_tag.onoff_on.course.joho {
    color: #113aad;
    background-color: #e9efff;
    border: 1px solid #113aad;
}

/* 電気 */
.l_outreach_acd_tag.onoff_on.course.denki {
    color: #db0750;
    background-color: #fdf0f5;
    border: 1px solid #d30049;
}

/* 機械 */
.l_outreach_acd_tag.onoff_on.course.kikai {
    color: #d13101;
    background-color: #f8e8e4;
    border: 1px solid #d13101;

}

/* 建設 */
.l_outreach_acd_tag.onoff_on.course.kensetsu {
    color: #097938;
    background-color: #e2f9e7;
    border: 1px solid #097938;

}


/* ----------------------- */
/* アコーディオン　中身 */
/* ----------------------- */

.l_outreach_acd .accordion_box {
    padding: 0 15px 0 10px;
    border-left: 3px solid #4eb2d9;
    margin-bottom: 0;
}

.l_outreach_acd .accordion_box p {
    margin-bottom: .5em;
}

/* ------アコーディオン内のテーブル------- */
.l_outreach_acd .unit_table_side {
    margin-top: 0;
    margin-bottom: 0;
}

.l_outreach_acd .unit_table_side table tr th {
    background-color: transparent;
    width: 25%;
}

.l_outreach_acd .unit_table_side table tr:last-child th,
.l_outreach_acd .unit_table_side table tr:last-child td {
    border-bottom: none;
}

@media(max-width:768px) {
    .l_outreach_acd .unit_table_side table tr th {
        width: 100%;
    }

    .l_outreach_acd .unit_table_side table tr {
        padding-bottom: 0px;
    }

    .l_outreach_acd .unit_table_side table tr:last-child {
        border-bottom: none;
    }

    .l_outreach_acd .unit_table_side table tr td {
        padding-left: 10px !important;
    }
}

/* ------アコーディオン内のリスト------- */
/* 丸リスト */
.l_outreach_acd .col_mark_circle {
    margin: 5px 0 5px 1em;
}
/* 丸数字リスト */
.l_outreach_acd .col_circle_number {
    margin: 0;
    margin-bottom: 1em;
}

.l_outreach_acd .col_mark_circle>li,
.l_outreach_acd .col_circle_number>li {
    margin: 10px 0 5px;
    line-height: 1.6;
}

@media(max-width:768px) {

    /* 丸数字リストを左に寄せる */
    .l_outreach_acd .col_circle_number {
        margin-left: -10px;
    }
}

/* -------アコーディオン内の画像------- */
.l_outreach_acd_imageflex {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.l_outreach_acd_imageflex img {
    max-width: 300px;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    object-fit: cover;
}

/* ----------------------- */
/* タイムライン */
/* ----------------------- */
.unit_timeline_yoko {
    position: relative;
    z-index: 1;
    margin-top: 8em;
}

/* 実施が決定した場合 */
.l_timeline_bg {
    font-weight: 600;
    color: #685547;
    position: absolute;
    z-index: -1;
    /* background-color: #fff6dc ; */
    border-radius: 10px;
    padding: 1em;
    width: 220%;
    height: 300px;
    max-width: 500px;
    left: -50px;
    top: -8em;

    background: repeating-linear-gradient(45deg, #fffaed, #fffaed 15px, #fff 0, #fff 20px);
}

.l_timeline_bg span::before {
    content: "\f061";
    font-weight: 800;
    font-family: "Font Awesome 5 Free";
    padding-left: 5px;
    padding-right: 5px;
    display: inline-block;
}

/* ２つめは長めに */
.unit_timeline_yoko>li:nth-of-type(2) {
    width: 340px;
    padding-right: 4em;
}

/* ４つめは短めに */
.unit_timeline_yoko>li:nth-of-type(4) {
    width: 180px;
}

@media (max-width: 1024px) {

    /* 設定を消す */
    .unit_timeline_yoko>li:nth-of-type(4) {
        width: auto;
        padding-right: 0;
    }

    .unit_timeline_yoko>li:nth-of-type(2) {
        width: auto;
        padding-bottom: 6em;
    }

}

@media (max-width: 1024px) {
    .unit_timeline_yoko {
        margin-top: 0;
    }

    .unit_timeline_yoko>li:nth-of-type(2) {
        padding-right: 0;
    }

    /* 実施が決定した場合 */
    .l_timeline_bg {
        padding-left: 2.5em;
        left: -15px;
        top: -5em;
        width: 105%;
        max-width: none;
        height: 210%;
    }

    .l_timeline_bg span::before {
        transform: rotate(90deg);
    }
}

@media (max-width: 768px) {
    .l_timeline_bg {
        left: -25px;
        width: 115%;
    }
}