/*
Theme Name: Arisaka Stone Child
File: single.css
Description: 投稿・カスタム投稿ページ専用のスタイル
*/
@charset "UTF-8";

:where(.storycontent,
	.entry-content,
	.entry-meta,
	.cat-il) {
	max-width: var(--arisaka-narrow-width);
	margin-inline: auto;
	padding-inline: 1rem;
}


.widget_works_category {
	h3 {
		font-size: 18px;
		border-bottom: 1px solid var(--wp--preset--color--arisaka-main-color);
		padding-bottom: 0.5em;
		margin-bottom: 0.75em;
	}
	ul {
		li {
			a {
				display: block;
				transition: 0.3s ease;
				&:hover {
					opacity: 0.7;
				}
			}

			span {
				font-size: 0.75em;
			}
		}
	}
}

@media(1024px >= width){
	.widget_works_category {

		ul {
			li {
				display: inline-block;
			}
		}
	}
}



.cat-il.type-grid,
.post-li {
	max-width: var(--arisaka-narrow-width);
	margin-inline: auto;
	padding-inline: 1rem;
	margin-block-end: 120px;
	.entry-meta{
		margin-inline: unset;
	}
}

.inner-archive {
	img {
		max-width: 100%;
		height: auto;
		object-fit: cover;
		object-position: center;
		/* aspect-ratio: 1.618 / 1; */
	}

	a .post-thumbnail img {
		width: 100%;
	}

	a {
		transition: 0.3s ease;
	}

	a:hover {
		opacity: 0.8;
	}
}

main:has(header.works) {
	.cat-il.type-grid {
		display: grid;
	}

	.inner-archive {
		grid-row: 2 / 3;
	}

	.side-categorymenu {
		grid-row: 1 / 2;
		justify-self: end;
	}

	.pagination_wrapper {
		grid-row: 3 / 4;
	}

}

.inner-archive.works-archive {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	gap: 2.5em calc(1.5vw + 0.5em);

	article {
		display: grid;
	}

}

@media (1024px > width) {
	main:has(header.works) {
		.cat-il.type-grid {
			article {
							display: grid;
							grid-template-columns: 1fr;
							grid-template-rows: unset;
							grid-row: unset;
							gap: 0;
			}
}

		
		.side-categorymenu {
			justify-self: center;
			/* margin-block-end: 3em; */

			h3 {
				display: none;
			}

			ul {
				display: inline-block;
				flex-wrap: wrap;
				gap: 0.5em;

				li {
					display: inline-block;
					gap: 1em;

					a {
						display: inline;
						line-height: 2;
						transition: 0.3s ease;
						margin-inline: 0.35em;
						/* color: var(--wp--preset--color--arisaka-lightgray-color); */
						border: 1px solid var(--wp--preset--color--arisaka-main-color);
						padding-inline: 1.5em;

						&:hover {
							opacity: 0.7;
						}

					}

					span {
						display: none;
					}
				}
			}

			.children {
				display: inline-flex;
				gap: 0.35em;
				/* padding-inline-start:0.5em; */
				list-style: disc;

				a {
					background-color: var(--wp--preset--color--arisaka-lightgray-color);
					border:none;
					padding-inline: 0.3em;
					line-height: 1.5;
					margin-inline-end: 0;
				}


			}

		}
	}
}



@media (1120px < width) {
	.cat-il.type-grid {
		padding-inline: unset;
	}
}


@media (1024px <=width) {
	main:has(header.works) {
		.cat-il.type-grid {
			width:100%;
			max-width: var(--arisaka-narrow-width);
			grid-template-columns: 1fr 0.295fr;
			grid-template-rows: repeat(2, auto);
			column-gap: calc(2.455vw + 0.5em);
		}

		.inner-archive.works-archive {
			grid-column: 1 / 2;
			grid-row: 1 / 2;
		}

		.side-categorymenu {
			grid-column: 2 / 3;
			grid-row: 1 / 3;
		}

		.pagination_wrapper {
			grid-column: 1 / 2;
			grid-row: 2 / 3;
		}
	}
	
	body.single-works{
		main:has(header.works) {
			.inner-archive{
				grid-row: 1 / 3;
			}
			.entry-content.works{
				margin-inline:unset;
		}
	}
}

	.widget_works_category {
		h3 {
			font-size: 18px;
			border-bottom: 1px solid var(--wp--preset--color--arisaka-main-color);
			padding-bottom: 0.5em;
			margin-bottom: 0.75em;
		}

		ul {
			padding-left: 1em;
			list-style: disc;

			li {
				a {
					/* font-size:16px; */
					display: block;
					line-height: 2.1;
					transition: 0.3s ease;
					border-bottom: 1px solid transparent;

					&:hover {
						opacity: 0.7;
					}
				}

				&::marker {
					font-size: 8px
				}

				/* span{
                    font-size:0.75em
                } */
			}
		}
	}
}



.inner-archive {
	h2 {
		font-size: clamp(1.7rem, 1.375em + 1vw, 2.25em);
		margin-block: 0.7em;
	}

	.post-thumbnail {
		overflow: hidden;
		margin-block-end: 1em;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center bottom;
			transition: 0.3s ease;
			transform-origin: left bottom;

			&:hover {
				transform: scale(1.05);
			}

			&[src$="no-image.webp"] {
				object-position: center center;
				transform-origin: center;
			}
		}

		&:has([src$="no-image.webp"]) {
			border: 1px solid var(--wp--preset--color--arisaka-lightgray-color);
		}
	}

	p:has(time),
	.entry-meta .date {
		font-size: 0.75em;
		line-height: 1;
		margin-block: 0.5em 0;
	}

	&works-archive {
		.post-thumbnail {
			img {
				aspect-ratio: 365 / 240;
			}
		}
	}
}

/* newslist用 */
.inner-archive:not(.works-archive),
.post-li.post-category {
	/* padding-block-end: 120px; */
	display: grid;
	row-gap: 1.8em;

	article:not(.works) a {
		display: grid;
		grid-template-columns: clamp(9.375em, 7.462em + 8.16vw, 15.625em) 1fr;
		justify-content: center;
		align-items: center;
		gap: 3em clamp(1em, 0.541em + 1.96vw, 2.5em);
	}

	.post-thumbnail {

		img[src$="no-image.webp"],
		img {
			width: 100%;
			height: 100%;
			aspect-ratio: 1 / 0.65;
			object-fit: cover;
			object-position: center;
		}
	}

	p:has(time) {
		font-size: 0.75em;
		line-height: 1;
		margin-block: 1em 0;
	}
}

.meta-entry-title {
	margin-block-end: 0.5em;
}

span .cat {
	display: inline-block;
	padding-inline-start: 1em;
	font-size: 10px;

	a {
		display: block;
		height: 100%;
		align-content: center;
		border: 1px solid var(--wp--preset--color--arisaka-main-color);
		padding-inline: 0.5em;
		transition: 0.3s ease;
		&:hover{
			background-color: var(--wp--preset--color--arisaka-main-color);
			color: var(--wp--preset--color--arisaka-lightgray-color);
		}
	}
}

.zaikostatus,
.error_message{
	width: fit-content;
	margin-inline: auto 0;
}
.error_message{
	padding:1em;
	border: 1px solid var(--wp--preset--color--arisaka-main-color);
}
.quantity-selector{
	display: inline-flex;
	justify-content: center;
 align-items: center;
	margin-inline-end: 1em;
	gap: 0.2em;
}
.c-box {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.item-info{
	margin-block-start:clamp(2.5rem, 0.714rem + 4.76vw, 5rem);
	padding-block-end: clamp(4rem, 1rem + 8vw, 8.2rem);
	margin-block-end: 4.5em;
	border-bottom: 1px solid var(--wp--preset--color--arisaka-main-color);
}
.btn-minus,.btn-plus{
	cursor: pointer;
	display: inline-block;
	width: 1em;
	font-size: 1.25em;
	text-align: center;
	vertical-align: middle;
}
.btn-minus.disabled{
	background-color: var(--wp--preset--color--arisaka-lightgray-color);
	color:#aaa;
	cursor: not-allowed;
}

.item-code-no{
	font-size: 1em;
}
h2.item-name,
.field_price{
	font-size: clamp(1.75em, 1.597em + 0.65vw, 2.25em);
}
.item-info .field_price{
	letter-spacing: 0.05em;
	em.tax{
		font-size: 16px;
	}
}

.storycontent{
	display:block flow-root;
}

.cat-il.type-grid{
	max-width: var(--arisaka-narrow-width);
	/* width: clamp(21.25rem, 9.721rem + 49.19vw, 68.75rem); */
	margin-inline: auto;
	/* padding-inline: 1.5em; */
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(10em, 6em + 15.03vw, 18.5em), 1fr));
	gap: 2.5em clamp(2rem, -6rem + 12.5vw, 4rem);
	justify-content: center;
	article{
		display: grid;
		grid-template-columns: 1fr;
		/* grid-template-rows: subgrid;
		grid-row: span 3; */
		gap: 0;
		.itemname{
			margin-block-start: 0.75em;
			line-height: 1.5;	
			grid-row: 2 / 3;
		}
		.itemprice{
			text-align: right;
			grid-row: 3 / 4;
		}
	}


	.itemimg {
		a{
			overflow: hidden;
			display: block;
			img {
				aspect-ratio: 296 / 306;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
				transition: 0.3s ease;
				&:hover{
					transform: scale(1.05);
				}
			}
		}
		}
}

@media(600px >= width) {
	.inner-archive.works-archive{
		grid-template-columns: 1fr;
	}
}

@media(1024px > width) {
	.c-box {
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
		gap:1em;
	}
}