@charset "UTF-8";
.blogDetails{
	display:flex;
	flex-direction:column;
	gap:45px;
}


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

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

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



/* タクソノミー（カテゴリー、仕上げ方、色 など） */
.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;
}
.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;
	}
	.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;
}

.blogDetails h2 {
    font-size: 1.3rem;
	position:relative;
	padding-bottom:15px;
}
.blogDetails h2:before {
	position:absolute;
	bottom:0;
	left:0;
	content:"";
	display:block;
	width:100%;
	height:5px;
	background:#D9D9D9;
	border-radius:100px;
}
.blogDetails h2:after {
	position:absolute;
	bottom:0;
	left:0;
	content:"";
	display:block;
	width:10%;
	height:5px;
	background:#283753;
	border-radius:100px;
}

/* tit02：左側に太いラインを配置するシンプルなデザイン */
.blogDetails h3 {
	background:#fff;
    font-size: 1.25rem;

    color: #283753;
    border:solid 1px  #283753;
	position:relative;
    display: flex;
    justify-content:flex-start;
	gap:0 15px;
	padding:5px 10px !important;
	border-radius:5px;
}
.blogDetails h3:before {
	content:"";
	width:6px;
	border-radius:100px;
	background:#283753;
	margin-left:7px;
}


.blogDetails h4 {
    font-size: 1.15rem;
	font-weight:bold;
    color: #283753;
    padding-bottom: 5px;
}

.blogDetails h5 {
    font-size: 1rem;
    color: #283753;
    background: #D4DCEB;
    padding: 10px 20px;
}

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


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

.blogDetails p {
	font-size:0.9rem;
}
.blogDetails p img{
	vertical-align:bottom;
}


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

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

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

.blogDetails ul li, .blogDetails ol li {
}

/*--------------------------------*
 * 表（table）
 *-------------------------------*/
.blogDetails table {
    width: 100%;
    border-collapse: collapse;
    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 0;
    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;
}

/* ----------
old-exampleBox
    ---------- */
.old-exampleBox{

	display:flex;
	flex-direction:column;
	gap:45px;
}

.old-exampleBox img{
	width:auto;
	max-width:auto;
	height:auto;
	vertical-align:bottom;
	display:block;
	text-align:center;
	margin:0 auto;
}

.old-exampleBox .exampleBox{
	border:solid 1px #ccc;
	padding:15px 15px;
}
.old-exampleBox .exampleBox .info{
}
.old-exampleBox .imgCenter {
}
.old-exampleBox .imgCenter img{
	margin-bottom:25px;
}
.old-exampleBox img[src*="marker.jpg"] {
	display:inline !important;
	width:auto !important;
}