/* ============================================
   モバイル統合CSS - mobile-unified.css
   作成日: 2025-12-23
   目的: 全モバイルスタイルを1ファイルに集約
   読み込み: header.phpの最後（最優先適用）
   ============================================ */

/* ============================================
   768px以下（タブレット・スマホ）
   ============================================ */
@media (max-width: 768px) {
    
    /* --- 背景（モバイルでは雲を拡大表示） --- */
    body::after {
        background-size: 200% auto !important;
        background-position: center top !important;
    }
    
    /* --- ヘッダー（空と雲を見せる） --- */
    header {
        padding: 5px 0 !important;
        margin-bottom: 5px !important;
        margin-top: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }
    
    header .container {
        background: transparent !important;
        padding: 0 !important;
    }
    
    .site-description {
        background: transparent !important;
        font-size: 11px !important;
        margin-top: 8px !important;
        margin-bottom: 0 !important;
        margin-right: -60px !important;
        text-align: center !important;
    }
    
    .header-doves {
        background: transparent !important;
        margin-top: 8px !important;
        margin-bottom: 0 !important;
        margin-right: -60px !important;
        text-align: center !important;
    }
    
    header .site-title {
        font-size: 20px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }
    
    header .site-title a {
        font-size: 20px;
        text-decoration: none !important;
        border-bottom: none !important;
    }
    
    .site-title a,
    h1.site-title a,
    header h1.site-title a {
        text-decoration: none !important;
        border-bottom: none !important;
    }
    
    /* サイトタイトルの下線を完全に削除 */
    header h1,
    header .site-title,
    .site-title {
        border-bottom: none !important;
    }
    
    /* --- レイアウト --- */
    .container {
        width: 100%;
        max-width: 100%;
        padding: 0 5px;
        overflow-x: hidden;
    }
    
    .main-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    
    .left-sidebar {
        display: none;
    }
    
    .content-area {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
        order: 1;
        overflow-x: hidden;
    }
    
    .sidebar {
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
        margin: 20px 0 0 0;
        order: 2;
        position: static;
    }
    
    /* --- 記事コンテナ --- */
    .single-post-container {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
    }
    
    /* --- 記事内のmainタグ（blog-common.cssの上書き） --- */
    .post-content main,
    .single-post-content main,
    .article-content,
    main {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* --- 記事本体（白背景エリア） --- */
    .single-post-content {
        width: 100%;
        max-width: 100%;
        padding: 8px;
        margin: 0;
        border-radius: 0;
    }
    
    /* --- パンくずリスト --- */
    .breadcrumbs {
        font-size: 12px;
        margin: 0 0 8px 0 !important;
        padding: 0 0 8px 0 !important;
        text-align: left !important;
    }
    
    /* --- 記事タイトル --- */
    .single-post-content .post-title,
    .post-title {
        font-size: 18px;
        margin-bottom: 8px;
        line-height: 1.4;
        word-break: break-word;
    }
    
    /* トップページの記事タイトル */
    .post-item .post-title {
        font-size: 16px;
        line-height: 1.4;
    }
    
    .post-item .post-title a {
        display: block;
    }
    
    /* 「｜」分割タイトル用 */
    .title-main {
        display: block;
        font-size: 15px;
        color: #666;
        font-weight: normal;
        margin-bottom: 4px;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    
    .title-sub {
        display: block;
        font-size: 17px;
        color: #333;
        font-weight: bold;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    
    /* 記事ページのタイトル分割 */
    .single-post-content .title-main {
        font-size: 14px;
    }
    
    .single-post-content .title-sub {
        font-size: 18px;
    }
    
    /* --- 記事メタ情報（日付・著者） --- */
    .single-post-content .post-meta,
    .post-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 8px;
        gap: 5px;
        font-size: 13px;
        padding: 5px 0;
    }
    
    .single-post-content .post-meta span,
    .post-meta span {
        margin-bottom: 0;
        margin-right: 0;
    }
    
    /* --- カテゴリタグ --- */
    .post-categories {
        margin-top: 5px;
        margin-bottom: 10px;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        align-self: flex-end !important;
        width: 100%;
        gap: 4px !important;
    }
    
    .post-categories a {
        padding: 3px 8px;
        font-size: 12px;
        display: inline-block;
    }
    
    /* --- 記事本文 --- */
    .post-content {
        width: 100%;
        max-width: 100%;
        padding: 0;
        overflow-x: hidden;
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-size: 15px;
    }
    
    .post-content p {
        margin-bottom: 1rem;
        padding: 0;
        text-align: left;
    }
    
    /* --- 見出し --- */
    .post-content h1 {
        font-size: 1.4rem;
        margin: 1.5rem 0 1rem;
    }
    
    .post-content h2 {
        font-size: 1.25rem;
        margin: 2rem 0 1rem;
    }
    
    .post-content h3 {
        font-size: 1.1rem;
        margin: 1.5rem 0 0.75rem;
    }
    
    /* --- 画像 --- */
    .post-content img,
    .single-post-content img {
        max-width: 100%;
        height: auto;
    }
    
    /* --- テーブル --- */
    .post-content table {
        width: 100%;
        max-width: 100%;
        display: block;
        overflow-x: auto;
        font-size: 0.8rem;
    }
    
    .post-content th,
    .post-content td {
        padding: 0.4rem;
    }
    
    /* --- リスト --- */
    .post-content ul,
    .post-content ol {
        padding-left: 1.5rem;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* --- プレ要素・コード --- */
    .post-content pre,
    .post-content code {
        max-width: 100%;
        overflow-x: auto;
        word-wrap: break-word;
    }
    
    /* --- 引用・ノート --- */
    .post-content blockquote,
    .post-content .note,
    .post-content .lead,
    .post-content .toc {
        margin-left: 0;
        margin-right: 0;
        padding: 0.75rem;
    }
    
    /* --- 広告 --- */
    .adsbygoogle,
    .article-end-ad,
    .sidebar-ad {
        max-width: 100%;
        overflow: hidden;
    }
    
    /* --- 記事ヘッダー --- */
    .post-header {
        padding: 5px 0;
    }
    
    /* --- 鳩アニメーション --- */
    .dove {
        width: 20px;
        height: 20px;
    }
    
    .header-doves {
        gap: 6px;
    }
}

/* ============================================
   480px以下（小型スマホ）
   ============================================ */
@media (max-width: 480px) {
    
    .container {
        padding: 0 3px;
    }
    
    .content-area,
    .sidebar {
        padding: 0;
    }
    
    .single-post-content {
        padding: 5px;
    }
    
    .post-title {
        font-size: 18px;
        line-height: 1.3;
    }
    
    .post-content {
        font-size: 14px;
    }
    
    .post-content h1 {
        font-size: 1.25rem;
    }
    
    .post-content h2 {
        font-size: 1.1rem;
    }
    
    .post-content h3 {
        font-size: 1rem;
    }
    
    .post-content table {
        font-size: 0.7rem;
    }
    
    .post-content th,
    .post-content td {
        padding: 0.25rem;
    }
    
    .breadcrumbs {
        font-size: 11px;
    }
}

/* ============================================
   横向きスマホ
   ============================================ */
@media (max-width: 812px) and (orientation: landscape) {
    .main-container {
        flex-direction: column;
    }
    
    .content-area,
    .sidebar {
        width: 100%;
        max-width: 100%;
    }
    
    .single-post-content {
        padding: 10px 15px;
    }
}