/* CSS Document */
/*@import url("../css/style.css");*/
.info .info_list {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
}
.info .info_item .info_img a{
    display: block;
    height: 100%;
}
.info .info_item .info_caption {
    padding: 1em;
}
.info .info_item .time{
    color: #b1b1b1;
	margin-bottom: .8em;
}
.info .info_item .caption p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.info .info_item .category{
    margin-bottom: 1em;
}
.info .info_item .category li{
    display: inline-block;
    background-color: #EDEBE9;
}
.info .info_item .category a{
    padding: .5em 1em;
    font-size: 1.1rem;
}
/*詳細記事*/
.info_article .info_item .caption  {
    font-size: 2.1rem;
}
.info_article .info_item .category{
    margin: 2em 0 1em;
}
.info_article .info_item .category li{
    display: inline-block;
    background-color: #EDEBE9;
}
.info_article .info_item .category a{
    padding: .5em 1em;
    font-size: 1.1rem;
}
.info_article .info_item .time {
	margin: .5em 0;
	color: #b1b1b1;
}
.info_article .info_article_area{
    margin-bottom: 3em;
}
.info_article .info_article_area .info_caption{
    padding: 0 2em;
}
.info_article .details p:not(:last-of-type){
    margin-bottom: 1em;
}
.info_article .pager{
    padding: 0 2em;
    margin-top: 3em;
}
.info_article .pager .next{
    margin-right: auto;
}
.info_article .pager .prev{
    margin-left: auto;
}
.info_article .pager .next .icon-arrow{
    transform: scale(-1, 1);
    margin-left: 0;
    margin-right: 1em;
}
.details p span {
    line-height: 140%;
}
@media screen and (min-width:768px){
	.info .info_list {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
    .info .info_item .info_box{
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: auto;
        column-gap:1em;
		margin-bottom: 1em;
    }
	/*詳細記事*/
	.info_article {
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
	.info_article .info_item .info_box .info_img {
		text-align: center;
	}
	.info_article .info_item .info_box .info_img img {
		width: 90%;
	}
    .info_caption figure {
        text-align: center;
    }
}
@media screen and (min-width:1280px){
    .info .info_list{
        display: grid;
		column-gap: 1em;
    }
}