@charset "utf-8";

.article_detail_wrapper {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 20px; /* スマホ用の左右余白 */
}

.article_head {
    margin-bottom: 32px;
}

.article_topic {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--main-color);
    margin: 0 0 12px;
}
.article_topic a:hover {
    text-decoration: underline;
}

.article_title {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 24px;
}

.article_author_info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.article_figure {
    margin-bottom: 15px;
}

.author_avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.author_details {
    font-size: 0.85rem;
    line-height: 1.5;
}
.author_name {
    font-weight: 700;
    color: var(--text-color);
}
.author_meta {
    color: var(--sub-text-color);
}

.article_main_figure {
    margin: 0 0 8px;
    overflow: hidden; 
    border-radius: 8px;
}
.article_main_img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    display: block; 
}
.article_caption {
    font-size: 0.8rem;
    color: var(--sub-text-color);
    text-align: right;
}

.article_body {
    padding: 32px 0;
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
}
.article_body p {
    margin: 0 0 1.5em;
}
.article_body h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 2.5em 0 1em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--border-color);
}
.article_body h3 {
    margin: 2.5em 0 0;
}
.article_body a {
    color: var(--main-color);
    text-decoration: underline;
}

/* ========== 運営者記事のアイコン ========== */
.official_icon {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-left: 3px; /* 名前との間隔を少し調整 */
    background-color: var(--main-color); /* 運営者のテーマカラー */
    border-radius: 50%;
    cursor: default;
    
    /* SVGアイコンをマスクとして使用 */
    -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M12 2L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-3zm-1.05 15.54l-3.24-3.24 1.41-1.41 1.83 1.83 4.24-4.24 1.41 1.41-5.65 5.65z" fill="white"/%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M12 2L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-3zm-1.05 15.54l-3.24-3.24 1.41-1.41 1.83 1.83 4.24-4.24 1.41 1.41-5.65 5.65z" fill="white"/%3E%3C/svg%3E');
    -webkit-mask-size: 75%;
    mask-size: 75%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: bottom;
}

.article_item_date {
    display: inline-block;
    padding-left: 20px;
}

/* 4つの記事一覧グリッドにも対応させる場合（参考） */
.grid_article_meta.is_official {
    display: flex;
    align-items: center;
}
.grid_article_meta.is_official .official_icon {
    width: 14px;
    height: 14px;
    font-size: 9px;
    margin-left: 8px;
}


/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .article_title {
        font-size: 1.8rem;
    }
    .article_body {
        font-size: 0.95rem;
    }
    .article_body h2 {
        font-size: 1.3rem;
    }
}



/* 表 */
.safety_solutions_table_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.safety_solutions_table_element {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    font-size: 15px;
    border: 1px solid #e0e0e0;
}

.safety_solutions_table_cell {
    padding: 16px 20px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #e0e0e0;
}

.safety_solutions_table_row:last-child .safety_solutions_table_cell {
    border-bottom: none;
}

.safety_solutions_table_header_cell {
    background-color: var(--bright-comp-color);
    color: var(--comp-color);
    font-weight: 600;
    white-space: nowrap;
}

.safety_solutions_table_data_cell {
    line-height: 1.7;
    color: var(--comp-color);
}

.safety_solutions_table_category_cell {
    font-weight: 600;
    white-space: nowrap;
    width: 160px;
}

@media (max-width: 768px) {
    .safety_solutions_table_element {
        font-size: 14px;
        min-width: 700px;
    }
    .safety_solutions_table_cell {
        padding: 12px 16px;
    }
}