@charset "UTF-8";

/* 共通部分の上書き */
footer { position: relative;}

/*
------------------------------------------------------------*/
.blog-article-wrap { max-width: 620px; margin: 120px auto;}

.blog-article-wrap .mainv { margin-bottom: 72px;}
.blog-article-wrap .title { min-height: 1em; margin-bottom: 18px; font-family: -apple-system,'BlinkMacSystemFont','Helvetica Neue','Segoe UI','Hiragino Kaku Gothic ProN','Hiragino Sans','ヒラギノ角ゴ ProN W3','Arial','メイリオ','Meiryo',sans-serif; font-weight: 600; line-height: 1.5; color: #222; letter-spacing: .04em; -webkit-font-feature-settings: "palt" 1; font-feature-settings: "palt" 1; pointer-events: auto; font-size: 32px;}

@media screen and (max-width: 640px){
.blog-article-wrap { margin: 70px auto;}
.blog-article-wrap >*:not(.mainv) { margin-right: 16px; margin-left: 16px;}
.blog-article-wrap .mainv { margin-bottom: 30px;}
.blog-article-wrap .title { font-size: 24px;}
}

/**/
.blog-article-wrap .info-wrap { margin-bottom: 44px;}
.blog-article-wrap .info-wrap .editor { display: inline-block; vertical-align: middle;}
.blog-article-wrap .info-wrap .editor figure { display: inline-block; width: 40px; height: 40px; border-radius: 40px; overflow: hidden; vertical-align: middle; margin-right: 16px;}
.blog-article-wrap .info-wrap .editor .name { display: inline-block; vertical-align: middle; letter-spacing: .04em;}
.blog-article-wrap .info-wrap .date { display: inline-block; vertical-align: middle; margin-left: 8px; letter-spacing: .02em; opacity: .6;}
.blog-article-wrap .info-wrap .date::before { content: '／'; margin-right: 8px;}

/**/
.blog-article-wrap section h3 {  min-height: 1em; margin-bottom: 20px; font-family: -apple-system,'BlinkMacSystemFont','Helvetica Neue','Segoe UI','Hiragino Kaku Gothic ProN','Hiragino Sans','ヒラギノ角ゴ ProN W3','Arial','メイリオ','Meiryo',sans-serif; font-weight: 600; line-height: 1.5; color: #222; letter-spacing: .04em; -webkit-font-feature-settings: "palt" 1; font-feature-settings: "palt" 1; pointer-events: auto; font-size: 24px;}
.blog-article-wrap section { margin-bottom: 100px;}
.blog-article-wrap section p { font-size: 18px; line-height: 36px; margin-bottom: 40px;}
.blog-article-wrap section p:last-child { margin-bottom: 0;}
.blog-article-wrap section figure { margin-bottom: 40px;}
.blog-article-wrap section .quote { background: #f8f8f8; padding: 25px 36px; margin-bottom: 40px;}
.blog-article-wrap section .quote p { font-size: 16px; margin-bottom: 0;}
.blog-article-wrap section .quote p+p { margin-top: 30px;}
.blog-article-wrap section figcaption { margin-top: 16px; font-style: italic; font-size: 13px; position: relative; padding-left: 30px; opacity: .7;}
.blog-article-wrap section figcaption::before { content: ''; position: absolute; top: 50%; left: 0; width: 20px; height: 1px; background: #111;}

@media screen and (max-width: 640px){
.blog-article-wrap section { margin-bottom: 80px;}
.blog-article-wrap section p { font-size: 16px; line-height: 30px; margin-bottom: 30px;}
.blog-article-wrap section figure { margin-bottom: 30px;}
.blog-article-wrap section .quote { padding: 18px 24px; margin-bottom: 30px;}
.blog-article-wrap section .quote p { font-size: 14px;}
}

/**/
.blog-footer .share { background: #f8f8f8; text-align: center; padding: 20px; margin-bottom: 30px;}
.blog-footer .share button { display: block; border-radius: 4px; border: none; background: yellow; width: 220px; margin: 16px auto 0;}
.blog-footer .share button span { display: block; height: 40px; line-height: 38px;}

.blog-footer .profile { padding-bottom: 40px; border-bottom: #ccc 1px solid;}
.blog-footer .profile >div { display: inline-block; vertical-align: top;}
.blog-footer .profile .icon { width: 80px; height: 80px; border-radius: 80px; overflow: hidden; margin-right: 16px;}
.blog-footer .profile .text-wrap { width: calc(100% - 96px);}
.blog-footer .profile .text-wrap p { line-height: 1.5; margin-bottom: 8px;}
.blog-footer .profile .text-wrap .name { font-weight: 600; font-size: 16px;}
.blog-footer .profile .text-wrap .sns-links span { display: inline-block;}
.blog-footer .profile .text-wrap .sns-links img { display: inline-block; vertical-align: middle; width: 24px; margin-left: 4px;}

.blog-footer .back-btn a { display: block; width: 200px; height: 60px; line-height: 58px; text-align: center; background: #000; color: #fff; margin: 60px auto 0;}

@media screen and (max-width: 640px){
.blog-footer .profile .icon { width: 56px; height: 56px;}
.blog-footer .profile .text-wrap { width: calc(100% - 72px);}

.blog-footer .back-btn a { margin: 40px auto 0;}
}