@charset "UTF-8";

/* =========================================
   style_blog.css - 社長ブログ（/blog/）専用
   記事の土台は style_news_detail.css を流用。一覧は写真なしの記事リスト＋右側の欄（ニュースのカードと見分けるため）。
   ここでは本文・目次・表・著者・前後リンク・分類ナビ・ダミー表示だけを足す
   ========================================= */

/* ===== ダミー表示（本番に出さない目印） ===== */
.blog-dummy-banner {
    background: rgba(var(--color-orange), 1);
    color: rgba(var(--color-white), 1);
    font-size: var(--font-x-small);
    text-align: center;
    padding: 0.6rem 1rem;
}

.blog-dummy-tag {
    background: rgba(var(--color-orange), 0.12);
    color: rgba(var(--color-orange), 1);
}

/* ===== 記事の見出しまわり ===== */
.blog-article-meta {
    flex-wrap: wrap;
}

.blog-article-meta a.knowledge-tag {
    text-decoration: none;
}

.blog-dates {
    display: flex;
    gap: 1rem;
    font-size: var(--font-x-small);
    color: rgba(var(--color-black), 0.6);
}

.blog-author-line {
    margin-top: 1rem;
    font-size: var(--font-x-small);
    color: rgba(var(--color-black), 0.6);
}

.blog-author-line a {
    color: inherit;
}

/* ===== ブログ内の nav の初期化（style.css の全体向け nav ul / nav ul li a の余白・白文字を打ち消す） ===== */
.blog-toc ol,
.blog-pager,
.blog-nav ul,
.blog-month-nav ul {
    padding: 0;
}

.blog-toc a,
.blog-pager a,
.blog-nav a,
.blog-month-nav a {
    padding: 0;
}

/* ===== 目次 ===== */
.blog-toc {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 1.5rem 0;
    margin-bottom: 3rem;
}

.blog-toc-title {
    font-size: var(--font-x-small);
    color: rgba(var(--color-key-1), 1);
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

.blog-toc ol {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.blog-toc a {
    color: rgba(var(--color-black), 0.8);
    font-size: var(--font-small);
    text-decoration: none;
}

.blog-toc .blog-toc-h3 {
    padding-left: 1.25rem;
}

/* ===== 本文 ===== */
.blog-body h2 {
    font-size: var(--font-middle);
    line-height: var(--lh-heading);
    margin: 3.5rem 0 1.25rem;
    padding-left: 1rem;
    border-left: 3px solid rgba(var(--color-key-1), 1);
    scroll-margin-top: calc(var(--header-height, 5rem) + 1rem);
}

.blog-body h3 {
    font-size: var(--font-x-middle);
    line-height: var(--lh-heading);
    margin: 2.5rem 0 1rem;
    scroll-margin-top: calc(var(--header-height, 5rem) + 1rem);
}

.blog-body > :first-child {
    margin-top: 0;
}

.blog-body ul,
.blog-body ol {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
}

.blog-body ul {
    list-style: disc;
}

.blog-body ol {
    list-style: decimal;
}

.blog-body li + li {
    margin-top: 0.4rem;
}

.blog-body a {
    color: rgba(var(--color-key-2), 1);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.blog-body blockquote {
    margin: 2rem 0;
    padding: 1rem 1.5rem;
    border-left: 1px solid rgba(var(--color-black), 0.3);
    color: rgba(var(--color-black), 0.75);
}

.blog-figure {
    margin: 2rem 0;
}

.blog-figure img {
    width: 100%;
    height: auto;
    display: block;
}

.blog-figure figcaption {
    margin-top: 0.5rem;
    font-size: var(--font-x-small);
    color: rgba(var(--color-black), 0.6);
}

.blog-table {
    margin: 2rem 0;
    overflow-x: auto;
}

.blog-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-small);
}

.blog-table th,
.blog-table td {
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: top;
}

.blog-table th {
    border-bottom-color: rgba(var(--color-black), 0.6);
    font-weight: 600;
    white-space: nowrap;
}

/* ===== タグ ===== */
.blog-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    list-style: none;
    margin-top: 3rem;
}

.blog-tag-list a {
    font-size: var(--font-x-small);
    color: rgba(var(--color-key-2), 1);
    text-decoration: none;
}

/* ===== 著者 ===== */
.blog-author {
    margin-top: 3rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 0.25rem 2rem;
}

.blog-author-label {
    font-size: var(--font-x-small);
    color: rgba(var(--color-key-1), 1);
    grid-row: span 2;
}

.blog-author-name {
    font-size: var(--font-x-middle);
}

.blog-author-en {
    margin-left: 0.75rem;
    font-size: var(--font-x-small);
    color: rgba(var(--color-black), 0.5);
}

.blog-author-role {
    font-size: var(--font-x-small);
    color: rgba(var(--color-black), 0.6);
    grid-column: 2;
}

.blog-author-link {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    display: inline-flex;
    align-items: center;
    font-size: var(--font-x-small);
    color: rgba(var(--color-key-2), 1);
    text-decoration: none;
}

/* ===== 前後の記事 ===== */
.blog-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

.blog-pager a {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    color: rgba(var(--color-black), 0.85);
    text-decoration: none;
    font-size: var(--font-small);
}

.blog-pager-next {
    grid-column: 2;
    text-align: right;
    align-items: flex-end;
}

.blog-pager-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-x-small);
    color: rgba(var(--color-key-1), 1);
}

/* ===== 関連する記事 ===== */
.blog-related {
    margin-top: 5rem;
}

.blog-related-title {
    font-size: var(--font-middle);
    margin-bottom: 0.5rem;
}

/* ===== 一覧・分類ページ ===== */
.blog-count {
    color: rgba(var(--color-black), 0.6);
    margin-top: 2rem;
}

.blog-empty {
    margin-top: 2rem;
    color: rgba(var(--color-black), 0.6);
}

/* ===== 本文＋右側の欄の二段組み（ニュース・ナレッジの写真カード一覧と見分けるため、2026-10-26） ===== */
.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
    gap: 5rem;
    align-items: start;
    margin-top: 3rem;
}

/* ===== 記事リスト（写真なし。日付・カテゴリ・タイトル・要約・タグ） ===== */
.blog-entries {
    margin-top: 1rem;
    border-top: 1px solid rgba(var(--color-black), 0.8);
}

.blog-entry {
    padding: 2rem 0;
    border-bottom: 1px solid var(--color-border);
}

.blog-entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.25rem;
    font-size: var(--font-x-small);
    color: rgba(var(--color-black), 0.6);
}

.blog-entry-cat {
    padding-left: 1.25rem;
    border-left: 1px solid var(--color-border);
    color: rgba(var(--color-key-2), 1);
    text-decoration: none;
}

.blog-entry-sample {
    padding: 0 0.5rem;
    border: 1px solid rgba(var(--color-key-3), 1);
    font-size: var(--font-xx-small);
    color: rgba(var(--color-key-3), 1);
}

.blog-entry-title {
    margin-top: 0.75rem;
    font-size: var(--font-x-middle);
    font-weight: 500;
    line-height: var(--lh-heading);
}

.blog-entry-title a {
    color: rgba(var(--color-black), 1);
    text-decoration: none;
}

.blog-entry-excerpt {
    margin-top: 0.75rem;
    font-size: var(--font-small);
    line-height: var(--lh-body);
    color: rgba(var(--color-black), 0.7);
}

.blog-entry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-top: 0.75rem;
    padding: 0;
    list-style: none;
}

.blog-entry-tags a {
    font-size: var(--font-x-small);
    color: rgba(var(--color-key-1), 1);
    text-decoration: none;
}

/* 他のページ・関連記事に置く短い形（日付・カテゴリ・タイトルだけ） */
.blog-entry--compact {
    padding: 1.25rem 0;
}

.blog-entry--compact .blog-entry-title {
    margin-top: 0.5rem;
    font-size: var(--font-small);
}

/* ===== 右側の欄（検索・カテゴリ・タグ・年別・著者） ===== */
.blog-side-group,
.blog-search {
    padding: 1.5rem 0;
    border-top: 1px solid var(--color-border);
}

.blog-search {
    padding-top: 0;
    border-top: none;
}

.blog-side-title {
    display: block;
    margin-bottom: 0.75rem;
    font-size: var(--font-x-small);
    letter-spacing: 0.1em;
    color: rgba(var(--color-key-1), 1);
}

.blog-search-field {
    display: flex;
    border: 1px solid rgba(var(--color-black), 0.4);
}

.blog-search-field input {
    flex: 1;
    min-width: 0;
    padding: 0.75rem;
    border: none;
    font: inherit;
    font-size: var(--font-small);
    background: none;
}

.blog-search-field button {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    border: none;
    background: rgba(var(--color-black), 1);
    color: rgba(var(--color-white), 1);
    cursor: pointer;
}

.blog-search-field:focus-within {
    outline: 2px solid rgba(var(--color-key-1), 1);
    outline-offset: -1px;
}

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

.blog-side-author-name {
    font-size: var(--font-x-middle);
}

.blog-side-author-name span {
    display: block;
    font-size: var(--font-x-small);
    color: rgba(var(--color-black), 0.5);
}

.blog-side-author-role {
    margin-top: 0.25rem;
    font-size: var(--font-x-small);
    color: rgba(var(--color-black), 0.6);
}

.blog-side-author .blog-more-link {
    margin-top: 1rem;
}

.blog-search-result .blog-count a {
    margin-left: 1rem;
    color: rgba(var(--color-key-2), 1);
}

/* 記事が無い時の「これから書くテーマ」 */
.blog-theme-list {
    list-style: none;
    margin-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.blog-theme-list li {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--color-border);
}

.blog-theme-name {
    font-weight: 700;
    color: rgba(var(--color-key-2), 1);
}

.blog-theme-desc {
    color: rgba(var(--color-black), 0.7);
    line-height: var(--lh-body);
}

.blog-month-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    list-style: none;
    margin-top: 2rem;
}

.blog-month-nav a {
    color: rgba(var(--color-key-2), 1);
    text-decoration: none;
    font-size: var(--font-small);
}

.blog-month-title {
    font-size: var(--font-middle);
    margin-top: 4rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    scroll-margin-top: calc(var(--header-height, 5rem) + 1rem);
}

/* ===== 分類ナビ（右側の欄の中のカテゴリ・タグ・年） ===== */
.blog-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.blog-nav-tags {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.blog-nav-list a {
    color: rgba(var(--color-black), 0.85);
    font-size: var(--font-small);
    text-decoration: none;
}

.blog-nav-list span {
    color: rgba(var(--color-black), 0.5);
}

.blog-nav-feed {
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    font-size: var(--font-x-small);
}

.blog-nav-feed a {
    color: rgba(var(--color-black), 0.6);
}

@media (hover: hover) {
    .blog-toc a:hover,
    .blog-nav-list a:hover,
    .blog-pager a:hover,
    .blog-tag-list a:hover,
    .blog-month-nav a:hover,
    .blog-entry-title a:hover,
    .blog-entry-cat:hover,
    .blog-more-link:hover {
        color: rgba(var(--color-key-1), 1);
    }
}

/* ===== スマホ ===== */
@media (max-width: 1080px) {
    .blog-author {
        grid-template-columns: 1fr;
    }

    .blog-author-label,
    .blog-author-role,
    .blog-author-link {
        grid-column: auto;
        grid-row: auto;
    }

    .blog-author-link {
        justify-self: start;
        margin-top: 0.5rem;
    }

    .blog-pager {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .blog-pager-next {
        grid-column: auto;
    }

    .blog-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 3rem;
        margin-top: 2rem;
    }

    .blog-entry {
        padding: 1.5rem 0;
    }

    .blog-theme-list li {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

/* ===== 他のページに置く最新記事（会社案内の社長挨拶・講演依頼） ===== */
.message-blog {
    margin-top: 4rem;
}

.blog-more-link {
    display: inline-flex;
    align-items: center;
    margin-top: 2rem;
    font-size: var(--font-small);
    color: rgba(var(--color-key-2), 1);
    text-decoration: none;
}