/* ==========================================================================
   Components（BEM命名。Atomic Designの Atoms〜Organisms 相当）
   ========================================================================== */

/* ---- Button（Atom） ---- */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	font-size: var(--fs-body);
	font-weight: var(--fw-medium);
	border-radius: var(--radius-full);
	transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
	will-change: transform;
}

.button--primary {
	background-color: var(--color-primary);
	color: var(--color-primary-contrast);
	box-shadow: var(--shadow-border);
}

.button--primary:hover {
	transform: var(--hover-lift);
	box-shadow: var(--shadow-hover);
	background-color: var(--color-primary-dark);
}

/* アウトラインのセカンダリボタン（プライマリと並ぶデュアルCTA用） */
.button--secondary {
	background-color: transparent;
	color: var(--color-text);
	border: 2px solid var(--color-border);
}

.button--secondary:hover {
	transform: var(--hover-lift);
	border-color: var(--color-text);
}

/* ---- Card（Molecule） ---- */
.card {
	background-color: var(--color-background);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-border);
	padding: var(--space-6);
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
	will-change: transform;
}

.card:hover {
	transform: var(--hover-lift);
	box-shadow: var(--shadow-hover);
}

.card__title {
	font-size: var(--fs-h3);
	margin-bottom: var(--space-3);
}

.card__body {
	color: var(--color-text-muted);
}

.services__card {
	position: relative;
	overflow: hidden;
}

.services__media {
	margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5);
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.services__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-base) var(--ease-out);
}

.services__card:hover .services__media img {
	transform: scale(1.06);
}

.services__index {
	display: inline-block;
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	color: var(--color-primary);
	letter-spacing: 0.05em;
	margin-bottom: var(--space-3);
}

/* ---- Pricing item（Molecule） ----
   価格を最も目立つ「バリューメトリクス」として扱い、文字階層と余白を
   はっきりさせることで一覧性を高める。 */
.pricing-item {
	padding: var(--space-6);
	border-radius: var(--radius-md);
	background-color: var(--color-background);
	box-shadow: var(--shadow-border);
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.pricing-item:hover {
	transform: var(--hover-lift);
	box-shadow: var(--shadow-hover);
}

.pricing-item__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-2);
}

.pricing-item__name {
	font-size: var(--fs-body-lg);
	font-weight: var(--fw-semibold);
}

.pricing-item__price {
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-heading);
	color: var(--color-primary);
	white-space: nowrap;
}

.pricing-item__desc {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}

/* ---- Post card（Molecule） ---- */
.post-card {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.post-card__thumbnail {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.post-card__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-base) var(--ease-out);
}

.post-card:hover .post-card__thumbnail img {
	transform: scale(1.04);
}

.post-card__body {
	padding: var(--space-5);
}

.post-card__title {
	font-size: var(--fs-h3);
	margin-block: var(--space-2) var(--space-3);
}

.post-card__excerpt {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}

.post-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-top: var(--space-4);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	color: var(--color-primary);
}

/* ---- Post meta（Atom） ---- */
.post-meta {
	display: flex;
	gap: var(--space-3);
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

/* ---- Breadcrumbs（Molecule） ---- */
.breadcrumbs {
	margin-bottom: var(--space-6);
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

.breadcrumbs__item:not(:last-child)::after {
	content: "/";
	margin-left: var(--space-2);
	color: var(--color-border);
}

.breadcrumbs__link:hover {
	color: var(--color-primary);
}

/* ---- Form field（Molecule） ---- */
.form-field {
	margin-bottom: var(--space-5);
}

.form-field__label {
	display: block;
	margin-bottom: var(--space-2);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
}

.form-field__required {
	color: #c0392b;
}

.form-field__input {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.form-field__input:focus-visible {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.form-field__input--textarea {
	resize: vertical;
	min-height: 8rem;
}

/* ハニーポット欄（人間には見えないがボットには読める位置に配置） */
.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form__submit {
	width: 100%;
	margin-top: var(--space-2);
}

.contact-notice {
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-5);
	font-size: var(--fs-small);
}

.contact-notice--success {
	background-color: var(--color-surface-blue);
	color: var(--color-primary-dark);
}

.contact-notice--error {
	background-color: #fdecea;
	color: #a12a1f;
}

/* ---- Search form（Molecule） ---- */
.search-form {
	display: flex;
	gap: var(--space-2);
}

.search-form__input {
	flex: 1;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.search-form__submit {
	padding: var(--space-3) var(--space-5);
	background-color: var(--color-primary);
	color: var(--color-primary-contrast);
	border-radius: var(--radius-sm);
	font-weight: var(--fw-medium);
}

/* ---- Widget（Organism） ---- */
.widget__title {
	font-size: var(--fs-h3);
	margin-bottom: var(--space-4);
}

.widget ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* ---- Pagination（Molecule） ---- */
.pagination {
	margin-top: var(--space-7);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--space-3);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	font-size: var(--fs-small);
}

.pagination .page-numbers.current {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-primary-contrast);
}

.pagination .page-numbers:not(.current):hover {
	border-color: var(--color-accent);
	color: var(--color-primary);
}

/* ---- Comments（Organism） ---- */
.comments-area {
	margin-top: var(--space-9);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-border);
}

.comments-title {
	font-size: var(--fs-h2);
	margin-bottom: var(--space-6);
}

.comment-list,
.comment-list .children {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.comment-list .children {
	margin-top: var(--space-5);
	margin-left: var(--space-6);
	padding-left: var(--space-5);
	border-left: 1px solid var(--color-border);
}

.comment-list > li {
	list-style: none;
}

.comment-author.vcard {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-2);
}

.comment-author .avatar {
	border-radius: var(--radius-full);
}

.comment-metadata {
	font-size: var(--fs-caption);
	color: var(--color-text-muted);
}

.comment-content {
	margin-top: var(--space-2);
}

#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	margin-top: var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

#commentform .form-submit {
	margin-top: var(--space-5);
}

#commentform #submit {
	padding: var(--space-3) var(--space-6);
	background-color: var(--color-primary);
	color: var(--color-primary-contrast);
	border-radius: var(--radius-full);
	font-weight: var(--fw-medium);
}

.page-links {
	margin-top: var(--space-7);
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}