@charset "UTF-8";
/*----------------------------------------------------
	style_works.css
	更新情報表示用(works.php / works-detail.php)
----------------------------------------------------*/

/* PC
--------------------------------------------------------------------------------------------------------*/

/* ---------- ページャー ---------- */
.pager {
	width: 1000px;
	margin: 0 auto;
	padding: 20px 0;
	display: flex;
	justify-content: center;
}
.pager a {
	margin: 0 5px;
	padding: 2px 10px;
	font-size: 1.6rem;
	color: #1c75bc;
	border: 1px solid #5dc3eb;
}
.pager a.current { background: #d8f1fa; }

/* ---------- 一覧 ---------- */
#worksList {
	width: 1000px;
	margin: 0 auto;
	padding: 120px 0;
}
#worksList dl {
	width: 100%;
	margin: 0 0 40px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
#worksList dl dt {
	width: 40%;
	height: 300px;
	overflow: hidden;
}
#worksList dl dt span { width: 100% !important; }
#worksList dl dt img {
	width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
#worksList dl dd { padding: 0 0 0 40px; }
#worksList dl dd .info {
	padding: 0 0 20px 0;
	font-size: 1.6rem;
}
#worksList dl dd .title { font-size: 1.8rem; }
#worksList dl dd a {
	color: #191919;
	border-bottom: 2px solid #1c75bc;
	transition: border-bottom .3s ease;
}
#worksList dl dd a:hover { border-bottom: 2px solid #d8f1fa; }


/* ---------- 詳細 ---------- */
#worksdetail {
	width: 1000px;
	margin: 0 auto;
	padding: 120px 0;
}
#worksdetail .pNav {
	padding: 0 0 20px 0;
	font-size: 1.6rem;
}
#worksdetail h2 {
	padding: 0 0 10px 0;
	position: relative;
	font-size: 26px;
	text-align: center;
	border-bottom: 5px solid #d8f1fa;
}
#worksdetail h2::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%);
	width: 70px;
	height: 5px;
	background-color: #1c75bc;
}
#worksdetail #up_ymd {
	padding: 0 0 40px 0;
	font-size: 1.6rem;
	text-align: right;
}
#worksdetail #detail {
	padding: 0 0 40px 0;
	font-size: 1.6rem;
}
#worksdetail #detail .detailText { margin: 0 0 20px 0; }
#worksdetail #detail .detailUpfile {
	margin: 0 0 20px 0;
	text-align: center;
}


/* SP
--------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 999px) {
	/* ---------- 一覧 ---------- */
	#worksList {
		width: 100%;
		padding: 120px 20px;
	}
	#worksList dl {
		width: 100%;
		margin: 0 0 40px 0;
		display: block;
		flex-wrap: inherit;
		align-items: inherit;
	}
	#worksList dl dt { width: 100%; }
	#worksList dl dd { padding: 20px 0; }

	/* ---------- 詳細 ---------- */
	#worksdetail {
		width: 100%;
		padding: 120px 20px;
	}
	
}