/*
Theme Name: BFJ Scope
Theme URI: https://example.com
Author: BFJ
Author URI: https://example.com
Description: 認知広告の効果を可視化する特許取得の分析サービス「BFJ Scope」のテーマ
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bfj-scope
*/

/* 個別投稿ページのスタイル */
.single-post-content {
    color: #1f2937;
    line-height: 1.8;
}

/* hタグのスタイル */
.single-post-content h1 {
    font-size: 2.25rem;
    font-weight: 700;
    color: #111827;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(to right, #C8191E 4px, #fce7e8 4px);
    border-left: 4px solid #C8191E;
    border-radius: 4px;
    position: relative;
    line-height: 1.4;
}

.single-post-content h1:first-of-type {
    margin-top: 0;
}

.single-post-content h2 {
    font-size: 1.875rem;
    font-weight: 700;
    color: #111827;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(to right, #C8191E 4px, #f9fafb 4px);
    border-left: 4px solid #C8191E;
    border-radius: 4px;
    position: relative;
    line-height: 1.5;
}

.single-post-content h2:first-of-type {
    margin-top: 0;
}

.single-post-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background-color: #f9fafb;
    border-left: 4px solid #d1d5db;
    border-radius: 4px;
    line-height: 1.5;
}

.single-post-content h3:first-of-type {
    margin-top: 0;
}

.single-post-content h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #374151;
    margin-top: 1.75rem;
    margin-bottom: 0.875rem;
    padding: 0.625rem 0.875rem;
    background-color: #fafafa;
    border-left: 3px solid #e5e7eb;
    border-radius: 3px;
    line-height: 1.5;
}

.single-post-content h4:first-of-type {
    margin-top: 0;
}

.single-post-content h5 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #4b5563;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: #fafafa;
    border-left: 2px solid #e5e7eb;
    border-radius: 2px;
    line-height: 1.5;
}

.single-post-content h5:first-of-type {
    margin-top: 0;
}

.single-post-content h6 {
    font-size: 1rem;
    font-weight: 600;
    color: #6b7280;
    margin-top: 1.25rem;
    margin-bottom: 0.625rem;
    padding: 0.5rem 0.75rem;
    background-color: #fafafa;
    border-left: 2px solid #e5e7eb;
    border-radius: 2px;
    line-height: 1.5;
}

.single-post-content h6:first-of-type {
    margin-top: 0;
}

/* テーブルのスタイル */
.single-post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    background-color: #ffffff;
}

.single-post-content table th {
    background-color: #f3f4f6;
    color: #111827;
    font-weight: 600;
    padding: 0.75rem 1rem;
    text-align: left;
    border: 1px solid #e5e7eb;
    border-bottom: 2px solid #d1d5db;
}

.single-post-content table td {
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb;
    color: #374151;
}

.single-post-content table tbody tr:nth-child(even) {
    background-color: #f9fafb;
}

.single-post-content table tbody tr:hover {
    background-color: #f3f4f6;
}

/* その他のコンテンツ要素 */
.single-post-content p {
    margin-bottom: 1rem;
    line-height: 1.8;
}

.single-post-content ul,
.single-post-content ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.single-post-content li {
    margin-bottom: 0.5rem;
}

.single-post-content a {
    color: #C8191E;
    text-decoration: underline;
}

.single-post-content a:hover {
    color: #a81519;
}

.single-post-content img {
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
    border-radius: 0.5rem;
}

.single-post-content blockquote {
    border-left: 4px solid #C8191E;
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    color: #6b7280;
    font-style: italic;
}

.single-post-content code {
    background-color: #f3f4f6;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    color: #C8191E;
}

.single-post-content pre {
    background-color: #1f2937;
    color: #f9fafb;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.single-post-content pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
}

/* ボタンのスタイル（赤背景・白文字） */
.single-post-content button,
.single-post-content input[type="submit"],
.single-post-content input[type="button"],
.single-post-content .wp-block-button__link,
.single-post-content a.button,
.single-post-content a[class*="button"],
.single-post-content .button {
    background-color: #C8191E !important;
    color: #ffffff !important;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none !important;
    display: inline-block;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.single-post-content button:hover,
.single-post-content input[type="submit"]:hover,
.single-post-content input[type="button"]:hover,
.single-post-content .wp-block-button__link:hover,
.single-post-content a.button:hover,
.single-post-content a[class*="button"]:hover,
.single-post-content .button:hover {
    background-color: #a81519 !important;
    color: #ffffff !important;
}

.single-post-content button:focus,
.single-post-content input[type="submit"]:focus,
.single-post-content input[type="button"]:focus {
    outline: 2px solid #C8191E;
    outline-offset: 2px;
}

/* 通常のリンクは下線ありの赤色のまま（ボタンクラスを持たないもの） */
.single-post-content a:not(.button):not([class*="button"]):not(.wp-block-button__link) {
    color: #C8191E;
    text-decoration: underline;
}

/* スマホ用の文字サイズ調整（768px以下） */
@media (max-width: 768px) {
    /* 投稿コンテンツ全体のフォントサイズ */
    .single-post-content {
        font-size: 0.875rem; /* 14px（通常16pxの87.5%） */
        line-height: 1.75;
    }
    
    /* タイトル（ページタイトル） */
    .text-2xl {
        font-size: 1.5rem !important; /* text-2xl（1.5rem）から1.5remのままだが、確実に適用 */
    }
    
    /* hタグのサイズ調整（投稿ページ） */
    .single-post-content h1 {
        font-size: 1.75rem; /* 2.25rem → 1.75rem */
        padding: 0.75rem 1rem; /* パディングも少し縮小 */
        margin-top: 2rem;
        margin-bottom: 1.25rem;
    }
    
    .single-post-content h2 {
        font-size: 1.5rem; /* 1.875rem → 1.5rem */
        padding: 0.75rem 1rem;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }
    
    .single-post-content h3 {
        font-size: 1.25rem; /* 1.5rem → 1.25rem */
        padding: 0.625rem 0.875rem;
        margin-top: 1.75rem;
        margin-bottom: 0.875rem;
    }
    
    .single-post-content h4 {
        font-size: 1.125rem; /* 1.25rem → 1.125rem */
        padding: 0.5rem 0.75rem;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
    }
    
    .single-post-content h5 {
        font-size: 1rem; /* 1.125rem → 1rem */
        padding: 0.5rem 0.625rem;
        margin-top: 1.25rem;
        margin-bottom: 0.625rem;
    }
    
    .single-post-content h6 {
        font-size: 0.9375rem; /* 1rem → 0.9375rem */
        padding: 0.5rem 0.625rem;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }
    
    /* テーブルのフォントサイズ（投稿ページ） */
    .single-post-content table th,
    .single-post-content table td {
        font-size: 0.875rem;
        padding: 0.625rem 0.75rem;
    }
    
    /* リストのフォントサイズ（投稿ページ） */
    .single-post-content ul,
    .single-post-content ol {
        font-size: 0.875rem;
    }
    
    /* 引用のフォントサイズ（投稿ページ） */
    .single-post-content blockquote {
        font-size: 0.875rem;
        padding-left: 1rem;
    }
    
    /* コードのフォントサイズ（投稿ページ） */
    .single-post-content code {
        font-size: 0.8125rem;
    }
    
    .single-post-content pre {
        font-size: 0.8125rem;
        padding: 0.75rem;
    }
    
    /* ボタンのフォントサイズ（投稿ページ） */
    .single-post-content button,
    .single-post-content input[type="submit"],
    .single-post-content input[type="button"],
    .single-post-content .wp-block-button__link,
    .single-post-content a.button,
    .single-post-content a[class*="button"],
    .single-post-content .button {
        font-size: 0.875rem;
        padding: 0.625rem 1.25rem;
    }
    
    /* ========================================
       固定ページ全体のスマホ用文字サイズ調整
       ======================================== */
    
    /* 本文テキストの基本サイズ */
    .bg-white p,
    section p,
    div p {
        font-size: 0.875rem !important; /* 14px（16pxの87.5%） */
        line-height: 1.75 !important;
    }
    
    /* h1タグ（ページ全体） */
    h1 {
        font-size: 1.75rem !important; /* 2xl → 1.75rem */
    }
    
    /* h2タグ（ページ全体） */
    h2 {
        font-size: 1.5rem !important; /* 通常より小さく */
    }
    
    /* h3タグ（ページ全体） */
    h3 {
        font-size: 1.25rem !important; /* 通常より小さく */
    }
    
    /* h4タグ（ページ全体） */
    h4 {
        font-size: 1.125rem !important;
    }
    
    /* h5タグ（ページ全体） */
    h5 {
        font-size: 1rem !important;
    }
    
    /* h6タグ（ページ全体） */
    h6 {
        font-size: 0.9375rem !important;
    }
    
    /* リスト（固定ページ） */
    ul,
    ol {
        font-size: 0.875rem !important;
    }
    
    li {
        font-size: 0.875rem !important;
        line-height: 1.75 !important;
    }
    
    /* テーブル（固定ページ） */
    table th,
    table td {
        font-size: 0.875rem !important;
        padding: 0.625rem 0.75rem !important;
    }
    
    /* 引用（固定ページ） */
    blockquote {
        font-size: 0.875rem !important;
    }
    
    /* コード（固定ページ） */
    code {
        font-size: 0.8125rem !important;
    }
    
    pre {
        font-size: 0.8125rem !important;
    }
    
    /* ボタン（固定ページ） */
    button,
    input[type="submit"],
    input[type="button"],
    .wp-block-button__link,
    a.button,
    a[class*="button"],
    .button {
        font-size: 0.875rem !important;
    }
    
    /* Tailwind CSSクラスのオーバーライド（必要に応じて） */
    .text-base {
        font-size: 0.875rem !important; /* 16px → 14px */
    }
    
    .text-lg {
        font-size: 1rem !important; /* 18px → 16px */
    }
    
    .text-xl {
        font-size: 1.125rem !important; /* 20px → 18px */
    }
    
    .text-2xl {
        font-size: 1.5rem !important; /* 24px → 24px（維持） */
    }
    
    .text-3xl {
        font-size: 1.875rem !important; /* 30px → 30px */
    }
    
    .text-4xl {
        font-size: 2rem !important; /* 36px → 32px */
    }
    
    .text-5xl {
        font-size: 2.25rem !important; /* 48px → 36px */
    }
}