@charset "UTF-8";

/* -------------------------------------------
 header
------------------------------------------- */
.header{ background-color: #ffffff; color: var(--font-color);}
.header__container a,
.header__container span{ color: var(--font-color);}

.navBtn span { background: var(--font-color);}


/* -------------------------------------------
 information
------------------------------------------- */
.information{ padding-top: 186px;}
.information h2{ text-align: center;}
.information__container{ max-width: 840px; margin: 6rem auto; padding: 0 20px;}

.information__list{ margin-top: 6rem;}
.information__list li:not(:last-child){ margin-bottom: 2rem;}
.information__listItem{ display: flex; gap: 2rem; justify-content: space-between;}
.information__photo{ width: 20%;}
.information__photo img{ object-fit: cover; object-position: center; max-width: 100px; max-height: 133px;}
.information__txtBox { line-height: 1.5;width: 100%;}
.information__txtBox time{ display: block; font-size: 14px; margin-bottom: 1rem;}
.information__txtBox p{ font-size: 18px;}
.information__txtBox a:hover{ text-decoration: underline;}


.pagination { text-align: right; margin-top: 1rem;}
.pagination a { border: 1px solid #000; padding: .5rem 1rem; font-size: 14px;}
.pagination a:hover { border: 1px solid #000; color: #fff; background-color: #000;}
.pagination a.is-active { border: 1px solid #000; color: #fff; background-color: #000;}
.pagination a.page-prev,
.pagination a.page-next { border: unset;}
.pagination a:hover.page-prev,
.pagination a:hover.page-next { border: unset; background: unset; color: #000;}

@media screen and (max-width: 767px) {

    .information{ padding-top: 120px; margin-bottom: 100px;}
    .information__photo{ width: 30%;}
    .information__photo img{ min-width: 80px; min-height: 116px;}
    .information__txtBox p{ font-size: 16px;}
}