/*
Theme Name: Texas Life GAMES
Theme URI: https://tx-life.info
Author: Antigravity
Author URI: https://tx-life.info
Description: ホラーゲーム実況＆考察サイト用オリジナルテーマ。ダークでプレミアムなデザイン。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: texas-life-games
Tags: black, dark, two-columns, right-sidebar, responsive-layout, custom-menu, featured-images, sticky-post
*/

:root {
    --bg-color: #0f0f0f;
    --header-bg: #1a1a1a;
    --footer-bg: #121212;
    --card-bg: #1e1e1e;
    --accent-color: #af2f2e;
    --accent-hover: #d33a39;
    --text-primary: #f5f5f5;
    --text-secondary: #aaaaaa;
    --content-width: 1200px;
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 画像がコンテナをはみ出さないようにグローバルで制限 */
img {
    max-width: 100%;
    height: auto;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-main);
    line-height: 1.6;
}

main.container {
    margin-top: 50px;
}

a {
    color: inherit;
    text-decoration: underline;
    transition: color 0.3s;
}

a:hover {
    color: var(--accent-color);
}

.container {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 20px;
}

.full-width {
    width: 100%;
}

/* Header */
header.full-width {
    background-color: var(--header-bg);
    border-bottom: 2px solid var(--accent-color);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 2px;
}

.logo a {
    text-decoration: none !important;
}

.logo span {
    color: var(--accent-color);
}

nav ul {
    display: flex;
    list-style: none;
    gap: 1.5rem;
}

nav a {
    color: var(--text-primary);
    text-decoration: none !important;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s;
}

nav a:hover {
    color: var(--accent-color);
}

/* Hero Section */
.hero-section {
    display: grid;
    grid-template-columns: 1.8fr 1.2fr;
    gap: 20px;
    margin: 2rem auto;
}

/* Single Post Eye-catch (アイキャッチ画像) */
.single-post .post-eye-catch {
    width: 100%;
    margin: 0 0 30px;
    border-radius: 8px;
    overflow: hidden;
}

.single-post .post-eye-catch img,
.single-post img.featured-image {
    width: 100%;
    height: auto;
    display: block;
}

.hero-banner {
    background: linear-gradient(45deg, #1a1a1a, #333);
    padding: 40px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #333;
}

.hero-banner h1 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.hero-banner p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.hero-banner .btn-youtube {
    background-color: var(--accent-color);
    color: white;
    padding: 10px 20px;
    text-decoration: none !important;
    border-radius: 4px;
    width: fit-content;
    font-weight: bold;
    font-size: 0.9rem;
}

.hero-social {
    background-color: var(--card-bg);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero-social h3 {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
}

.social-icons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.social-icon {
    width: 48px;
    height: 48px;
    background-color: #2a2a2a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid #444;
    position: relative;
    text-decoration: none;
}

.social-icon:hover {
    transform: translateY(-5px);
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 5px 15px rgba(175, 47, 46, 0.4);
}

/* Icons via CSS Masks or Background (Simplified representation) */
.social-icon::before {
    content: '';
    width: 20px;
    height: 20px;
    background-color: var(--text-primary);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.icon-youtube::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.icon-x::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E");
}

.icon-discord::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994.053-.102.001-.226-.106-.266a13.067 13.067 0 0 1-1.872-.894.078.078 0 0 1-.008-.128c.126-.094.252-.192.372-.29a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.196.373.29a.078.078 0 0 1-.007.127 12.299 12.299 0 0 1-1.873.894.077.077 0 0 0-.106.266c.35.699.765 1.362 1.226 1.993.039.053.084.03.084-.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42.001 1.333-.946 2.418-2.157 2.418z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994.053-.102.001-.226-.106-.266a13.067 13.067 0 0 1-1.872-.894.078.078 0 0 1-.008-.128c.126-.094.252-.192.372-.29a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.196.373.29a.078.078 0 0 1-.007.127 12.299 12.299 0 0 1-1.873.894.077.077 0 0 0-.106.266c.35.699.765 1.362 1.226 1.993.039.053.084.03.084-.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42.001 1.333-.946 2.418-2.157 2.418z'/%3E%3C/svg%3E");
}

.icon-steam::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.377 0 0 5.377 0 12c0 2.18.583 4.223 1.603 5.987l4.026-1.638c-.066-.46-.118-1.554.218-2.315.424-.962 1.355-1.594 2.378-1.594l3.193-.005c.102 0 .19.05.244.133l2.844 4.314c.148.225.086.53-.138.678a.486.486 0 0 1-.68-.138L10.84 21.01a4.706 4.706 0 0 1-2.02.463c-2.41 0-4.38-1.852-4.57-4.216L.2 18.895C.073 16.685 0 14.417 0 12 0 5.377 5.377 0 12 0zm0 1.655c5.713 0 10.345 4.632 10.345 10.345 0 5.713-4.632 10.345-10.345 10.345a10.294 10.294 0 0 1-2.906-.418l2.91-4.414c1.644.025 2.97-.432 3.966-1.37a4.912 4.912 0 0 0 1.373-3.483 4.935 4.935 0 0 0-4.931-4.931c-1.284 0-2.455.495-3.33 1.31L7.49 10.74c-.2.18-.514.165-.694-.035-.18-.2-.165-.514.035-.694l1.967-1.787a6.568 6.568 0 0 1 3.203-.84c3.642 0 6.592 2.95 6.592 6.592 0 1.838-.755 3.49-1.97 4.673-.918.894-2.14 1.458-3.488 1.583l-2.973 4.51c.3.05.6.09.913.09 6.623 0 12-5.377 12-12S18.623 0 12 0z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.377 0 0 5.377 0 12c0 2.18.583 4.223 1.603 5.987l4.026-1.638c-.066-.46-.118-1.554.218-2.315.424-.962 1.355-1.594 2.378-1.594l3.193-.005c.102 0 .19.05.244.133l2.844 4.314c.148.225.086.53-.138.678a.486.486 0 0 1-.68-.138L10.84 21.01a4.706 4.706 0 0 1-2.02.463c-2.41 0-4.38-1.852-4.57-4.216L.2 18.895C.073 16.685 0 14.417 0 12 0 5.377 5.377 0 12 0zm0 1.655c5.713 0 10.345 4.632 10.345 10.345 0 5.713-4.632 10.345-10.345 10.345a10.294 10.294 0 0 1-2.906-.418l2.91-4.414c1.644.025 2.97-.432 3.966-1.37a4.912 4.912 0 0 0 1.373-3.483 4.935 4.935 0 0 0-4.931-4.931c-1.284 0-2.455.495-3.33 1.31L7.49 10.74c-.2.18-.514.165-.694-.035-.18-.2-.165-.514.035-.694l1.967-1.787a6.568 6.568 0 0 1 3.203-.84c3.642 0 6.592 2.95 6.592 6.592 0 1.838-.755 3.49-1.97 4.673-.918.894-2.14 1.458-3.488 1.583l-2.973 4.51c.3.05.6.09.913.09 6.623 0 12-5.377 12-12S18.623 0 12 0z'/%3E%3C/svg%3E");
}

/* Sections */
section {
    margin-bottom: 3rem;
}

h2 {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
}

h2::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1.2rem;
    background-color: var(--accent-color);
    margin-right: 12px;
}

/* Grids */
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* --- ページネーション装飾 (Premium Pagination) --- */
.pagination {
    margin: 60px 0;
    text-align: center;
}

.pagination .nav-links {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    padding: 0 15px;
    border-radius: 50px;
    border: 1.5px solid #333;
    background: #1a1a1a;
    color: #888;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.pagination .page-numbers:hover {
    border-color: var(--accent-color);
    color: #fff;
    background: #252525;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.pagination .page-numbers.current {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
    box-shadow: 0 5px 15px rgba(175, 47, 46, 0.4);
}

.pagination .page-numbers.dots {
    border: none;
    background: transparent;
    cursor: default;
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
    font-size: 0.8rem;
    padding: 0 20px;
}

/* --- 特集ページ専用装飾 (Special Feature Page) --- */
.page-sub .special-block h2 {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 4rem 0 2rem;
    color: #fff;
    letter-spacing: 0.05em;
    position: relative;
    padding-bottom: 12px;
    border-left: none !important;
    background: none !important;
    padding-left: 0 !important;
}

.page-sub .special-block h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--accent-color);
}

.post-card {
    background-color: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #2a2a2a;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}

.post-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.post-thumb,
.thumbnail {
    aspect-ratio: 16/9;
    background-color: #2a2a2a;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.post-thumb::after {
    content: 'THUMBNAIL';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #444;
    font-weight: bold;
}

.post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-info {
    padding: 15px;
    flex-grow: 1;
}

.post-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 5px;
}

.post-card-title {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-primary);
}

/* Comments */
.comment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.comment-card {
    background-color: #161616;
    padding: 20px;
    border-radius: 8px;
    border-left: 2px solid #333;
}

.comment-text {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-secondary);
}

/* Utility */
.btn-more {
    display: block;
    width: fit-content;
    margin: 1.5rem 0 0 auto;
    font-size: 0.8rem;
    color: var(--accent-color);
    text-decoration: none !important;
    font-weight: bold;
}

/* Footer */
footer {
    background-color: var(--footer-bg);
    padding: 4rem 0 2rem;
    margin-top: 5rem;
    border-top: 1px solid #222;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
}

.footer-logo {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.footer-logo span {
    color: var(--accent-color);
}

.footer-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.footer-col h4 {
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
    color: var(--text-primary);
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    margin-bottom: 8px;
}

.footer-col a {
    color: var(--text-secondary);
    font-size: 0.8rem;
    transition: color 0.3s;
}

.footer-col a:hover {
    color: var(--accent-color);
}

/* Side Layout (Single Page) */
.page-layout {
    display: grid;
    grid-template-columns: 1fr 225px;
    gap: 30px;
}

.page-layout>* {
    min-width: 0;
}

.sidebar {
    /* 記事エリアと同じ高さを保持するように align-self: start を削除 */
}

.sidebar-inner {
    height: 100%;
}

@media (max-width: 900px) {
    .page-layout {
        grid-template-columns: 1fr;
    }
}

/* Contact Form */
.contact-form {
    background-color: var(--card-bg);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #333;
    width: 100%;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    background-color: #121212;
    border: 1px solid #333;
    color: white;
    border-radius: 4px;
    font-size: 1rem;
}

/* Search Form (Global) */
.global-search-container {
    margin: 20px auto;
    display: flex;
    justify-content: center;
}

.search-form {
    width: 100%;
    max-width: var(--content-width);
}

.search-form .search-input-wrapper {
    display: flex;
    gap: 10px;
    background-color: var(--card-bg);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #333;
}

.search-field {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: white;
    font-size: 0.9rem;
    padding: 5px;
}

.search-field:focus {
    outline: none;
}

.search-submit {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 5px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8rem;
    transition: background 0.3s;
}

.search-submit:hover {
    background-color: var(--accent-hover);
}

.btn-submit {
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 12px 40px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    transition: background 0.3s;
    text-decoration: none !important;
}

.btn-submit:hover {
    background-color: var(--accent-hover);
}

/* Gutenberg Blocks Styling */
/* Post Content Styling (TX-Life Signature Design - Dark Mode) */
.post-content {
    background-color: #161616;
    color: #e0e0e0;
    padding: 50px;
    border-radius: 12px;
    margin-bottom: 50px;
    line-height: 1.8;
    font-size: 1.1rem;
    border: 1px solid #2a2a2a;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.post-content p {
    margin-bottom: 1.8em;
    color: #e0e0e0;
}

/* --- 見出し装飾 (TX-Life Style - Dark Mode) --- */
.post-content h2 {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 4.5rem 0 2.5rem;
    padding: 1.2rem 1.8rem;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    border-left: 10px solid var(--accent-color);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #fff;
    display: block;
    line-height: 1.3;
    letter-spacing: 0.05em;
}

.post-content h2::before {
    display: none;
}

.post-content h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 3rem 0 1.8rem;
    padding: 0 0 12px 15px;
    border-bottom: 1.5px solid var(--accent-color);
    color: #eee;
    position: relative;
    line-height: 1.4;
}

.post-content h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.2em;
    background: var(--accent-color);
    opacity: 0.3;
}

.post-content h4 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 2.5rem 0 1.2rem;
    color: #ddd;
    display: flex;
    align-items: center;
}

.post-content h4::before {
    content: '▶';
    font-size: 0.7rem;
    margin-right: 12px;
    color: var(--accent-color);
    opacity: 0.8;
}

/* --- 洗練された案内ボックス (TX-Life Box - Dark Mode) --- */
.tx-box-info,
.tx-box-alert,
.tx-box-memo,
.tx-box-point,
.tx-box-white,
.tx-box-tab {
    position: relative;
    margin: 3em 0;
    padding: 30px 40px 30px 60px;
    border: 1px solid #333;
    border-radius: 4px;
    background-color: #1e1e1e;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.tx-box-info::before,
.tx-box-alert::before,
.tx-box-memo::before,
.tx-box-point::before {
    position: absolute;
    left: 20px;
    top: 25px;
    font-family: serif;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1;
}

/* 縦線アクセントタイプ */
.tx-box-info,
.tx-box-alert,
.tx-box-memo,
.tx-box-point {
    border-left-width: 8px;
}

.tx-box-info {
    border-left-color: #337ab7;
    background-color: rgba(51, 122, 183, 0.05);
}

.tx-box-info::before {
    content: 'i';
    color: #337ab7;
}

.tx-box-alert {
    border-left-color: #d9534f;
    background-color: rgba(217, 83, 79, 0.05);
}

.tx-box-alert::before {
    content: '!';
    color: #d9534f;
}

.tx-box-memo {
    border-left-color: #f0ad4e;
    background-color: rgba(240, 173, 78, 0.05);
}

.tx-box-memo::before {
    content: '✎';
    color: #f0ad4e;
}

.tx-box-point {
    border-left-color: #5cb85c;
    background-color: rgba(92, 184, 92, 0.05);
}

.tx-box-point::before {
    content: '✓';
    color: #5cb85c;
}

/* 白抜きボックス (TX-Life White Box - Dark Mode) */
.tx-box-white {
    padding: 35px 40px;
    border: 1px solid #444;
    border-top: 4px solid var(--accent-color);
    background-color: #252525;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* タブボックス (TX-Life Tab Box - Dark Mode) */
.tx-box-tab {
    padding: 45px 40px 30px;
    border: 1.5px solid #333;
    background-color: #1e1e1e;
    margin-top: 4rem;
}

.tx-box-tab-title {
    position: absolute;
    top: -1.5rem;
    left: -1.5px;
    background: #333;
    color: #fff;
    padding: 8px 25px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}

.tx-box-tab.tx-accent .tx-box-tab-title {
    background: var(--accent-color);
}

/* --- Cocoon互換マッピング (既存記事用 - Dark Mode) --- */
/* 白抜きボックスの互換 */
.wp-block-cocoon-blocks-blank-box-1.blank-box {
    padding: 35px 40px;
    border: 1px solid #444;
    border-top: 4px solid var(--accent-color) !important;
    background-color: #252525;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    margin: 3em 0;
    border-radius: 4px;
    position: relative;
}

/* タブボックスの互換 */
.wp-block-cocoon-blocks-tab-box-1.blank-box.bb-tab {
    padding: 45px 40px 30px;
    border: 1.5px solid #333;
    background-color: #1e1e1e;
    margin: 4rem 0 3em;
    border-radius: 4px;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* タブラベルの擬似要素上書き */
.bb-tab::before {
    position: absolute;
    top: -1.5rem;
    left: -1.5px;
    background: #333;
    color: #fff !important;
    padding: 8px 25px !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em;
    content: 'CHECK';
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
    line-height: 1 !important;
    border-radius: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    z-index: 1;
}

.bb-tab.bb-pickup::before {
    content: 'PICKUP';
}

.bb-tab.bb-point::before {
    content: 'POINT';
    background: var(--accent-color);
}

.bb-tab.bb-check::before {
    content: 'CHECK';
}

/* ラベルボックスの互換 */
.label-box {
    padding: 35px 40px 25px;
    border: 1.5px solid #333;
    background-color: #1e1e1e;
    margin: 3.5rem 0 3em;
    border-radius: 4px;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.label-box-label {
    position: absolute;
    top: -1.5rem;
    left: -1px;
    background: #333;
    color: #fff !important;
    padding: 8px 25px !important;
    font-size: 0.85rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
    z-index: 2;
    display: flex;
    align-items: center;
}

/* カスタムカラー指定がある場合 */
.label-box[style*="--cocoon-custom-border-color"] {
    border-top: 4px solid var(--cocoon-custom-border-color) !important;
}

.label-box[style*="--cocoon-custom-border-color"] .label-box-label {
    background: var(--cocoon-custom-border-color);
}

.label-box-content {
    line-height: 1.7;
    color: #e0e0e0;
}

/* キャプションボックス（見出し付きボックス）の互換 */
.caption-box {
    margin: 3.5rem 0 3em;
    border: 1.5px solid #333;
    background-color: #1e1e1e;
    border-radius: 4px;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.caption-box-label {
    display: inline-flex;
    align-items: center;
    padding: 8px 25px;
    background: #333;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    border-radius: 4px 0 4px 0;
    position: absolute;
    top: -1px;
    left: -1px;
}

.caption-box-content {
    padding: 45px 30px 25px;
    line-height: 1.7;
    color: #e0e0e0;
}

/* カスタムカラー指定がある場合 */
.caption-box[style*="--cocoon-custom-border-color"] {
    border-top: 4px solid var(--cocoon-custom-border-color) !important;
}

.caption-box[style*="--cocoon-custom-border-color"] .caption-box-label {
    background: var(--cocoon-custom-border-color);
}

/* メモボックス等の簡易装飾 */
.memo-box,
.info-box,
.notice-box,
.important-box {
    padding: 25px 30px;
    margin: 2em 0;
    border-radius: 4px;
    border: 1.5px solid #333;
    background-color: #252525;
    position: relative;
    line-height: 1.7;
    color: #e0e0e0;
}

.memo-box {
    border-left: 5px solid #555;
}

.info-box {
    border-left: 5px solid #2e5a8a;
}

.notice-box {
    border-left: 5px solid #a38b2d;
}

.important-box {
    border-left: 5px solid #af2f2e;
}

/* アイコン装飾（簡易版） */
.memo-box::before,
.info-box::before,
.notice-box::before,
.important-box::before {
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 1.2rem;
    opacity: 0.2;
    font-weight: 900;
}

.memo-box::before {
    content: 'MEMO';
    font-size: 0.7rem;
    top: 10px;
}

.info-box::before {
    content: 'INFO';
    font-size: 0.7rem;
    top: 10px;
}

.notice-box::before {
    content: 'NOTICE';
    font-size: 0.7rem;
    top: 10px;
}

.important-box::before {
    content: 'IMPORTANT';
    font-size: 0.7rem;
    top: 10px;
}

/* --- 引用 (Blockquote - Dark Mode) --- */
.post-content blockquote {
    border-left: 5px solid var(--accent-color);
    padding: 40px 50px;
    background-color: #1e1e1e;
    font-style: italic;
    margin: 3.5rem 0;
    color: #ccc;
    position: relative;
    border-radius: 0 12px 12px 0;
    line-height: 1.7;
}

.post-content blockquote::before {
    content: '“';
    font-family: "Georgia", serif;
    font-size: 6rem;
    color: var(--accent-color);
    opacity: 0.08;
    position: absolute;
    top: -10px;
    left: 15px;
    line-height: 1;
}

/* --- モダンなリスト装飾 --- */
.post-content ul,
.post-content ol {
    margin: 2rem 0;
    padding-left: 0;
    list-style: none;
}

.post-content li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 15px;
    color: #e0e0e0;
}

/* 箇条書き (UL) */
.post-content ul li::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0.7em;
    width: 8px;
    height: 8px;
    background: var(--accent-color);
    transform: rotate(45deg);
    /* 菱形 */
}

/* チェックマーク付き (クラス付与用) */
.post-content ul.tx-list-check li::before {
    content: '✓';
    background: none;
    transform: none;
    color: var(--accent-color);
    font-weight: 800;
    left: 0;
    top: 0;
    font-size: 1.1rem;
}

/* 番号付き (OL) */
.post-content ol {
    counter-reset: tx-counter;
}

.post-content ol li {
    counter-increment: tx-counter;
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 15px;
}

/* ネストされた数字リストのリセット */
.post-content li ol {
    counter-reset: tx-counter;
    margin: 1rem 0;
}

.post-content ol li::before {
    content: counter(tx-counter);
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 24px;
    height: 24px;
    background: var(--accent-color);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* --- ブログカード (Minimal Dark Mode) --- */
.internal-blogcard {
    display: flex;
    align-items: center;
    border: 1px solid #333;
    border-left: 4px solid var(--accent-color);
    padding: 15px 25px;
    margin: 2em 0;
    border-radius: 4px;
    transition: all 0.25s ease;
    text-decoration: none !important;
    background: #1a1a1a;
    position: relative;
    overflow: hidden;
}

.internal-blogcard:hover {
    background: #252525;
    border-color: #444;
    transform: translateX(5px);
}

.internal-blogcard-content {
    flex: 1;
}

.internal-blogcard-title {
    font-size: 1rem;
    font-weight: 700;
    color: #eee;
    margin: 0;
    line-height: 1.4;
    transition: color 0.2s;
}

.internal-blogcard:hover .internal-blogcard-title {
    color: var(--accent-color);
}

.internal-blogcard::after {
    content: '→';
    margin-left: 15px;
    color: var(--accent-color);
    font-weight: 800;
    opacity: 0.5;
    transition: transform 0.3s;
}

.internal-blogcard:hover::after {
    transform: translateX(5px);
    opacity: 1;
}

/* テキスト装飾 */
.post-content strong {
    color: #fff;
    font-weight: 800;
    background: linear-gradient(transparent 65%, rgba(175, 47, 46, 0.2) 65%);
}

.post-content a {
    color: var(--accent-color);
    text-decoration: underline;
    font-weight: 700;
    transition: opacity 0.2s;
}

.post-content a:hover {
    opacity: 0.7;
    text-decoration: none;
}

/* モバイル調整 */
@media (max-width: 768px) {
    .post-content {
        padding: 30px 20px;
        margin-left: -10px;
        margin-right: -10px;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
    }

    .post-content h2 {
        font-size: 1.4rem;
        margin-top: 3.5rem;
        padding: 1rem 1.2rem;
    }

    .tx-box-info,
    .tx-box-alert,
    .tx-box-memo,
    .tx-box-point {
        padding: 25px 20px 25px 50px;
    }

    .internal-blogcard {
        flex-direction: column;
        padding: 15px;
        gap: 15px;
    }

    .internal-blogcard-thumb {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* --- Cocoonブログカード互換 (Cocoon Blogcard Compatibility) --- */
.wp-block-cocoon-blocks-blogcard {
    display: flex;
    align-items: center;
    border: 1px solid #333;
    border-left: 4px solid var(--accent-color);
    padding: 20px 25px;
    margin: 2.5em 0;
    border-radius: 4px;
    background: #1a1a1a;
    transition: all 0.25s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.wp-block-cocoon-blocks-blogcard:hover {
    background: #222;
    border-color: #444;
    transform: translateX(5px);
}

.wp-block-cocoon-blocks-blogcard .blogcard-title {
    font-size: 1rem;
    font-weight: 700;
    color: #eee;
    line-height: 1.4;
    margin-bottom: 5px;
}

.wp-block-cocoon-blocks-blogcard .blogcard-snipet {
    font-size: 0.85rem;
    color: #888;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 外部リンク用ヒント (External Link Hint) */
.external-blogcard .external-link-hint {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 8px;
    opacity: 0.8;
}

.external-blogcard::before {
    content: '🔗';
    margin-right: 15px;
    font-size: 1.2rem;
    opacity: 0.7;
}

/* Breadcrumb */
.breadcrumb {
    margin-bottom: 20px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.breadcrumb ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.breadcrumb li {
    display: flex;
    align-items: center;
}

.breadcrumb li:not(:last-child)::after {
    content: '/';
    margin-left: 15px;
    opacity: 0.5;
}

.breadcrumb a {
    text-decoration: none !important;
    font-weight: 600;
}

.breadcrumb a:hover {
    color: var(--accent-color);
}

/* Comment List */
.comment-list .comment {
    background-color: #1a1a1a;
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #333;
}

.comment-list .vcard img {
    border-radius: 50%;
    margin-right: 15px;
    border: 1px solid var(--accent-color);
}

.comment-list .comment-metadata {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.comment-list .comment-content p {
    font-size: 0.9rem;
    line-height: 1.6;
}

.reply {
    margin-top: 15px;
}

.comment-reply-link:hover {
    opacity: 0.7;
}

/* --- スタイリッシュなコメントフォーム (Comment Form Redesign) --- */
.comment-respond {
    background: #161616;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #333;
    margin-top: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.comment-reply-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 25px;
    color: #fff;
    border-left: 5px solid var(--accent-color);
    padding-left: 15px;
}

.comment-form p {
    margin-bottom: 20px;
}

.comment-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #aaa;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    background: #000;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 15px 20px;
    color: #fff;
    font-family: inherit;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 15px rgba(175, 47, 46, 0.2);
    background: #0a0a0a;
}

.comment-form textarea {
    min-height: 150px;
    resize: vertical;
}

.comment-form .submit {
    background: var(--accent-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 15px 40px;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    width: auto;
    display: inline-block;
}

.comment-form .submit:hover {
    background: #d13a39;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(175, 47, 46, 0.4);
}

.comment-notes,
.required-field-message {
    font-size: 0.75rem;
    color: #666;
}

.required {
    color: var(--accent-color);
    margin-left: 2px;
}

/* Modal Popup for Contact Success */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-content {
    background: #1a1a1a;
    padding: 50px;
    border-radius: 15px;
    border: 2px solid var(--accent-color);
    text-align: center;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.2);
    animation: modalSlideUp 0.5s ease-out;
}

.modal-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.modal-content h2 {
    color: var(--accent-color);
    margin-bottom: 20px;
    border: none;
    text-transform: none;
}

.modal-content p {
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.modal-content .timer {
    margin: 30px 0;
    font-weight: bold;
    color: var(--text-primary);
}

.modal-content .timer span {
    font-size: 1.5rem;
    color: var(--accent-color);
    margin-right: 5px;
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsiveness */
@media (max-width: 768px) {
    :root {
        --content-width: 100%;
    }

    header .container {
        flex-direction: column;
        gap: 1rem;
    }

    .hero-section {
        grid-template-columns: 1fr;
    }

    .post-grid,
    .comment-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .hero-banner {
        padding: 20px;
    }

    .hero-banner h1 {
        font-size: 1.4rem;
    }

    .btn-submit {
        width: 100%;
    }
}

/* Opening Animation */
.opening-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    animation: fadeOutOverlay 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards 2.0s;
}

.opening-content {
    text-align: center;
    color: white;
}

.welcome-to {
    font-size: clamp(1.2rem, 3vw, 2rem);
    text-transform: uppercase;
    letter-spacing: 0.8rem;
    margin-bottom: 1rem;
    opacity: 0;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    animation: slideInLeft 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.4s;
}

.brand-name {
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 900;
    letter-spacing: 4px;
    opacity: 0;
    text-shadow: 0 0 20px rgba(175, 47, 46, 0.6);
    animation: slideInRight 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards 1.2s;
}

.brand-name span {
    color: var(--accent-color);
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOutOverlay {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.05);
        visibility: hidden;
    }
}

/* Skip Opening Animation */
html.skip-opening .opening-overlay {
    display: none !important;
    animation: none !important;
}

/* --- Table of Contents (Main Area) --- */
.tx-toc {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    margin: 40px 0;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.tx-toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #333;
}

.tx-toc-title {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--accent-color);
    letter-spacing: 0.1em;
}

.tx-toc-toggle {
    background: #333;
    border: 1px solid #444;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #eee;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tx-toc-toggle:hover {
    background: #444;
    color: #fff;
    border-color: #555;
}

.tx-toc-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tx-toc-list li {
    margin-bottom: 10px;
    line-height: 1.4;
}

.tx-toc-list li a {
    color: #e0e0e0;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.15s ease;
}

.tx-toc-list li a:hover {
    color: var(--accent-color);
}

.tx-toc-list .toc-level-3 {
    margin-left: 1.5em;
    font-size: 0.9rem;
}

.tx-toc-list .toc-level-3 a {
    font-weight: 400;
    color: #b0b0b0;
}

/* --- Sidebar ToC (PC only) --- */
@media (max-width: 1023px) {
    .tx-sidebar-toc-widget {
        display: none !important;
    }
}

.tx-sidebar-toc-widget {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

/* スクロールバーのカスタマイズ */
.tx-sidebar-toc-widget::-webkit-scrollbar {
    width: 6px;
}

.tx-sidebar-toc-widget::-webkit-scrollbar-track {
    background: transparent;
}

.tx-sidebar-toc-widget::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}

.tx-sidebar-toc-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tx-sidebar-toc-list li {
    margin-bottom: 8px;
    line-height: 1.4;
}

.tx-sidebar-toc-list li a {
    display: block;
    font-size: 0.82rem;
    color: #eee;
    text-decoration: none;
    padding: 4px 0;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
}

.tx-sidebar-toc-list .toc-level-2 a {
    font-weight: 700;
}

/* アコーディオン機能のためのH3初期状態設定 */
.tx-sidebar-toc-list .toc-level-3 {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-bottom: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* アコーディオン展開状態のH3設定 */
.tx-sidebar-toc-list .toc-level-3.show-h3 {
    max-height: 300px;
    opacity: 1;
    margin-bottom: 8px;
}

.tx-sidebar-toc-list .toc-level-3 a {
    font-size: 0.76rem;
    padding-left: 12px;
    color: #b0b0b0;
    position: relative;
}

.tx-sidebar-toc-list .toc-level-3 a::before {
    content: '-';
    position: absolute;
    left: 4px;
    color: #555;
    opacity: 0.8;
}

.tx-sidebar-toc-list li a:hover {
    color: #fff;
    padding-left: 5px;
}

.tx-sidebar-toc-list .toc-level-3 a:hover {
    padding-left: 17px;
}

/* Active Highlight */
.tx-sidebar-toc-list li.active>a {
    color: #111;
    font-weight: 800;
    border-left-color: var(--accent-color);
    background: #e0e0e0;
    padding-left: 8px;
}

.tx-sidebar-toc-list .toc-level-3.active>a {
    padding-left: 12px;
}

/* --- 記事カード全体クリッカブル --- */
.post-card {
    position: relative;
}

/* タイトルリンクの ::after でカード全体をクリック可能にする */
.post-card .post-card-title::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
}

/* ホバー時のカード全体ハイライト */
.post-card:hover {
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

/* --- コメント一覧スタイル --- */
/* トップページのコメントグリッド */
.comment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .comment-grid {
        grid-template-columns: 1fr;
    }
}

.tx-comment-item {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-left: 3px solid var(--accent-color);
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 16px;
    list-style: none;
}

.tx-comment-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.tx-comment-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
}

.tx-comment-author {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.tx-comment-body {
    font-size: 0.9rem;
    line-height: 1.8;
    color: #ccc;
    padding-left: 2px;
}

.tx-comment-body p {
    margin-bottom: 0.5em;
}

.tx-comment-reply {
    margin-top: 10px;
}

.tx-comment-reply a {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-decoration: none;
    border: 1px solid #444;
    padding: 3px 10px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.tx-comment-reply a:hover {
    color: #fff;
    border-color: var(--accent-color);
    background: rgba(175, 47, 46, 0.15);
}

/* ============================================================
   Cocoon 互換レイヤー (Cocoon Compatibility Layer)
   ── 既存記事の旧Cocoonブロックをダークテーマで表示するためのCSS
   ============================================================ */

/* ----------------------------------------------------------
   [1] ブログカード レイアウト制御
   ※ iframe内部のダークテーマは functions.php の embed_head フックで対応済み
   ここではiframe外側のラッパーと縦積みレイアウトを制御する
   ---------------------------------------------------------- */

/* .blogcard-wrap：外枠の余白・縦積み化 */
.post-content .blogcard-wrap,
.blogcard-wrap {
    margin: 1.5em 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow: visible !important;
    width: 100% !important;
    clear: both !important;
}

/* .blogcard：横並び（f-leftのfloat）を無効化して縦積みに */
.post-content .blogcard,
.blogcard,
.blogcard.f-left,
.blogcard.internal-blogcard {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* iframeを100%幅に伸ばす */
.blogcard-wrap iframe,
.blogcard iframe,
.blogcard-wrap .wp-embedded-content,
.blogcard .wp-embedded-content {
    display: block !important;
    width: 100% !important;
    min-width: unset !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    border-radius: 4px;
}

/* -------------------------------------------------------
   wp-block-cocoon-blocks-blogcard
   実際のコンテナ（3つのURLをまとめるdiv）を縦積みに
   ------------------------------------------------------- */

/* blogcard ブロックコンテナ：縦積みに変更 */
.wp-block-cocoon-blocks-blogcard,
.wp-block-cocoon-blocks-blogcard.blogcard-type {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
}

/* blogcard ブロック内のiframeを100%幅に */
.wp-block-cocoon-blocks-blogcard iframe,
.wp-block-cocoon-blocks-blogcard .wp-block-embed__wrapper,
.wp-block-cocoon-blocks-blogcard .wp-block-embed__wrapper iframe {
    display: block !important;
    width: 100% !important;
    min-width: unset !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    border-radius: 4px;
}

/* blank-box の内側（blogcardが入っている場合）もオーバーフロー解消 */
.wp-block-cocoon-blocks-blank-box-1,
.wp-block-cocoon-blocks-blank-box {
    overflow: visible !important;
}

/* ----------------------------------------------------------
   [2] Cocoon ブロック系ボックス (wp-block-cocoon-blocks-*)
   ラベル付きボックスのダークテーマ対応
   ---------------------------------------------------------- */

/* 共通ベーススタイル */
[class*="wp-block-cocoon-blocks-"] {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
    margin: 2.5em 0 !important;
}

/* --- POINT ボックス --- */
.wp-block-cocoon-blocks-point-box-1,
.wp-block-cocoon-blocks-point-box {
    position: relative !important;
    padding: 36px 20px 18px !important;
    border: 1.5px solid #333 !important;
    border-top: none !important;
    background: #1e1e1e !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.wp-block-cocoon-blocks-point-box-1::before,
.wp-block-cocoon-blocks-point-box::before {
    content: 'POINT' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    background: var(--accent-color) !important;
    color: #fff !important;
    padding: 6px 20px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    border-radius: 4px 0 4px 0 !important;
    z-index: 1 !important;
    height: auto !important;
    width: auto !important;
    display: inline-block !important;
}

/* --- CHECK ボックス --- */
.wp-block-cocoon-blocks-check-box-1,
.wp-block-cocoon-blocks-check-box {
    position: relative !important;
    padding: 36px 20px 18px !important;
    border: 1.5px solid #2a5a2a !important;
    border-top: none !important;
    background: rgba(30, 80, 30, 0.15) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    color: #e0e0e0 !important;
}

.wp-block-cocoon-blocks-check-box-1::before,
.wp-block-cocoon-blocks-check-box::before {
    content: 'CHECK' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    background: #2d6e2d !important;
    color: #fff !important;
    padding: 6px 20px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    border-radius: 4px 0 4px 0 !important;
    z-index: 1 !important;
    height: auto !important;
    width: auto !important;
    display: inline-block !important;
}

/* --- PICKUP ボックス --- */
.wp-block-cocoon-blocks-pickup-box-1,
.wp-block-cocoon-blocks-pickup-box {
    position: relative !important;
    padding: 36px 20px 18px !important;
    border: 1.5px solid #444 !important;
    border-top: none !important;
    background: #252525 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    color: #e0e0e0 !important;
}

.wp-block-cocoon-blocks-pickup-box-1::before,
.wp-block-cocoon-blocks-pickup-box::before {
    content: 'PICKUP' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    background: #555 !important;
    color: #fff !important;
    padding: 6px 20px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    border-radius: 4px 0 4px 0 !important;
    z-index: 1 !important;
    height: auto !important;
    width: auto !important;
    display: inline-block !important;
}

/* --- INFO / 情報 ボックス --- */
.wp-block-cocoon-blocks-info-box-1,
.wp-block-cocoon-blocks-info-box {
    position: relative !important;
    padding: 36px 20px 18px !important;
    border: 1.5px solid #2a4a6a !important;
    border-top: none !important;
    background: rgba(30, 60, 100, 0.15) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    color: #e0e0e0 !important;
}

.wp-block-cocoon-blocks-info-box-1::before,
.wp-block-cocoon-blocks-info-box::before {
    content: 'INFO' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    background: #2a5f8a !important;
    color: #fff !important;
    padding: 6px 20px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    border-radius: 4px 0 4px 0 !important;
    z-index: 1 !important;
    height: auto !important;
    width: auto !important;
    display: inline-block !important;
}

/* --- CAUTION / 注意 ボックス --- */
.wp-block-cocoon-blocks-caution-box-1,
.wp-block-cocoon-blocks-caution-box {
    position: relative !important;
    padding: 36px 20px 18px !important;
    border: 1.5px solid #6a4a20 !important;
    border-top: none !important;
    background: rgba(100, 70, 20, 0.12) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    color: #e0e0e0 !important;
}

.wp-block-cocoon-blocks-caution-box-1::before,
.wp-block-cocoon-blocks-caution-box::before {
    content: 'CAUTION' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    background: #b87a20 !important;
    color: #fff !important;
    padding: 6px 20px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    border-radius: 4px 0 4px 0 !important;
    z-index: 1 !important;
    height: auto !important;
    width: auto !important;
    display: inline-block !important;
}

/* --- MEMO ボックス --- */
.wp-block-cocoon-blocks-memo-box-1,
.wp-block-cocoon-blocks-memo-box {
    position: relative !important;
    padding: 18px 20px 18px 28px !important;
    border: 1px solid #333 !important;
    border-left: 5px solid #555 !important;
    background: #252525 !important;
    border-radius: 4px !important;
    color: #e0e0e0 !important;
}

/* --- NG / BAD ボックス --- */
.wp-block-cocoon-blocks-ng-box-1,
.wp-block-cocoon-blocks-bad-box-1,
.wp-block-cocoon-blocks-ng-box,
.wp-block-cocoon-blocks-bad-box {
    position: relative !important;
    padding: 36px 20px 18px !important;
    border: 1.5px solid #5a2020 !important;
    border-top: none !important;
    background: rgba(90, 25, 25, 0.15) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    color: #e0e0e0 !important;
}

.wp-block-cocoon-blocks-ng-box-1::before,
.wp-block-cocoon-blocks-bad-box-1::before,
.wp-block-cocoon-blocks-ng-box::before,
.wp-block-cocoon-blocks-bad-box::before {
    content: 'NG' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    background: var(--accent-color) !important;
    color: #fff !important;
    padding: 6px 20px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    border-radius: 4px 0 4px 0 !important;
    z-index: 1 !important;
    height: auto !important;
    width: auto !important;
    display: inline-block !important;
}

/* --- ボックス内のリスト・テキスト --- */
[class*="wp-block-cocoon-blocks-"] p,
[class*="wp-block-cocoon-blocks-"] li,
[class*="wp-block-cocoon-blocks-"] ul,
[class*="wp-block-cocoon-blocks-"] ol {
    color: #e0e0e0 !important;
}

[class*="wp-block-cocoon-blocks-"] a {
    color: var(--accent-color) !important;
}

/* ----------------------------------------------------------
   [3] テーブル (Table) のダークテーマ対応
   ---------------------------------------------------------- */

.post-content table,
.post-content .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 2.5em 0;
    font-size: 0.9rem;
    background: #1e1e1e;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.post-content table thead,
.post-content .wp-block-table thead {
    background: #2a2a2a;
}

.post-content table th,
.post-content .wp-block-table th {
    padding: 14px 18px;
    text-align: left;
    font-weight: 800;
    font-size: 0.85rem;
    color: #eee;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--accent-color);
    background: #252525;
}

.post-content table td,
.post-content .wp-block-table td {
    padding: 12px 18px;
    border-bottom: 1px solid #2a2a2a;
    color: #ddd;
    vertical-align: top;
    line-height: 1.6;
}

.post-content table tr:last-child td,
.post-content .wp-block-table tr:last-child td {
    border-bottom: none;
}

.post-content table tr:hover td,
.post-content .wp-block-table tr:hover td {
    background: #252525;
}

/* .wp-block-table の Figcapture */
.post-content .wp-block-table figcaption {
    font-size: 0.78rem;
    color: #888;
    text-align: center;
    margin-top: 8px;
}

/* スクロール可能テーブル */
.post-content .scroll-table,
.post-content .wp-block-table.is-scrollable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ----------------------------------------------------------
   [4] Cocoon の旧記法ボックス（非ブロック）
   check-box / point-box など古い記法への対応
   ---------------------------------------------------------- */

.post-content .check-box,
.post-content .point-box,
.post-content .information-box,
.post-content .question-box,
.post-content .alert-box {
    position: relative !important;
    padding: 45px 30px 25px !important;
    border: 1.5px solid #333 !important;
    border-top: none !important;
    background: #1e1e1e !important;
    border-radius: 4px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
    color: #e0e0e0 !important;
    margin: 2.5em 0 !important;
}

.post-content .check-box::before {
    content: 'CHECK' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    background: #2d6e2d !important;
    color: #fff !important;
    padding: 6px 20px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    border-radius: 4px 0 4px 0 !important;
    z-index: 1 !important;
}

.post-content .point-box::before {
    content: 'POINT' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    background: var(--accent-color) !important;
    color: #fff !important;
    padding: 6px 20px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    border-radius: 4px 0 4px 0 !important;
    z-index: 1 !important;
}

.post-content .information-box::before {
    content: 'INFO' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    background: #2a5f8a !important;
    color: #fff !important;
    padding: 6px 20px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    border-radius: 4px 0 4px 0 !important;
    z-index: 1 !important;
}

.post-content .alert-box::before {
    content: 'CAUTION' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    background: #b87a20 !important;
    color: #fff !important;
    padding: 6px 20px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    border-radius: 4px 0 4px 0 !important;
    z-index: 1 !important;
}

.post-content .question-box::before {
    content: 'Q&A' !important;
    position: absolute !important;
    top: -1px !important;
    left: -1px !important;
    background: #555 !important;
    color: #fff !important;
    padding: 6px 20px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    border-radius: 4px 0 4px 0 !important;
    z-index: 1 !important;
}

/* ----------------------------------------------------------
   [5] 画像ブロックのダークテーマ調整
   ---------------------------------------------------------- */

.post-content figure.wp-block-image {
    margin: 2.5em 0;
}

.post-content figure.wp-block-image img {
    border-radius: 6px;
    display: block;
    max-width: 100%;
    height: auto;
}

.post-content figure.wp-block-image figcaption {
    font-size: 0.78rem;
    color: #888;
    text-align: center;
    margin-top: 8px;
    font-style: italic;
}

/* ----------------------------------------------------------
   [6] Cocoon トグルボックス (toggle / open-close-box)
   ---------------------------------------------------------- */

.post-content .open-close-box,
.post-content details.wp-block-details {
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 6px;
    margin: 2.5em 0;
    overflow: hidden;
}

.post-content .open-close-box>summary,
.post-content details.wp-block-details>summary,
.post-content .open-close-title {
    background: #252525 !important;
    color: #eee !important;
    padding: 14px 20px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border-bottom: 1px solid #333 !important;
    list-style: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.post-content .open-close-box>summary::after,
.post-content details.wp-block-details>summary::after {
    content: '▼';
    font-size: 0.7rem;
    color: var(--accent-color);
    transition: transform 0.3s;
}

.post-content details.wp-block-details[open]>summary::after {
    transform: rotate(180deg);
}

.post-content .open-close-content,
.post-content details.wp-block-details>*:not(summary) {
    padding: 20px 25px;
    color: #e0e0e0;
    line-height: 1.7;
}

/* 「続きを読む」テキスト */
.blogcard .blogcard-read-more {
    font-size: 0.78rem !important;
    color: var(--accent-color) !important;
    background: transparent !important;
}

/* ============================================================
   オリジナル装飾システム (ボックス・吹き出し・ブログカード)
   ============================================================ */

/* ======= 共通ボックスレイアウト ======= */
.tx-box {
    border-radius: 8px;
    overflow: hidden;
    margin: 1.5em 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

.tx-box-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.tx-box-body {
    padding: 14px 18px;
    font-size: 0.9rem;
    line-height: 1.75;
    border-left: 4px solid transparent;
}

.tx-box-body p:first-child {
    margin-top: 0;
}

.tx-box-body p:last-child {
    margin-bottom: 0;
}

/* ① POINT */
.tx-point .tx-box-header {
    background: #3a0f0f;
    color: #ffaaaa;
}

.tx-point .tx-box-body {
    background: #1a1a1a;
    border-left-color: #af2f2e;
}

/* ② CHECK */
.tx-check .tx-box-header {
    background: #222222;
    color: #cccccc;
}

.tx-check .tx-box-body {
    background: #161616;
    border-left-color: #af2f2e;
}

/* ③ INFO */
.tx-info .tx-box-header {
    background: #252525;
    color: #aaaaaa;
}

.tx-info .tx-box-body {
    background: #1a1a1a;
    border-left-color: #555555;
}

/* ④ CAUTION */
.tx-caution {
    border: 2px dashed #af2f2e;
    background: #161616;
    border-radius: 8px;
    box-shadow: none;
}

.tx-caution .tx-box-header {
    background: transparent;
    color: #af2f2e;
    border-bottom: 1px dotted #333;
    padding-bottom: 8px;
}

.tx-caution .tx-box-body {
    background: transparent;
    border-left: none;
}

/* ⑤ MEMO */
.tx-memo {
    background: #222222;
    border-radius: 8px;
    border-top: 3px solid #555;
    box-shadow: none;
}

.tx-memo .tx-box-header {
    background: transparent;
    color: #999;
    padding-bottom: 0;
}

.tx-memo .tx-box-body {
    background: transparent;
    border-left: none;
}

/* ⑥ NG */
.tx-ng .tx-box-header {
    background: #2d0a0a;
    color: #ffcccc;
    border-bottom: 1px dotted #4a1515;
}

.tx-ng .tx-box-body {
    background: #2d0a0a;
    border-left: none;
}

/* ⑦ W-POINT (白抜き) */
.tx-wpoint {
    background: #dcdcdc;
    color: #1a1a1a;
    border: 2px solid #a62a2a;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.tx-wpoint .tx-box-header {
    background: #a62a2a;
    color: #ffffff;
}

.tx-wpoint .tx-box-body {
    background: transparent;
    border-left: none;
}

/* ⑧ W-CHECK (白抜き) */
.tx-wcheck {
    background: #dcdcdc;
    color: #1a1a1a;
    border: 2px solid #555555;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.tx-wcheck .tx-box-header {
    background: #555555;
    color: #ffffff;
}

.tx-wcheck .tx-box-body {
    background: transparent;
    border-left: none;
}

/* ⑨ W-INFO (白抜き) */
.tx-winfo {
    background: #dcdcdc;
    color: #1a1a1a;
    border-radius: 4px;
    border: 1px solid #bbbbbb;
    box-shadow: none;
}

.tx-winfo .tx-box-header {
    background: transparent;
    color: #a62a2a;
    border-bottom: 2px solid #a62a2a;
    padding-bottom: 8px;
    margin: 16px 16px 0;
}

.tx-winfo .tx-box-body {
    background: transparent;
    border-left: none;
}

/* ======= 吹き出し（バルーン） ======= */
.tx-balloon {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 1.5em 0;
}

.tx-balloon.tx-balloon-right {
    flex-direction: row-reverse;
}

.tx-balloon-avatar {
    flex-shrink: 0;
    width: 64px;
    text-align: center;
}

.tx-balloon-img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #af2f2e;
    display: block;
    margin: 0 auto 4px;
}

.tx-balloon-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #af2f2e, #7b1010);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto 4px;
    border: 2px solid #af2f2e;
}

.tx-balloon-name {
    font-size: 0.7rem;
    color: #888;
    display: block;
}

.tx-balloon-bubble {
    position: relative;
    background: #2a2a2a;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.9rem;
    line-height: 1.7;
    max-width: calc(100% - 84px);
    border: 1px solid #3a3a3a;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

.tx-balloon-bubble p:first-child {
    margin-top: 0;
}

.tx-balloon-bubble p:last-child {
    margin-bottom: 0;
}

/* 左向き吹き出し矢印 */
.tx-balloon-left .tx-balloon-bubble::before {
    content: '';
    position: absolute;
    top: 20px;
    left: -10px;
    border: 5px solid transparent;
    border-right-color: #3a3a3a;
}

.tx-balloon-left .tx-balloon-bubble::after {
    content: '';
    position: absolute;
    top: 21px;
    left: -8px;
    border: 4px solid transparent;
    border-right-color: #2a2a2a;
}

/* 右向き吹き出し矢印 */
.tx-balloon-right .tx-balloon-bubble::before {
    content: '';
    position: absolute;
    top: 20px;
    right: -10px;
    left: auto;
    border: 5px solid transparent;
    border-left-color: #3a3a3a;
}

.tx-balloon-right .tx-balloon-bubble::after {
    content: '';
    position: absolute;
    top: 21px;
    right: -8px;
    left: auto;
    border: 4px solid transparent;
    border-left-color: #2a2a2a;
}

/* ======= ブログカード オリジナルデザイン (赤枠版) ======= */
.tx-blogcard {
    display: flex;
    background: #1a1a1a;
    border: 1px solid #af2f2e;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: #e0e0e0;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    position: relative;
    max-height: 140px;
    margin: 1.5em 0;
}

.tx-blogcard:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(175, 47, 46, 0.25);
    border-color: #d33c3a;
}

.tx-blogcard-thumb {
    width: 35%;
    max-width: 200px;
    flex-shrink: 0;
    position: relative;
    background: #000;
}

.tx-blogcard-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s;
}

.tx-blogcard:hover .tx-blogcard-thumb img {
    opacity: 0.8;
}

.tx-blogcard-content {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    overflow: hidden;
}

.tx-blogcard-title {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.4;
    color: #fff;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tx-blogcard:hover .tx-blogcard-title {
    color: #af2f2e;
}

.tx-blogcard-excerpt {
    font-size: 0.75rem;
    color: #888;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px;
}

.tx-blogcard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #666;
    margin-top: auto;
}

.tx-blogcard-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tx-blogcard-label {
    font-size: 0.65rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tx-blogcard-internal .tx-blogcard-label {
    background: #af2f2e;
    color: #fff;
}

.tx-blogcard-external .tx-blogcard-label {
    background: #333;
    color: #aaa;
    border: 1px solid #444;
}

@media (max-width: 600px) {
    .tx-blogcard {
        flex-direction: column;
        max-height: none;
    }

    .tx-blogcard-thumb {
        width: 100%;
        max-width: none;
        height: 140px;
    }

    .tx-blogcard-excerpt {
        -webkit-line-clamp: 2;
        white-space: normal;
    }
}