@charset "UTF-8";
/**
* Achievement CSS
* File: assets/css/achievement.css
* Description: カスタム投稿「achievement」専用スタイルシート
*/

/* ========================================
□ 共通（PC・スマホ共通）
======================================== */

/* 実績：絞り込みボタン */
.achievement-filter-btn.active,
.achievement-filter-btn.is-active {
	color:#fff;
	background: var(--color-blue);
	border-color: var(--color-blue);
}

.achievement-filter-btn.active:hover,
.achievement-filter-btn.is-active:hover {
	opacity:1;
}

.achievement-filter-btn:hover {
	opacity:.9;
}

/* achievement */
.achievement-tag-cloud {
	margin:20px 0 0 0;
	padding:40px;
	background: var(--color-gray-100);
	border-radius:8px;
}
.achievement-tag-cloud.taxonomy-back-link {
	margin:20px 0;
	padding:10px;
	background:none;
	border-radius:0;
}

body {
	overflow-x:hidden;
}

/*　フル幅ヘッダー　*/
.achievement-header-full {
	width:calc(100% + (50vw - 50%) * 2);
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
}

/* 実績本文の背景ボックス */
.achievement-content-box {
	max-width:100%;
	margin:0 auto 40px;
	padding:96px 64px;
	background:var(--color-gray-100);
}

/*　メタ情報　*/
.product-detail .product-detail-heading {
	margin:40px 0 20px;
}

.entry-header {
	position:relative;
}

.entry-header::after {
	content:"achievement";
	position:absolute;
	top:3px;
	left:0;
	font-family: var(--font-display);
	font-weight: var(--font-weight-display);
	font-size: var(--font-size-small);
	color:var(--color-blue);
	text-transform:uppercase;
	letter-spacing:.05em;
	opacity:.7;
	pointer-events:none;
	z-index:10;
}

.achievement-card .entry-title {
	padding:28px 0 0;
	margin:0;

}
body.single-achievement .entry-title {
	padding:32px 0 0;
	margin-bottom:0 !important;

}

.achievement-labels {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:20px;
}

.entry-header .label {
	display:inline-block;
	padding:.125rem 1rem;
	font-size: var(--font-size-small);
	line-height:1.5;
	text-decoration:none;
	background:transparent;
	color:var(--color-gray-900);
	border:1px solid var(--color-gray-300);
	transition:color .25s ease,border-color .25s ease;
}

.entry-header .label::before {
	content:"#";
	margin-right:4px;
	opacity:.6;
}

.entry-header .label:hover {
	color:var(--color-blue);
	border-color:var(--color-blue);
	background:#fff;
}

/*　achievementヘッダー　*/
.achievement-header {
	width:100%;
	max-width:1000px;
	margin:0 auto;

}

/*　achievementカード　*/
.achievement-card {
	display:block;
	text-decoration:none;
	color:inherit;
	position:relative;
	width:23%;
	margin:1%;
	background:#fff;
	overflow:hidden;
}

.achievement-thumb {
	width:100%;
	aspect-ratio:16 / 9;
	overflow:hidden;
}

.achievement-thumb img {
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .4s ease;
}

.achievement-card:hover img {
	transform:scale(1.05)!important;
}

.achievement-title {
	margin-top:12px;

}

/*　アーカイブ　*/

.achievement-archive {
	display:flex;
	flex-wrap:wrap;
}

/*　サムネイル　*/

.post-thumbnail {
	overflow:hidden;
}

.post-thumbnail img {
	width:100%;
	height:auto;
	display:block;
	object-fit:cover;
}

/* =====================================================
□ PC（641px以上）
===================================================== */

@media screen and (min-width:641px) {

	#content {
		display:block;
		width:100%;
	}

	#achievementhead {
		width:100%;
		padding:0!important;
	}

	#primary {
		width:100%;
	}

	h1.achievement-title {
		text-align:center;
		color:var(--color-gray-900);
	

}

	h1.achievement-title::after {
		content:'';
		display:block;
		width:130px;
		height:1px;
		background:var(--color-gray-900);
		margin:40px auto 48px;
	}

}


/* ============================================================
□ スマホ（640px以下）
============================================================ */

@media screen and (max-width:640px) {

	.achievement-tag-cloud {
		padding:30px 20px;
		margin:30px 0;
	}


	.achievement-content-box {
		padding:32px var(--content-gutter);
	}

	/* 全幅指定を解除し、タイトルと説明文を本文の共通余白にそろえる */
	.achievement-header-full {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.achievement-labels {
		gap: 6px;
	}

	.achievement-header {
		padding-bottom:6.6%;
	
}

	.achievement-description {
		padding-bottom:5%;
	
}

	.achievement-card {
		width:90%;
		margin:0 auto 32px;
		box-sizing:border-box;
		border:1px solid var(--color-gray-200);
		border-radius:10px;
	}

	.achievement-card .entry-content {
		margin:0;
		padding:0;
	}

	.achievement-card .entry-header {
		padding:20px;
	}

	.achievement-card .entry-header::after {
		top:20px;
		left:20px;
	}

}

/* =====================================================
□ 小さいスマホ（480px以下）
===================================================== */
@media screen and (max-width:480px) {
	.achievement-tag-cloud {
		padding:20px 15px;
	}
}