@charset "utf-8";

/*********************************************
 *
 * index.html（記事一覧）
 *
 *********************************************/
.blog-page {
    display: flex;
    width: 1280px;
    margin: 0 auto;
    align-items: flex-start;
}

@media screen and (max-width: 768px) {
    .blog-page {
        display: initial;
        width: 100%;
    }
}

.blog-h2 {
    position: relative;
    background-color: #214DA6;
    width: 100%;
    height: 290px;
    font-size: 60px;
    font-weight: 700;
    color: #fff;
    padding-top: 37px;
    z-index: -2000;
    text-align: center;
    margin-bottom: 340px;
}
.blog-h2 > span {
    font-size: 20px;
    position: absolute;
    top:96px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.blog-h2:after {
    content: url(../images/lower/blog-title.jpg);
    position: absolute;
    top:200px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
    .blog-h2 {
        height: 7rem;
        font-size: 1.6rem;
        padding: 1.5rem 0;
        margin-bottom: 3rem;
    }
    .blog-h2 > span {
        font-size: 1rem;
        top:2.3rem;
    }
    .blog-h2:after {
        display: none;
    }
}

.blog-list {
    margin-right: 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    width: 100%;
}
@media screen and (max-width: 768px) {
    .blog-list {
        margin-top: 3rem;
        margin-right: initial;
        padding: 0 20px;
    }
}


/*-----------------------------------------*/
/* カード */
/*-----------------------------------------*/
.blcard {
    width: 300px;
    box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, .3);
    margin: 0 30px 40px 0;
    color: #222;
    background-color: #FFF;
}
/*== 下に押し込まれる（立体が平面に） */
/*hoverの際にY軸に4pxずらす*/
.blcard:hover {
    transform: translateY(4px);
}

.blcard > .thum {
    position: relative;
}
.blcard > .thum .cat {
    position: absolute;
    top:0;
    right: 0;
    padding: 3px 10px;
    background-color: #214DA6;
    color: #fff !important;
    font-size: 18px;
}

.blcard > .thum img {
    width: 300px;
    height: 180px;
    object-fit: cover;
}
.blcard > .info {
    padding: 10px;
}
.blcard > .info .title {
    font-size: 18px;
    font-weight: 700;
}
.blcard > .info .text {
    font-size: 16px;
    padding-top: 10px;
}
.blcard > .info .date {
    font-size: 14px;
    padding-top: 10px;
}
@media screen and (max-width: 768px) {
    .blcard {
        width: 100%;
        box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, .3);
        margin: 0 0 30px 0;
    }
    .blcard > .thum img {
        width: 100%;
        height:128px;
    }
}



/*********************************************
 *
 * side（サイドバー）
 *
 *********************************************/
.side {
    width: 260px;
}
aside li {
    padding-bottom: 20px;
    font-size: 16px;
    color: #222;
}
aside li:last-child {
    padding-bottom: 40px;
}
.side-news___title {
    background-color: #214DA6;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 10px !important;
    border-radius: 8px;
}
.side .name {
    background-color: #214DA6;
    color: #fff;
    font-weight: 500;
    padding: 5px 0 5px 20px;
}
.side .titile-list {
    background-color: #E4EDF2;
    padding: 5px 20px;
}

select{
    position: relative;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    border: 1px solid #222;
    border-radius: 5px;
    padding: 0 10px;
}
.container {
    position: relative;
    width: 100%;
}
.container:after {
    content: "";
    position: absolute;
    right: 10px;
    top: 17px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #214DA6;
    border-left: 2px solid #214DA6;
    pointer-events: none;
    transform: translateY(-50%) rotate(
-135deg);
}

@media screen and (max-width: 768px) {
    .side {
        width: 100%;
        padding: 0 20px;
        margin-bottom: 100px;
    }
}


/*********************************************
 *
 * ページネーション
 *
 *********************************************/

.page-numbers {
    width: 100%;
    display: flex;
    justify-content: center;
}
.page-numbers > li {
    padding: 0 10px;
}

/*********************************************
 *
 * single.html（個別記事）
 *
 *********************************************/
.blog-article {
    width: 100%;
    margin-right: 60px;
    background-color: #FFF;
    padding: 3rem;
    border-radius: 20px;
}
.blog-article > div .title {
    color: #214DA6;
    font-size: 30px;
    font-weight: 700;
    padding-bottom: 15px;
}
.blog-article > div .date {
    font-size: 16px;
    padding-right: 10px;
    border-right: solid 1px #222;
}
.blog-article > div .cat {
    font-size: 16px;
    padding-left: 10px;
}
.blog-article > div .thum {
    padding: 40px 0;
}
.blog-article > .text {
    padding-bottom: 100px;
}

@media screen and (max-width: 768px) {
    .blog-article {
        margin-top: 3rem;
        margin-right: 0;
        padding: 20px;
    }
    .blog-article > div .title {
        font-size: 25px;
    }
    .blog-article > div .thum {
        padding: 40px 0;
    }
    .blog-article > .text {
        padding-bottom: 100px;
    }
}

.blog-etc {
	position: relative;
}
.blog-etc::after {
	position: absolute; /*--positionを追加--*/
	top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	content: "";
	width: 1px; /*--縦線の太さ(幅)--*/
	height: 100%;
	background-color: #214DA6; /*--縦線の色--*/
}
.blog-etc > .prev .point {
    color: #214DA6;
    font-size: 18px;
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
}
.blog-etc > .prev div .thumetc img {
    width: 130px;
    height: 84px;
    object-fit: cover;
    padding: 0;
}
.blog-etc > .prev div .title {
    font-size: 16px;
    width: 200px;
    padding-left: 20px;
}
.blog-etc > .next .point {
    color: #214DA6;
    font-size: 18px;
    font-weight: 700;
    position: relative;
    text-align: right;
    padding-bottom: 10px;
}
.blog-etc > .next .thumetc img {
    width: 130px;
    height: 84px;
    object-fit: cover;
    padding: 0;
}
.blog-etc > .next div .title {
    font-size: 16px;
    width: 200px;
}
@media screen and (max-width: 768px) {
    .blog-etc {
        margin: 100px 0;
        display: none;
    }
    .blog-etc::after {
        display: none;
    }
    .blog-etc > .prev {
        margin-bottom: 20px;
    }
    .blog-etc > .prev .point {
        color: #214DA6;
        font-size: 18px;
        font-weight: 700;
        position: relative;
        padding-bottom: 10px;
    }
    .blog-etc > .prev div .thumetc img {
        width: 130px;
        height: 84px;
        object-fit: cover;
        padding: 0;
    }
    .blog-etc > .prev div .title {
        font-size: 16px;
        width: 200px;
        padding-left: 20px;
    }
    .blog-etc > .next .point {
        color: #214DA6;
        font-size: 18px;
        font-weight: 700;
        position: relative;
        text-align: right;
        padding-bottom: 10px;
    }
    .blog-etc > .next .thumetc img {
        width: 130px;
        height: 84px;
        object-fit: cover;
        padding: 0;
    }
    .blog-etc > .next div .title {
        font-size: 16px;
        width: 200px;
    }
}