/* myblog/template/blog-disclaimer.html */


/* 基本的なレイアウト */
.blog-disclaimer-container {
    width: auto; /* 横幅を自動調整 */
    margin: 8px auto; /* 上部の余白 (mt-2 相当) を統合 */
    padding: 12px; /* 内部のパディング (p-2 相当) */
    background-color: #daf0c8; /* 背景色 */
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 影の調整 (shadow-sm 相当) */
}

/* 上下の余白 */
.blog-disclaimer-container section {
    margin-bottom: 1.25rem;
}
/* 見出し */
.blog-disclaimer-container h3 {
    font-size: 3rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1.5rem;
}
.blog-disclaimer-container h4 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #555;
    margin-bottom: 0.75rem; /* 段落間のスペースを狭く */
}
/* 文字列間隔　段落のスタイル */
.blog-disclaimer-container p {
    font-size: 1rem; /* 行間を狭く */
    line-height: 0.8;
    color: #635f58;
    margin-bottom: 0.25rem; /* 段落の下の余白を詰める */
}
.blog-disclaimer-container p.text-muted {
    font-style: italic;
}
/* 警告や強調 */
.blog-disclaimer-container p.text-danger {
    color: #d9534f;
}
/* 日付更新日セクション */
#disclaimer-datetime {
    font-size: 1.75rem; /* フォントサイズを大きく */
    text-align: right; /* 右端に寄せる */
    display: block; /* ブロック要素にする */
    padding-right: 1rem; /* 右側に適度な余白 */
    color: #388600; /* 文字色 */
}

/* ==========================
   レスポンシブ調整
========================== */
/* --- タブレット対応 (768px～991px) --- */
@media (max-width: 991px) {
    .blog-disclaimer-container {
        max-width: 100%;
        padding: 1.0rem;
    }
    .blog-disclaimer-container h3 {
        font-size: 2.5rem;
    }
    .blog-disclaimer-container h4 {
        font-size: 1.3rem;
    }
    .blog-disclaimer-container p {
        font-size: 1rem;
        line-height: 1.2; /* 行間を少し広げる */
    }
    #disclaimer-datetime {
        font-size: 1.5rem;
    }
}
/* --- スマホ対応 (～767px) --- */
@media (max-width: 767px) {
    .blog-disclaimer-container {
        max-width: 100%;
        padding: 0.5rem;
    }
    .blog-disclaimer-container h3 {
        font-size: 1.7rem;
    }
    .blog-disclaimer-container h4 {
        font-size: 1.2rem;
    }
    .blog-disclaimer-container p {
        font-size: 0.80rem;
        line-height: 1.0; /* 可読性を確保 */
    }
    #disclaimer-datetime {
        font-size: 1.25rem;
        text-align: right;
    }
}