.article {
    width: 100%;
    padding: 8px; padding-top: 2.133vw; padding-right: 2.133vw; padding-bottom: 2.133vw; padding-left: 2.133vw;
    border: solid 1px #e95513;
}

.article .articleHead {
    margin-bottom: 5px; margin-bottom: 1.333vw;
    font-size: 16px; font-size: 1.6rem; font-size: 4.266vw;
}
.article .articleHead span,
.article .articleHead .articleCategory {
    display: block;
    padding: 0 8px; padding-right: 2.133vw; padding-left: 2.133vw;
}
.article .articleHead .articleCategory {
    display: block;
    text-decoration: none;
    font-size: 24px; font-size: 6.4vw;
    background-color: #00a0e9;
    color: #fff;
    text-align: center;
    padding: 10px 0 4px 0; padding-top: 2.666vw; padding-bottom: 1.066vw;
    margin-bottom: 8px; margin-bottom: 2.133vw;
}
.article .articleHead .articleCategory.cat-2 {
    background-color: #6cbb5a;
}
.article .articleHead .articleCategory.cat-3 {
    background-color: #e95513;
}
.article .articleHead .articleCategory.cat-4 {
    background-color: #fcb848;
}

.article .articleHead .articleUpdate {
    text-align: right;
}


#articleDetailBody {
    width: 100%;
}

#articleGallery {
    width: 100%;
}
#articleGalleryCanvas {
    position: relative;
    width: 100%;
    height: 310px; height: 82.4vw;
    overflow: hidden;
    background-color: #000;
}
#articleGalleryCanvas li {
    position: relative;
    width: 100%;
    height: 309px; height: 82.4vw;
}
#articleGalleryCanvas li a {
    display: inline-block;
    width: 100%;
    height: 100%;
    outline: none;
}
#articleGalleryCanvas li img {
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
#articleGalleryCanvas li img.vertical {
    height: 100%;
    width: auto;
}

#articleGalleryThumbnails {
    width: 100%;
    height: 76px; height: 20.266vw;
    overflow: hidden;
}
#articleGalleryThumbnails div {
    outline: none;
}
#articleGalleryThumbnails:after {
    content: "";
    display: block;
    clear: both;
}
#articleGalleryThumbnails li {
    outline: none;
    width: 76px; width: 20.266vw;
    /*height: 76px; height: 20.266vw;*/
    overflow: hidden;
    background-color: #eee;
    padding: 4px 4px 0 0; padding-top: 1.066vw; padding-right: 1.066vw;
    float: left;
}
#articleGalleryThumbnails img {
    -webkit-transition: .6s;
    transition: .6s;
    opacity: 0.4;
}
#articleGalleryThumbnails .slick-current img {
    opacity: 1;
}

#articleGallery .no-image {
    width: 100%;
    height: 310px; height: 82.4vw;
    line-height: 310px; line-height: 82.4vw;
    text-align: center;
    background-color: #ddd;
    margin-bottom: 4px; margin-bottom: 1.066vw;
}


#articleOutline {
    background-color: #fce2ba;
    padding: 10px 18px; padding-top: 2.666vw; padding-bottom: 2.666vw; padding-right: 4.8vw; padding-left: 4.8vw;
}
#articleOutline h3 {
    font-size: 18px; font-size: 1.8rem; font-size: 4.8vw;
    padding: 5px 0 2px 0; padding-top: 1.333vw; padding-bottom: 0.533vw;
}
#articleOutline table,
#articleOutline table tr,
#articleOutline table th,
#articleOutline table td {
    display: block;
}
#articleOutline table {
    width: 100%;
}
#articleOutline table th,
#articleOutline table td {
    line-height: 145%;
    width: 100%;
    text-align: left;
}
#articleOutline table th {
    color: #e95513;
    padding: 5px 0 2px 0; padding-top: 1.333vw; padding-bottom: 0.533vw;
}
#articleOutline table td {
    padding-bottom: 5px; padding-bottom: 1.333vw;
}

#articleNotes {
    margin-top: 4px; margin-top: 1.066vw;
    width: 100%;
}
#articleNotes h4,
#articleNotes p {
}

#articleNotes h4 {
    width: 100%;
    background-color: #e95513;
    text-align: center;
}
#articleNotes h4 img {
    width: 135px; width: 36vw;
}
#articleNotes p {
    background-color: #fce2ba;
    padding: 12px 18px; padding-top: 3.2vw; padding-bottom: 3.2vw; padding-right: 4.8vw; padding-left: 4.8vw;
}


#articleNav {
    width: 100%;
    margin-top: 18px; margin-top: 4.8vw;
}
#articleNav li {
    padding-top: 6px; padding-top: 1.6vw;
}
#articleNav li a {
    text-decoration: none;
    font-size: 18px; font-size: 1.8rem; font-size: 4.8vw;
    line-height: 150%;
    font-weight: bold;
    color: #e95513;
    display: block;
    position: relative;
    padding: 7px 0 4px 48px; padding-top: 1.866vw; padding-bottom: 1.066vw; padding-left: 12.8vw;
    background-repeat: no-repeat;
    background-size: 38px; background-size: 10.133vw;
    background-position: left;
}
#articleNav #articleNavContact a {
    background-image: url(../img/common/mail-icon.svg);
}
#articleNav #articleNavReturn a {
    background-image: url(../img/article/return-icon.svg);
}



@media screen and (min-width: 768px) {

    .article {
        padding: 10px;
    }

    .article .articleHead {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
        font-size: 20px;
    }
    .article .articleHead span {
        vertical-align: middle;
        white-space: nowrap;
        padding: 7px 0;
    }
    .article .articleHead span+span {
        margin-left: 10px;
    }

    .article .articleHead .articleCategory {
        margin-right: 10px;
        font-size: 28px; font-size: 2.8rem;
        min-width: 160px;
        padding: 7px 16px 7px 16px;
        margin-bottom: 0;
    }
    .article .articleHead .articleAddress {
        flex-grow: 10;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .article .articleHead .articleUpdate {}


    #articleDetailBody {
        display: table;
    }
    #articleGallery,
    #articleOutline {
        display: table-cell;
        vertical-align: top;
    }

    #articleGallery {
        width: 400px;
    }
    #articleGalleryCanvas {
        width: 396px;
        height: 396px;
    }
    #articleGalleryCanvas li {
        width: 396px;
        height: 396px;
    }
    #articleGalleryThumbnails {
        width: 396px;
        height: 96px;
    }
    #articleGalleryThumbnails li {
        width: 96px;
        /*height: 96px;*/
        padding: 4px 4px 0 0;
    }

    #articleGallery .no-image {
        width: 396px;
        height: 396px;
        line-height: 396px;
        margin-bottom: 0;
    }

    #articleOutline {
        padding: 18px 20px;
    }
    #articleOutline h3 {
        font-size: 20px;
        padding: 0;
    }
    #articleOutline table {
        display: table;
    }
    #articleOutline table tr {
        display: table-row;
    }
    #articleOutline table th,
    #articleOutline table td {
        display: table-cell;
        padding: 8px 0;
        line-height: 125%;
        vertical-align: middle;
    }
    #articleOutline table th {
        white-space: nowrap;
        font-size: 14px; font-size: 1.4rem;
        padding-right: 16px;
        width: auto;
    }


    #articleNotes {
        margin-top: 4px;
        display: table;
    }
    #articleNotes h4,
    #articleNotes p {
        display: table-cell;
    }

    #articleNotes h4 {
        vertical-align: middle;
        width: 135px;
    }
    #articleNotes h4 img {
        width: 100%;
    }
    #articleNotes p {
        vertical-align: top;
        padding: 16px 20px;
    }


    #articleNav {
        display: table;
        margin-top: 24px;
    }
    #articleNav li {
        display: table-cell;
        padding-top: 0;
        width: 50%;
    }
    #articleNav li a {
        font-size: 24px;
        display: inline-block;
        background-size: 62px;
        padding: 16px 0 10px 0;
    }
    #articleNav #articleNavReturn {
        text-align: right;
    }
    #articleNav #articleNavContact a {
        padding-left: 70px;
        background-image: url(../img/common/mail-icon.svg);
        background-position: left;
    }
    #articleNav #articleNavReturn a {
        padding-right: 66px;
        background-image: url(../img/article/return-icon.svg);
        background-position: right;
    }

}