/**
 * モバイル表示修正用CSS - シンプルに
 */

/* スマホ表示修正 - 全体的に見直し */
@media (max-width: 768px) {
    /* コンテナの余白を最小に */
    .forth-container {
        padding: 0 5px;
        max-width: 100%;
    }

    .forth-main {
        padding: 0;
        width: 100%;
    }

    /* 記事本体 */
    .forth-article {
        padding: 0;
        margin: 0;
    }

    .forth-article-header {
        padding: 20px 10px;
    }

    /* 記事メタ情報を縦並びに */
    .forth-article-meta {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        margin-top: 15px;
    }

    .forth-article-meta > span {
        display: inline-block;
        margin-right: 0;
    }

    /* カテゴリーリンクを横並びに */
    .cat-links {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .cat-links a {
        padding: 2px 8px;
        background: #f1f5f9;
        border-radius: 4px;
        font-size: 12px;
    }

    .forth-article-content {
        padding: 20px 10px;
    }

    .forth-article-footer {
        padding: 15px 10px;
    }

    /* 広告エリア - 余白最小 */
    .forth-ad-wrapper {
        padding: 10px 5px;
        margin: 10px 0;
        background: transparent;
    }

    .forth-article .forth-ad-wrapper {
        padding: 10px 5px;
    }

    /* 300px広告をそのまま表示 */
    .dmm-widget-banner,
    .forth-dmm-banner-widget,
    .widget_forth_dmm_widget {
        width: 100%;
        padding: 0;
        margin: 0 auto;
        text-align: center;
    }

    /* iframe 300pxをそのまま */
    iframe[width="300"],
    .dmm-widget-banner iframe {
        width: 300px !important;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    /* ナビゲーション */
    .forth-post-nav {
        margin: 10px 5px;
        padding: 10px 0;
    }

    /* コメントエリア - シンプルに */
    .forth-comments-area {
        margin: 10px 5px;
        padding: 10px;
        background: #f9fafb;
        border-radius: 0;
    }

    .comment-respond {
        padding: 10px;
        background: white;
    }

    /* サイドバー非表示 */
    .forth-sidebar {
        display: none;
    }

    /* 2カラムを1カラムに */
    .forth-layout-2col {
        display: block;
    }

    /* ヘッダー */
    .forth-header {
        padding: 15px 10px;
    }

    .forth-header-brand {
        flex-direction: column;
        align-items: flex-start;
    }

    .forth-tagline {
        font-size: 11px;
        margin-top: 5px;
    }

    /* フッター */
    .forth-footer {
        padding: 30px 10px;
    }

    /* フッターメタ情報も縦並び */
    .forth-footer-meta {
        flex-direction: column;
        gap: 10px;
    }

    /* タグリスト */
    .forth-tag-list {
        width: 100%;
    }

    /* ナビゲーションボタンも縦並び */
    .forth-nav-item {
        width: 100%;
        text-align: left;
        justify-content: flex-start;
    }

    /* 投票ボタンも縦並び */
    .forth-vote-buttons {
        flex-direction: column;
        width: 100%;
    }

    .forth-vote-btn {
        width: 100%;
        justify-content: space-between;
    }
}

/* スマホ表示の追加修正 */
@media (max-width: 768px) {
    /* フロントページセクション */
    .forth-section {
        padding: 30px 0;
    }

    /* ショックカードを縦並びに */
    .forth-shock-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* 投票ボタンをリスト形式に */
    .forth-vote-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .forth-vote-btn {
        width: 100%;
        padding: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* リンクカードを縦並びに */
    .forth-link-cards {
        grid-template-columns: 1fr;
    }

    /* タイトルのフォントサイズ調整 */
    .forth-article-title {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .forth-section-title {
        font-size: 1.3rem;
    }

    /* DMMウィジェットの調整 */
    .forth-dmm-homepage-widget {
        padding: 20px 0;
    }

    .forth-dmm-flex {
        flex-direction: column;
        gap: 20px;
    }

    /* 言語切替ボタン */
    .forth-lang {
        display: flex;
        gap: 5px;
    }

    .forth-lang-btn {
        padding: 5px 10px;
        font-size: 12px;
    }
}

/* コメントフォーム基本スタイル */
.comment-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #374151;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: calc(100% - 20px);
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 16px;
}

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

.comment-form input[type="submit"] {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}