@charset "UTF-8";

p{margin-bottom:1em;}

@media(min-width:768px){
.w50per{
    width:50%;
}
.w80per{
    width:80%;
}
}

/* レスポンシブテーブルでスマホのときだけグレー背景にしたい場合 */
@media(max-width:767px){
    .ta-bg-gray{
        background: #f5f5f5;
    }
}

/*======================================================
オレンジ角10pxボタンの設定
======================================================*/
.btn-radius10 a{
    border-color:#ff9766;
}

.btn-radius10 a:hover{
    background:#ff9766;
}



/*======================================================
「地域で活動したい」の設定
======================================================*/

.title-border-active::before,
.title-border-active::after{
    background: #F4A580;
}

.ico-circle-before::before{
    color:#F4A580;
}


.ico-arrow-green::before,
.ico-arrow-green::after{
    color:#21937D;
}

.border-active{
    border:2px solid #F4A580;
    padding:40px;
    margin-bottom:20px;
}

@media(max-width:600px){
    .border-active{
        padding:10px;
    }
}

/* 88小地域福祉活動計画づくり */

.active-list{
    margin-bottom:1em;
}

/* リストの下にマージンを入れたいとき */

.list-mb05 li{
    margin-bottom:0.5em;
}

.list-mb10 li{
    margin-bottom:0.5em;
}

.list-mb15 li{
    margin-bottom:1.5em;
}

.list-mb20 li{
    margin-bottom:2em;
}


/*======================================================
ボランティア・市民活動センター
======================================================*/

/*----------- 写真とテキスト2カラムレイアウト -----------*/

.active-column-2{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.active-column-img{
    flex-basis: 30%;
}

.active-column-text{
    flex-basis:68%;
}
.active-column-text-button{
    max-width:500px;
    margin:10px 0;
}

@media(max-width:767px){
    .active-column-img{
        flex-basis:100%;
    }
    .active-column-text{
        flex-basis: 100%;
    }
}

/*-----------------------------------------------------
研修会single
-----------------------------------------------------*/

.vol-course-cont{
    padding:3%;
    margin:2%;
    border:1px solid #e4e4e4;
    border-radius: 10px;
}

@media(max-width:600px){
    .vol-course-cont{
        margin:0;
    }
}

.title-vol-course p{
    margin-bottom:2% 0;
}

/* コースの詳細部分 */
.vol-course-detail > dt{
    /* border-bottom:2px dashed #F4A580; */
    font-weight: bold;
    color:#ee6526;
}

.vol-course-detail > dt::before{
    font-family: "Font Awesome 6 Pro";
    content:"\f4d8";
    font-weight: bold;
    margin-right:0.5em;
    color:#7AC67B;
}

.vol-course-detail > dd{
    padding:1em 1.5em;
    margin-bottom:1em;
    border-bottom:1px dashed #ccc;
}

.entry-rimit{
    color:#f00;
    font-weight: bold;
}

.vol-course-process > dd{
    margin:0 0 1em 1.5em;
}

.vol-course-process > dt{
    color:#21937D;
    font-weight: bold;
}

.vol-phone::before{
    font-family: "Font Awesome 6 Pro";
    content:"\f095";
    margin-right:0.3em;
    font-weight: bold;
}

.vol-address::before{
    font-family: "Font Awesome 6 Pro";
    content:"\f674";
    margin-right:0.3em;
    font-weight: bold;
}

.vol-fax::before{
    font-family: "Font Awesome 6 Pro";
    content:"\f1ac";
    margin-right:0.3em;
    font-weight: bold;
}

.vol-mobile::before{
    font-family: "Font Awesome 6 Pro";
    content:"\f3cf";
    margin-right:0.3em;
    font-weight: bold;
}

.btn-vol-course-tirasi{
    max-width:300px;
}

.btn-vol-course-tirasi a:hover{
    background: #F8D9CA;
    color:#333;
}

/*-----------------------------------------------------
研修会archive
-----------------------------------------------------*/

.vol-course-archive{
    border-bottom:1px dashed #999;
    padding-bottom:0.5em;
    margin-bottom:0.5em;
}

.single-vol-course h3 p{
    margin-bottom:0;
}

/*-----------------------------------------------------
ボランティア大学校
-----------------------------------------------------*/
.vol-collage-paper-title{
    position:relative;
    padding-left:80px;
}

.vol-collage-paper-title span::before{
    content:'';
    background:url('../img/active/vol-collage/ico-book.png');
    background-size:contain;
    width:50px;
    height:50px;
    display: inline-block;
    position:absolute;
    top:50%;
    left:20px;
    transform:translateY(-50%); 

    }

/*-----------------------------------------------------
ボランティアってなんでしょう
-----------------------------------------------------*/    

.vol-what-bg-left{
    background: url(../img/active/vol-what/bg-left.jpg) no-repeat -50px bottom;
    background-size: 250px;
}

.vol-what-bg-right{
    background: url(../img/active/vol-what/bg-right.jpg) no-repeat right -50px top;
    background-size: 200px;
}