@charset "UTF-8";

/* レイアウトをリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.works {
    display: flex;
    flex-direction: column;
	gap: 3rem;
}
    @media screen and (min-width: 744px) {
        .works {
			gap: 3.5rem;
		}
    }

    @media screen and (min-width: 1024px) {
		.works {
			gap: var(--padding-gap);
		}
    }

.works-list {
	width: 80%;
    margin: 0 auto;

    display: flex;
	flex-direction: column;
	gap: 5rem;
}
	@media screen and (min-width: 744px) {
		.works-list {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 3rem;
		}
	}

    @media screen and (min-width: 1024px) {
        .works-list {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 5rem;
      }
    }

.works-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 auto;
}

.works-item img {
    width: 100%;
}

.works-item-details {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.works-item-category-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;

	color: var(--sub-color);
}

.works-item-category {
	font-family: var(--jp-font);
    font-size: 1rem;
}

.works-item-title {
	display: block;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--sub-color);
	margin: 0;
	font-family: var(--jp-font);
	font-weight: 300;
	font-size: 1.25rem;
	color: var(--main-color);
	text-decoration: none;
}

.works-pagination{
	display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
	gap: 6px;
}
    @media screen and (min-width: 744px) {
        .news-pagination{
			display: grid;
			grid-template-columns: 1fr auto 1fr;
    		gap: 12px;
		}
    }

/* 戻る＋数字＋次へ：中央カラムに置いて画面中央固定 */
.works-page-center{
	grid-column: 2;           /* ★真ん中カラムに固定 */
	justify-self: center;

	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* 数字部分 */
.works-page-numbers{
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* ステータス：右端カラムへ */
.works-page-status{
	grid-column: 3;
	justify-self: start;        /* 中央ブロックの右端に寄せる */
	margin: 0;
	font-size: 0.75rem;
	color: var(--sub-color);
	white-space: nowrap;      /* 1行固定 */
}

/* prev / next */
.works-page-btn{
	padding: 0.5rem;
	border: 1px solid var(--sub-color);
	background: var(--white);
	cursor: pointer;
	border-radius: 6px;
	line-height: 1;
	color: var(--sub-color);
}
.works-page-btn:disabled{
	opacity: .5;
	cursor: not-allowed;
}

/* ページ番号ボタン */
.works-page-number{
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--line-color);

	font-family: var(--en-font);
	background: var(--white);
	cursor: pointer;
	border-radius: 6px;
	line-height: 1;
}
.works-page-number.is-active,
.works-page-number[aria-current="page"]{
	background: var(--main-color);
	color: var(--white);
	border-color: var(--main-color);
	font-weight: 600;
}