/*
  single.css
  投稿系の個別ページ(single.php・single-works.php)で使うスタイルをまとめるファイル。
  記事本文・Works詳細のレイアウトなど、個別ページ特有の装飾をここに書く。
*/

/* ===== Works詳細ページ ここから ===== */
/* 不要になった場合はこのブロックとsingle-works.php内の該当箇所を削除すればOK */
.works-thumbnail {
	margin-bottom: 24px;
}

.works-thumbnail img {
	width: 100%;
	height: auto;
	cursor: pointer;
}

/* Works詳細ページに限り、本文内のリンクにデフォルトの下線を戻す(reset.cssで全体はtext-decoration: noneにしているため) */
.single-works .entry-content a,
.works-fields a {
	text-decoration: underline;
}

/* ACFカスタムフィールド(URL・説明)の余白 */
.works-fields {
	margin-top: 24px;
}

.works-fields-item {
	margin-top: 16px;
}

/* 記事表示領域の下部に仕切り線を設置 */
.single-works article {
	border-bottom: 2px solid #1f1f1f;
}

@media (min-width: 769px) {
	.single-works article {
		padding-bottom: 80px;
	}
}

@media (max-width: 768px) {
	.single-works article {
		padding-bottom: 40px;
	}
}

/* ===== アイキャッチのモーダル表示 ここから ===== */
/* 不要になった場合はこのブロックとsingle-works.php内の該当箇所・js/works-modal.jsを削除すればOK */
.works-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.8);
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
	/* 閉じる時はvisibilityの切り替えを0.4s遅らせ、フェードアウトが終わってから非表示にする */
	transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.works-modal.is-open {
	opacity: 1;
	visibility: visible;
	/* 開く時はvisibilityを即座に切り替えて表示する */
	transition: opacity 0.4s ease, visibility 0s linear 0s;
}

/* 画像を囲む箱。画像の実サイズにフィットさせ、バツボタンの配置基準にする */
.works-modal-inner {
	position: relative;
	display: inline-flex;
	cursor: default;
}

/* width指定を外し、画像の実際の見た目のサイズ=クリック判定領域にする(余白部分が誤って画像扱いになるのを防ぐ) */
.works-modal-image {
	max-width: 90vw;
	max-height: 90vh;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* 画像の右上角に重ねて表示。chiburutechpro.comの.main-infobox_closeを参考に、色を反転(背景白・バツ黒)して採用 */
.works-modal-close {
	position: absolute;
	top: -24px;
	right: -24px;
	width: 48px;
	height: 48px;
	padding: 0;
	background-color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* 文字ではなく2本の線を交差させてバツを作る(フォントのグリフに依存せず、丸の中心に正確に配置するため) */
.works-modal-close::before,
.works-modal-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 2px;
	background-color: #111;
}

.works-modal-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.works-modal-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}
/* ===== アイキャッチのモーダル表示 ここまで ===== */

/* ===== 前の記事/一覧に戻る/次の記事 ここから ===== */
/* chiburutechpro.comの.single_page_linkを参考に実装 */
/* 不要になった場合はこのブロックとsingle-works.php内の該当箇所を削除すればOK */
.works-pagination .works-pagination-back-btn {
	margin: 0 auto;
	text-align: center;
}

@media (min-width: 769px) {
	.works-pagination {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		justify-content: center;
		align-items: center;
		gap: 0 25px;
		margin: 100px auto 0;
		padding-bottom: 100px;
	}

	.works-pagination-prev {
		text-align: right;
	}

	.works-pagination-next {
		text-align: left;
	}
}

@media (max-width: 768px) {
	.works-pagination {
		display: grid;
		grid-template-columns: 0.6fr 1fr 0.6fr;
		justify-content: space-between;
		align-items: center;
		margin: 50px auto 0;
		padding-bottom: 50px;
	}

	.works-pagination-prev {
		text-align: left;
	}

	.works-pagination-next {
		text-align: right;
	}
}
/* ===== 前の記事/一覧に戻る/次の記事 ここまで ===== */
/* ===== Works詳細ページ ここまで ===== */