@charset "UTF-8";
/*************************
共通class
************************ */
#mv {
	background-image: url("../../img/lp/friends/img_main.jpg");
  	background-size: cover;
  	width: 100%;
  	height: 100vh;
}
@media screen and (max-width: 767.98px) {
	#mv {
  		height: 50vh;
	}
}

#mv .container {
  	width: 100%;
	max-width: 95%;
  	height: 100vh;
	position: absolute;
	top: 0;
}
@media screen and (max-width: 767.98px) {
	#mv .container {
		max-width: 98%;
  		height: 50vh;
	}
}

#mv .mvbox-info-r h1 {
	position: absolute;
  	top: 50%;
  	right: 0;
  	transform: translateY(-50%);
  	width: 60.14%;
  	max-width: 84.2rem;
}
@media screen and (max-width: 767.98px) {
	#mv .mvbox-info-r h1 {
  		width: 45%;
	}
}

#sec-friends .sec-title {
	padding: 12rem 0;
}
@media screen and (max-width: 767.98px) {
	#sec-friends .sec-title {
		padding: 2rem 0 4rem;
	}
}

#sec-friends .sec-title h2 {
	text-align: center;
}

#sec-friends .sec-title h2 img {
	display: inline-block;
	width: 100%;
	max-width: 56rem;
}

.news-posts-list {
	margin: 0 auto;
  	display: grid;
  	grid-template-columns: repeat(3, 1fr);
  	grid-row-gap: 4rem;
  	grid-column-gap: 4rem;
}
@media (max-width: 767.98px) {
	.news-posts-list {
    	grid-template-columns: 1fr;
    	grid-row-gap: 2.4rem;
    	grid-column-gap: 0;
	}
}

.news-posts-item {
	display: grid;
  	grid-template-rows: auto auto 1fr;
  	height: 100%;
}

.news-posts-item figure { 
	margin: 0; 
}
.news-posts-item-img { 
	aspect-ratio: 1 / 1; 
	overflow: hidden; 
}
.news-posts-item-img img {
	width: 100%;
  	height: 100%;
  	object-fit: cover;
  	object-position: center center;
  	display: block;
  	transition: transform .25s ease;
}

.news-posts-item-head {
	border-left: 2px solid #EA5705;
	margin: 2rem 0;
	padding-left: 1rem;
}
@media (max-width: 767.98px) {
	.news-posts-item-head {
		margin: 1.5rem 0;
	}
}

.news-posts-item-head .postname {
	display: block;
  	font-size: 2rem;
}
@media (max-width: 767.98px) {
	.news-posts-item-head .postname {
  		font-size: 1.8rem;
	}
}

.news-posts-item-head .postnum {
	display: block;
}

.news-posts-item-txt p {
	line-height: 1.8;
}

/* ========== Pagination ========== */
.pagination {
  margin: 12rem auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .8rem;
}
@media (max-width: 767.98px) {
  .pagination {
    margin: 6rem auto 0;
  }
}

/* ページ番号（数字） */
.pagination .page-numbers {
  width: 55px; 
  height: 55px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #FFF;
  background: #E6E6E6;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
@media (max-width: 767.98px) {
  .pagination .page-numbers {
    width: 35px; 
    height: 35px;
    font-size: 1.5rem;
  }
}

/* ホバー＆現在ページ */
.pagination .page-numbers:hover {
  background: #0E223F; 
  color: #FFF; 
}
.pagination .current {
  background: #0E223F; 
  color: #FFF; 
}

/* 前へ・次へ */
.pagination .prev,
.pagination .next {
  width: 55px; 
  height: 55px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #E6E6E6;
  text-indent: -9999px; /* テキスト非表示 */
  overflow: hidden;
}
@media (max-width: 767.98px) {
  .pagination .prev,
  .pagination .next {
    width: 35px; 
    height: 35px;
  }
}

.pagination .prev:hover,
.pagination .next:hover {
  background: #0E223F; 
}

/* 矢印アイコン */
.pagination .prev::before,
.pagination .next::before {
  content: "";
  display: block;
  width: 20px;
  height: 11px;
  background: url("../../img/lp/friends/icon_arrowl.png") no-repeat center/contain;
}
@media (max-width: 767.98px) {
  .pagination .prev::before,
  .pagination .next::before {
    width: 17px;
    height: 9px;
  }
}
.pagination .next::before {
  background-image: url("../../img/lp/friends/icon_arrowr.png");
}