@charset "UTF-8";

/*--------------------------------*
 * blogArea
 *-------------------------------*/
.blogArea {
	width: 100%;
	/* max-width: 1200px; */
	max-width: 900px;
	margin: 0 auto 80px;
	display: flex;
	flex-direction: column;
	gap: 50px;

	background: url(../img/bk01.jpg) repeat center center;
}
.blogArea .inner {
	display: block;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
/* ----- */
.blogArea .blogLst {
	margin-bottom: 100px;
	display: flex;
	flex-wrap: wrap;
	gap: 40px 20px;
}
.blogArea .blogLst .item {
	width: calc((100% - 60px) / 4);
}
.blogArea .blogLst .item a {
	text-decoration: none;
	color: #000;
}
.blogArea .blogLst .item .pic {
	overflow: hidden;
	border-radius: 10px;
	margin-bottom: 5px;
	border: solid 1px #bbbbbb;
	background: #f5f5f5;
}
.blogArea .blogLst .item .pic img {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	vertical-align: bottom;
}
.blogArea .blogLst .item .cat {
}
.blogArea .blogLst .item .cat-item {
	background: #d7ebff;
	padding: 3px 10px;
	border-radius: 100px;
	display: inline-block;
	font-size: 13px;
}
.blogArea .blogLst .item .date {
	font-size: clamp(
		14px,
		0.5102vw + 12.0867px,
		16px
	); /* Vary between 375px and 767px */
	font-weight: bold;
}
.blogArea .blogLst .item .tit {
	font-size: clamp(
		14px,
		0.5102vw + 12.0867px,
		16px
	); /* Vary between 375px and 767px */
	font-weight: normal;
}

@media screen and (max-width: 1200px) {
	/* Smartphone */
	.blogArea .inner {
		max-width: calc(100% - 30px);
	}
}
@media screen and (max-width: 767px) {
	/* Smartphone */
	.blogArea .blogLst .item {
		width: calc((100% - 20px) / 2);
	}
	.blogArea .blogLst .item .tit {
		line-height: 1.2;
	}
}
@media screen and (max-width: 600px) {
	/* Smartphone */
	.blogArea .inner {
		max-width: calc(100% - 30px);
	}
}

/* コンテナ全体 */
.blogDetails-title-container {
	background-color: #fff;
	padding: 20px;
	border-radius: 10px;
	border: 1px solid #ddd;
	margin-bottom: 30px;
}

/* タイトル */
.blogDetails-title {
	font-size: clamp(
		20px,
		1.0204vw + 16.1735px,
		24px
	); /* Vary between 375px and 767px */
	font-weight: bold;
	color: #222;
	margin-bottom: 10px;
}

/* 投稿日 */
.blogDetails-meta {
	font-size: 14px;
	color: #666;
	margin-bottom: 10px;
}

/* タクソノミー（カテゴリー、仕上げ方、色 など） */
.blogDetails-taxonomies {
	margin-top: 15px;
	padding: 10px 10px 10px 10px;
	background: #d4dceb;
	border-radius: 8px;

	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 5px 15px;
}

.blogDetails-taxonomies .taxonomy-group {
	font-size: 14px;
	color: #444;
	margin-bottom: 5px;
}
.blogDetails-taxonomies strong {
	font-weight: bold;
}
.blogDetails-taxonomies a {
	display: inline-block;
	background: #fff;
	color: #333;
	padding: 4px 10px;
	font-size: 13px;
	border-radius: 15px;
	text-decoration: none;
	transition: background 0.3s ease;
}

.blogDetails-taxonomies a:hover {
	background: #f9ffa8;
}

@media screen and (max-width: 767px) {
	/* Smartphone */
	.blogDetails-title-container {
		padding: 10px;
	}

	.blogDetails-taxonomies .taxonomy-group {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 2px 5px;
		margin-bottom: 0;
	}
	.blogDetails-taxonomies strong {
		width: 100px;
		display: block;
	}
	.blogDetails-taxonomies a {
		width: calc(100% - 105px);
		border-radius: 5px;
	}
}

@media screen and (max-width: 370px) {
	/* Smartphone */
	.blogDetails-taxonomies strong {
		width: 100%;
		display: block;
	}
	.blogDetails-taxonomies a {
		width: 100%;
	}
}

/* コンテナ全体 */
.blogDetails-title-container {
	background-color: #fff;
	padding: 20px;
	border-radius: 10px;
	border: 1px solid #ddd;
	margin-bottom: 30px;
}

/* タイトル */
.blogDetails-title {
	font-size: clamp(
		20px,
		1.0204vw + 16.1735px,
		24px
	); /* Vary between 375px and 767px */
	font-weight: bold;
	color: #222;
	margin-bottom: 10px;
}

/* 投稿日 */
.blogDetails-meta {
	font-size: 14px;
	color: #666;
	margin-bottom: 10px;
}

/* タクソノミー（カテゴリー、仕上げ方、色 など） */
.blogDetails-taxonomies {
	margin-top: 15px;
	padding: 10px 10px 10px 10px;
	background: #d4dceb;
	border-radius: 8px;

	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 5px 15px;
}

.blogDetails-taxonomies .taxonomy-group {
	font-size: 14px;
	color: #444;
	margin-bottom: 5px;
}
.blogDetails-taxonomies strong {
	font-weight: bold;
}
.blogDetails-taxonomies a {
	display: inline-block;
	background: #fff;
	color: #333;
	padding: 4px 10px;
	font-size: 13px;
	border-radius: 15px;
	text-decoration: none;
	transition: background 0.3s ease;
}

.blogDetails-taxonomies a:hover {
	background: #f9ffa8;
}

@media screen and (max-width: 767px) {
	/* Smartphone */
	.blogDetails-title-container {
		padding: 10px;
	}

	.blogDetails-taxonomies .taxonomy-group {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 2px 5px;
		margin-bottom: 0;
	}
	.blogDetails-taxonomies strong {
		width: 100px;
		display: block;
	}
	.blogDetails-taxonomies a {
		width: calc(100% - 105px);
		border-radius: 5px;
	}
}

@media screen and (max-width: 370px) {
	/* Smartphone */
	.blogDetails-taxonomies strong {
		width: 100%;
		display: block;
	}
	.blogDetails-taxonomies a {
		width: 100%;
	}
}

/*--------------------------------*
 * 見出し（h1～h6）
 *-------------------------------*/
.blogDetails h1,
.blogDetails h2,
.blogDetails h3,
.blogDetails h4,
.blogDetails h5,
.blogDetails h6 {
	font-family: "Noto Sans JP", serif;
	color: #333;
	font-weight: bold;
	margin-bottom: 1.5rem;
}

.blogDetails h1 {
	font-size: 2rem;
}

.blogDetails h2 {
	font-size: 1.75rem;
	border-bottom: 2px solid #ddd;
	padding-bottom: 5px;
}

.blogDetails h3 {
	font-size: 1.5rem;
	border-left: 3px solid #aaa;
	padding-left: 8px;
}

.blogDetails h4 {
	font-size: 1.25rem;
	color: #555;
}

.blogDetails h5 {
	font-size: 1.1rem;
	color: #666;
}

.blogDetails h6 {
	font-size: 1rem;
	color: #777;
}

/*--------------------------------*
 *
 *-------------------------------*/

.blogDetails p {
	margin-bottom: 2em;
}
.blogDetails p img {
}

.blogDetails strong {
	font-weight: bold;
}

/*--------------------------------*
 * リスト（ul, ol）
 *-------------------------------*/
.blogDetails ul,
.blogDetails ol {
	margin-left: 20px;
	margin-bottom: 1.5rem;
}

.blogDetails ul {
	list-style-type: disc;
}

.blogDetails ol {
	list-style-type: decimal;
}

.blogDetails ul li,
.blogDetails ol li {
	margin-bottom: 5px;
}

/*--------------------------------*
 * 表（table）
 *-------------------------------*/
.blogDetails table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
	border: 1px solid #ddd;
}

.blogDetails th,
.blogDetails td {
	padding: 10px;
	border: 1px solid #ddd;
}

.blogDetails th {
	background-color: #f5f5f5;
	text-align: left;
	font-weight: bold;
}

.blogDetails tr:nth-child(even) {
	background-color: #fafafa;
}

/*--------------------------------*
 * 画像（img）
 *-------------------------------*/
.blogDetails img {
	max-width: 100%; /* 親要素を超えない（レスポンシブ） */
	height: auto; /* 縦横比を維持したまま高さ自動 */
	margin: 0 auto 1.5rem;
	border-radius: 5px;
}
/* WordPress特有の画像クラスに対応 */
/*
.blogDetails img[class*="wp-image-"] {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 1.5rem;
    border-radius: 5px;
}
*/

/* 画像キャプション */
.blogDetails figure {
	display: block;
}
.blogDetails figure.aligncenter {
	margin: 0;
	text-align: center;
	display: block;
}

.blogDetails figure.aligncenter figcaption {
	display: block;
	text-align: center;
	font-size: 0.9rem;
	color: #666;
	margin-top: 5px;
}

body.single-worksample .blogDetails img {
	display: block;
	width: 100%;
}

/*--------------------------------*
 * iframe
 *-------------------------------*/
.blogDetails iframe {
	width: 100%;
	max-width: 600px;
	display: block;
	margin: 0 auto 1.5rem;
	border-radius: 5px;
}