@charset "UTF-8";

/* フロート要素の調整
=========================== */
body {padding: 0;}
#globalNavigation {position: relative;}
#pageFooter {padding: 0 20px 52px;}

/* 記事 - 枠組み
=========================== */
#single {background: #fff; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; line-height: 1.7; letter-spacing: 0.03em;}
#single header {padding: 16px 20px;}
#single header h1 {margin: 0 0 8px; font-size: 1.3rem;}
#single header p {margin: 8px 0;font-size: 0.9rem;}

#single header .info {display: flex; flex-flow: row nowrap;}
#single header time, #single header a {color: #999; font-size: 0.8rem; text-decoration: none;}
#single header time:after {content: '|'; margin: 0 8px;}

#single .thumbnail {margin: 0 0 20px;}
#single .thumbnail img {width: 100%; height: 100%; object-fit: cover; object-position: center; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3;}

#single .main {padding: 0 20px;}

@media screen and (min-width: 760px) {
  #single {margin: 24px 0;}
}

/* 記事 - 本文
=========================== */
#single h2 {margin: 2rem 0 12px; font-size: 1.1rem;}
#single h3 {margin: 2rem 0 12px; font-size: 1.0rem;}
#single h4 {margin: 2rem 0 12px; font-size: 0.9rem;}
#single p {margin: 0 0 24px; font-size: 0.9rem;}
#single a {color: #ba2636; text-decoration: none;}
#single a:hover {text-decoration: underline;}

/* 画像ボックス */
.centerBox, .leftBox, .rightBox {margin: 0 0 24px;}

/* 引用 */
#single blockquote {margin: 24px 0; padding: 16px; font-style: oblique; background-color: #f0f0f0; border: 1px solid #e3e3e3; border-radius: 4px;}
#single blockquote p:last-child {margin-bottom: 0;}
#single .main ul, #single .main ol {margin: 24px 32px; font-size: 0.9rem;}
#single small.source {display: block; margin-top: -12px; font-size: 0.7rem; text-align: right;}
#single small.source::before {content: '出典:'; margin-right: 4px; color: #999;}
#single small.source a {color: #999;}

/* 罫線入りボックス */
.borderBox {margin: 0 0 24px; padding: 8px 0 12px 24px; border-left: 4px solid #e3e3e3;}
.borderBox p:last-child {margin-bottom: 0!important;}

/* YouTube */
.forYouTube {position: relative; width: 100%; margin: 0 auto 28px; padding-top: 56.25%; border-radius: 4px;}
.forYouTube iframe {position: absolute; top: 0; right: 0; width: 100%!important; height: 100%!important;}

/* テーブル */
table {font-size: 0.9rem;}
table.stripe {width: 100%; margin-bottom: 20px; border-collapse: collapse; background: #fff;}
table.stripe tr:first-child {border-bottom: 2px solid #999;}
table.stripe tr:last-child {border-bottom: 2px solid #999;}
table.stripe tr:nth-child(even) {background: #e3e3e3;}
th,td{padding: 8px;}

/* 仕切り線 */
#single hr {margin: 0 0 30px;}

/* WordPress自動挿入対策 */
.wp-caption {width: auto!important;}
#single .wp-caption-text {font-size: 0.8rem;}

/* 記事 - シェアする
=========================== */
aside.share {position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;}
aside.share .container {display: flex; justify-content: space-around; background: #fff;}
aside.share .container>div {width: 49.5%; border: 1px solid #e3e3e3; border-radius: 4px;}
aside.share .twitter {background: #1da1f2;}
aside.share .facebook {background: #3b5998;}
aside.share i{display: block;}
aside.share i::after {content: "シェアする"; margin-left: 8px; font-size: 0.95rem;}
aside.share a {display: block; padding: 12px; color: #fff!important; text-decoration: none;}
aside.share a:hover {text-decoration: none!important;}
#noFloat {position: relative; margin: 0 20px 20px;}

@media screen and (min-width: 760px) {
  aside.share {position: relative; margin: 0 20px 20px;}
}

/* 記事 - 広告
=========================== */
#single .item {margin: 0 0 28px; padding: 16px; border: 1px solid #e3e3e3; border-radius: 4px;}
#single .item>div:last-child {padding-bottom: 0!important;}

/* いいね！しよう
============================== */
#followMe {display: flex; flex-flow: row nowrap; margin: 0 20px 28px; border: 1px solid #e3e3e3; border-radius: 4px;}
#followMe .thumbnail {flex: 0 0 40%; margin: 0;}
#followMe .thumbnail img {border: none!important;}
#followMe .info {flex: 0 0 60%; padding: 0 12px; color: #fff; background: #1d1d1d; text-align: center;}
#followMe .info p {margin: 12px 0 8px; font-size: 0.85rem; line-height: 1.2rem;}
#followMe .facebook, #followMe .twitter {padding: 8px 0;}

/* 関連コンテンツ
============================== */
.wp_rp_content {padding: 0 20px;}
.related_post {display: flex; flex-wrap: wrap; justify-content: space-between; list-style-type: none;}
.related_post img {margin-bottom: 6px; width: 100%; height: auto;}
.related_post a {color: #1d1d1d!important; font-size: 0.85rem; font-weight: bold;}
.related_post li {
  margin-bottom: 10px; padding-bottom: 10px; width: 48%;
  display: flex; flex-direction: column; box-sizing: border-box;
}