/* Phase 7J タスク8: 施工事例詳細ページ専用スタイル */

/* ページタイトル */
.detail-page-title {
    font-size: 1.4em;
    font-weight: bold;
    color: #333;
    margin: 0 0 16px;
    padding: 10px 14px;
    border-left: 4px solid #0066cc;
    background: #f5f8ff;
}

/* 記事コンテナ */
article.bothsp {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 24px;
    margin: 20px 0;
    line-height: 1.8;
}

/* 施工事例タイトル（h5→h2変換後） */
article.bothsp .box03m h2 {
    font-size: 1.3em;
    font-weight: bold;
    color: #0055aa;
    margin: 0 0 16px;
    padding: 8px 12px;
    border-left: 4px solid #0066cc;
    border-bottom: 1px solid #cce0ff;
    background: #f0f6ff;
}

/* 本文テキスト */
article.bothsp .box03m p {
    margin: 0 0 12px;
    color: #444;
    font-size: 0.95em;
}

/* 画像 */
article.bothsp .box03m img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 8px 0;
}

/* 「記事一覧を見る」リンク */
article.bothsp a.pagelist-link,
article.bothsp a[href*="/results/"] {
    display: inline-block;
    margin: 16px 0 0;
    padding: 8px 20px;
    background: #0066cc;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: bold;
}

article.bothsp a.pagelist-link:hover,
article.bothsp a[href*="/results/"]:hover {
    background: #0044aa;
    text-decoration: none;
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
    article.bothsp {
        padding: 16px;
        margin: 12px 0;
    }

    article.bothsp .box03m h2 {
        font-size: 1.1em;
    }
}