@charset "utf-8";
/* CSS Document: Kyushu University Hospital Remote Surgery News */
#main.cls_main h3 {
    line-height: 1.4;
    padding: 8px 0 8px 8px;
}
.cls_right {
    width: 100%;
    text-align: right;
}
.text_subtitle {
    font-size: 80%;
    font-weight: 100;
    margin-bottom: 10px;
}
#title { width: 100%; }
#main h1 {
    background-size: cover;
    padding: 20px;
    border-bottom: 1px solid #ccc;
}

.box1 {
    border: 5px double #000000;
    padding: 10px;
}
.notes {
    font-size: 0.8em;
    vertical-align: top;
}
.flexBox_photo-txt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 0em;
    width: 100%;
}
.flexBox_photo-txt img { max-width: 100%; height: auto; }
.flexBox_photo-txt_photo { width: 82%; text-align: center; }
.flexBox_photo-txt_photo--portrait { width: 34%; }
.flexBox_photo-txt_txt2 { width: 100%; text-align: center; }
ul {
    list-style: none;
    color: #000000;
}
.section_title {
    color: #000000;
    text-decoration: underline;
    font-weight: bold;
    margin: 2.5em 0 0.8em;
}
.section_title2 {
    color: #000000;
    font-weight: bold;
    margin-top: 1.8em;
}
.org_logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 22px 28px;
    margin: 1.5em 0 2em;
}
.org_logos img { max-width: 210px; max-height: 72px; width: auto; height: auto; }
.org_logos img.logo_kyushu { max-width: 300px; }
.press_label { font-weight: bold; margin-bottom: 0.5em; }
.researcher_box { border: 1px solid #777; background: #f7f7f7; padding: 16px 18px; margin: 2em 0; }
.figure { margin: 2.5em auto 4em; text-align: center; }
.figure img { display: block; max-width: 90%; height: auto; margin: 0 auto 12px; }
.figure img.portrait { max-width: 280px; }
.figure figcaption { font-size: 0.95em; }
.contact_table { width: 100%; border-collapse: collapse; margin: 1em 0 2em; }
.contact_table th, .contact_table td { border: 1px solid #777; padding: 10px; vertical-align: top; }
.contact_table th { background: #f2f2f2; }
.role_list li { margin-bottom: 0.7em; }
.comment_block { margin: 1.5em 0; }
.comment_block h4 { margin-bottom: 0.35em; }
.vision_logo { margin-top: 3em; text-align: center; }
.vision_logo img { max-width: 300px; height: auto; }
section#Glossary ol { padding-left: 1.6em; list-style-type: decimal; }
section#Glossary li { margin-bottom: 1em; }

/* 研究者写真・コメントと参考図1の2カラムレイアウト */
.top_layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin: 30px 0 1em;
}
.left_column {
    width: 260px;
    flex: 0 0 260px;
}
.right_column {
    flex: 1 1 auto;
    min-width: 0;
}
.researcher_photo {
    margin: 0 0 15px;
    text-align: center;
}
.researcher_photo img {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 0 auto;
}
.top_layout .researcher_box {
    box-sizing: border-box;
    border: 1px dashed #666;
    background: #fff;
    padding: 15px;
    margin: 0;
    font-size: 0.9em;
}
.researcher_name {
    margin-top: 10px;
    text-align: right;
}
.top_layout .overview {
    margin: 0;
    text-align: center;
}
.top_layout .overview img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 40px auto 10px;
}
.top_layout .overview figcaption {
    font-size: 0.95em;
    line-height: 1.5;
}
.figure01 figcaption {
    width: 500px;
    max-width: 100%;
    margin: -20px auto 0;
    /* text-align: left; */
}
.figure02 figcaption {
    width: 500px;
    max-width: 110%;
    margin: 10px auto 0;
    text-align: center;
}
.figure_right {
    float: right;
    width: 320px;
    margin: 0 0 20px 30px;
}

.figure_right img {
    width: 110%;
    height: auto;
    display: block;
    margin: 37px 0 10px 0;
}

.figure_right_caption {
    font-size: 0.85em;
    margin-top: 8px;
    text-align: left;
}

.clearfix {
    clear: both;
}
@media screen and (max-width: 640px) {
    .top_layout { display: block; margin: 24px 0 2.5em; }
    .left_column { width: 100%; margin-bottom: 24px; }
    .right_column { width: 100%; }
    .researcher_photo img { max-width: 220px; }

    .flexBox_photo-txt { margin-bottom: 2.5em; gap: 14px; }
    .flexBox_photo-txt_photo, .flexBox_photo-txt_photo--portrait { width: 100%; }
    .org_logos { gap: 18px; }
    .org_logos img, .org_logos img.logo_kyushu { max-width: 78%; }
    .figure img { max-width: 100%; }
    .contact_table, .contact_table tbody, .contact_table tr, .contact_table th, .contact_table td { display: block; width: auto; }
    .contact_table th { text-align: left; }
}