/* single.css */

/* single-post-container の基本レイアウト */
.single-post-page {
    padding: 40px 0;
    display: flex;
    justify-content: center;
}

.single-post-content br {
    line-height: 1.5;   /* 改行の高さ */
}

.single-post-container {
    width: 100%;
    max-width: 1000px;
    padding: 30px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    border-radius: 8px;
    background-color: rgba(255,255,255,0.6);
}

/* 投稿本文の見出し */
.single-post-content h1 {
    font-size: 2.7rem;
    font-weight: bold;
    margin: 1em 0 0.5em;
    color: #3A5270;
}

.single-post-content h2 {
    font-size: 2rem;
    font-weight: bold;
    margin: 1em 0 0.5em;
    color: #3A5270;
}

.single-post-content h3 {
    font-size: 1.8rem;
    font-weight: bold;
    margin: 1em 0 0.5em;
    color: #3A5270;
}

.single-post-content h4 {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 1em 0 0.5em;
    color: #3A5270;
}

.single-post-content h5 {
    font-size: 1.4rem;
    font-weight: bold;
    margin: 1em 0 0.5em;
    color: #3A5270;
}

.single-post-content h6 {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 1em 0 0.5em;
    color: #3A5270;
}


/* 投稿内タグ */
.single-post-tags {
    margin: 10px 0;
}
.single-post-tag {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 6px;
    background-color: #3A5270; /* 紺色 */
    color: #fff;              /* 文字色は白 */
    border-radius: 4px;
    font-size: 0.9em;
}



/* レスポンシブ: 700px 以下 */
@media screen and (max-width: 700px) {
    .single-post-content h1 { font-size: 1.6rem; }
    .single-post-content h2 { font-size: 1.4rem; }
    .single-post-content h3 { font-size: 1.3rem; }
    .single-post-content h4 { font-size: 1.2rem; }
    .single-post-content h5 { font-size: 1.1rem; }
    .single-post-content h6 { font-size: 1rem; }
}

/* 投稿タイトル・メタ */
.single-post-title {
    font-size: 2rem;
	font-weight:bold;
    margin-bottom: 10px;
	color: #3A5270!important;
}

.single-post-meta {
    font-size: 1.4rem;
    color: #3A5270;
    margin-bottom: 20px;
}

.single-post-meta a {
    text-decoration: underline;
    color: inherit;
}

/* 投稿本文 */
.single-post-content {
    padding: 20px;
    line-height: 1.5;
    font-size: 1.7rem;   /* 投稿者未指定のフォントサイズ */
    color: #3A5270;      /* 投稿者未指定の色 */
}

/* 投稿者が指定した色・サイズを優先 */
.single-post-content strong,
.single-post-content b {
    font-weight: 700; /* 色・サイズはそのまま inherit */
}
.single-post-content em,
.single-post-content i {
    font-style: italic; /* 色・サイズはそのまま inherit */
}

/* 投稿内リンク */
.single-post-content a {
    text-decoration: underline;
    color: #0073aa; /* 投稿者未指定のリンク色 */
}
.single-post-content a:hover {
    color: #005177;
}






/* 段落・リスト・見出し・引用 */
.single-post-content p {
    margin-bottom: 1em;
}
.single-post-content ul {
    list-style: disc;
    margin-left: 1.5em;
    margin-bottom: 1em;
}
.single-post-content ol {
    list-style: decimal;
    margin-left: 1.5em;
    margin-bottom: 1em;
}
.single-post-content li {
    margin-bottom: 0.5em;
}
/* .single-post-content h1,
.single-post-content h2,
.single-post-content h3,
.single-post-content h4,
.single-post-content h5,
.single-post-content h6 {
    font-weight: inherit; 
    margin: 1em 0 0.5em;
} */
.single-post-content blockquote {
    margin: 1em 0;
    padding-left: 1em;
    border-left: 3px solid #ccc;
}

/* 前後の記事ナビ */
.single-post-navigation {
    display: flex;
    justify-content: space-between;
	width:40%;
	margin:40px auto;
	font-weight:bold;
}
.single-post-nav-link {
    color: #3A5270;
    text-decoration: none;
}
.single-post-nav-link:hover {
    text-decoration: underline;
}

/* 投稿本文内の画像を投稿時の幅で表示 */
.single-post-content img,
.single-post-content figure img.wp-image-attachment {
    width: auto !important;    /* 投稿時の幅を尊重 */
    height: auto !important;
    max-width: 100% !important; /* 画面幅を超えない */
}

/* ブロックエディタのカラムや幅指定ブロックにも対応 */
.single-post-content .wp-block-image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
}


/* レスポンシブ: 700px 以下 */
@media screen and (max-width: 700px) {
    .single-post-container {
        width: 95%;
        padding: 15px;
        box-shadow: 0 0 8px rgba(0,0,0,0.05);
    }

    h1.single-post-title {
        font-size: 1.6rem;
		margin-top:20px
    }

    .single-post-title {
        font-size: 1.6rem;
    }

    .single-post-meta {
        font-size: 1.2rem;
    }

    .single-post-content {
        font-size: 15px; /* 投稿者未指定のフォントサイズ */
        padding: 15px;
        line-height: 1.6;
    }

    .single-post-content ul,
    .single-post-content ol {
        margin-left: 1.2em;
    }

    .single-post-navigation {
		width:60%;
    }

    .single-post-nav-link {
        font-size: 1.2rem;
    }
}