.article { padding: 3rem 0 0; font-weight: 300; }
.article-header { padding: 1rem 0 0; }
.article-header h2 { padding: 1rem 0; font-size: 2.25rem; line-height: 140%; }
.article-header-date span { height: 30px; line-height: 30px; padding: 0 0.75rem; display: inline-block; font-size: 13px; border-radius: 50px; }

.article-cats span { font-size: 14px; margin-right: 0.5rem; border: 1px solid #555555; padding: 0 0.5rem; font-weight: 600; height: 30px; line-height: 30px; display: inline-block; }
.article-tags { margin-bottom: 1rem; padding: 0.5rem 0; border-top: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; }
.article-tags p { padding: 0.25rem 0; }
.article-meta { padding: 1rem 0 0.5rem; }
.article-meta dl { font-size: 18px; font-weight: 500; padding: 0.25rem 0; }
.article-meta dl .icon { margin-right: 0.25rem; }

.article-heading { line-height: 130%; font-size: 1.75rem; margin: 2rem 0 1rem; padding-left: 1rem; }
.article-heading::before { width: 5px; height: 100%; border-radius: 25px; background: #B29A5D; left: 0; top:0; bottom: 0; }

.article .btn_wrap { padding-top: 2rem; }
.article .btn_wrap .btn { font-size: 18px; height: 60px; line-height: 60px; padding: 0 4rem; }
.article .btn_wrap .btn span { line-height: inherit; font-weight: 400; }

.article-btn { padding: 2rem 0 4rem; border-bottom: 1px solid #dddddd; margin-bottom: 4rem; }
.article-btn .btn_wrap { padding: 0; }

.article-back { padding: 6rem 0; } 
.article-back .btn_wrap { padding-top: 0; } 

.post_image { margin: 2rem 0; }
.post_image img { border: 1px solid #e6e6e6; }
.post_contents p { line-height: 240%; }
.post_contents .st-post-tags { display: none; }
.post_contents hr { margin: 2rem 0; border-color: #ddd; border-top: none; }

.post_contents h2,
.post_contents h3,
.post_contents h4 { margin: 3rem 0 0.75rem; font-size: 1.75rem; line-height: 120%; padding-left: 1rem; font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif; font-weight: 400; position: relative; }
.post_contents h2::before,
.post_contents h3::before,
.post_contents h4::before { width: 5px; height: 100%; border-radius: 25px; background: #B29A5D; left: 0; top: 0; bottom: 0; content: ''; position: absolute; margin: auto; display: block; }
.post_contents h2 span { color: #555555 !important; }

.post_contents .q_button { box-sizing: border-box; display: flex; justify-content: center; align-items: center; max-width: 420px; width: 100%; color: #fff; text-align: center; font-size: 1.25rem; text-decoration: none;
    margin-top: 1rem;
    height: 70px;
    line-height: 70px;
    background: url(../img/common/icn-arw.png) no-repeat 92% center;
    background-size: 25px 25px;
    background-color: #555555;
}
.post_contents .q_button::before { margin-right: 0.5rem; content: ''; width: 25px; height: 25px; background: url(../img/seminar/icn-phone.png) no-repeat center center; background-size: 100% auto; display: inline-block; }

.post_contents .q_button.bt_green { background-color: #297A55; }
.post_contents .q_button.bt_green::before { background-image: url(../img/seminar/icn-line.png); }

.post_contents .q_button.bt_blue { background-color: #292e7a; }
.post_contents .q_button.bt_blue::before { display: none; }

.post_contents a { text-decoration: underline; }

@media screen and (max-width: 767px) { 
    .article { padding: 2rem 0 0; }
    .article-header { padding: 0; }
    .article-header h2 { font-size: 1.75rem; }

    .article-cats span { font-size: 11px; height: 23px; line-height: 23px; }
    
    .article-header-date { padding-bottom: 0.5rem; }
    .article-header-date span { height: 25px; line-height: 25px; }
    .article-tags { margin-bottom: 1.5rem; }
    .article-tags p { font-size: 12px; }

    .article-meta { padding-top: 0.5rem; }
    .article-meta dl { font-size: 13px; padding: 2px 0; }
    
    .article-btn { margin-bottom: 2rem; padding: 3rem 0; }

    .article .related { padding-top: 1rem; }
    .article .btn_wrap .btn { height: 50px; line-height: 48px; font-size: 16px; }

    .article-back { padding: 3rem 0 0; }

    .post_image { margin: 1rem 0; }
    
    .post_contents h2, 
    .post_contents h3, 
    .post_contents h4 { line-height: 140%; font-size: 1.5rem; }

    .post_contents p { line-height: 200%; }

    .post_contents .q_button { height: 55px; line-height: 55px; }
    .post_contents .q_button::before { width: 23px; height: 23px; }

}