@charset "UTF-8";
/* -------------------------------------------------------
記事本文スタイル
---------------------------------------------------------- */
.article-body { padding: 30px 0 40px; }
.article-body:after { content: " "; display: block; clear: both; }
.article-body a { text-decoration: underline; }
.article-body a:hover { opacity: .7; }
.article-body p { margin-bottom: 1.5em; line-height: 28px; font-size: 16px; }
.article-body h2 { color: #ea008f; font-size: 24px; font-weight: normal; margin: .5em 0 1.5em; }
.article-body h2.color-yellow { color: #a0916c; }
.article-body h2.color-black { color: #000; }
.article-body h2.pr { font-size: 24px; color: #f13f65; border-bottom: solid 3px #fabcc9; position: relative; font-weight: bold; }
.article-body h2.pr::after { content: ""; position: absolute; display: block; width: 50%; bottom: -3px; border-bottom: solid 3px #f13f65; }
.article-body h3 { color: rgba(234, 0, 143, 0.8); font-size: 18px; font-weight: normal; margin: 2em 0 1em; }
.article-body ul { margin-left: 2em; margin-bottom: 1em; }
.article-body ol { margin-left: 2em; margin-bottom: 1em; }
.article-body blockquote { position: relative; padding: 15px 40px 10px 40px; margin: 20px auto; width: 85%; }
.article-body blockquote p { font-size: 14px; line-height: 1.5; }
.article-body blockquote::before { display: inline-block; position: absolute; top: 0; left: 0; vertical-align: middle; content: "“"; font-family: Georgia, Times New Roman, serif; color: rgba(0, 0, 0, 0.5); font-size: 60px; line-height: 1; font-weight: 900; }
.article-body blockquote::after { display: inline-block; position: absolute; bottom: 0; right: 0; vertical-align: middle; content: "”"; font-family: Georgia, Times New Roman, serif; color: rgba(0, 0, 0, 0.5); font-size: 60px; line-height: 1; font-weight: 900; }
.article-body .figure-center { margin: 20px auto; }
.article-body .figure-right { float: right; margin: 0 0 20px 20px; }
.article-body .figure-left { float: left; margin: 0 20px 20px 0; }
.article-body .image-area { max-width: 640px; }
.article-body .image-area img { width: 100%; height: auto; vertical-align: bottom; }
.article-body .image-area .caption { color: #000; font-size: 13px; padding-top: .5em; }
.article-body .image-area .caption-sub { color: #666; font-size: 14px; }
.article-body .images-2cols { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; margin: 30px 0; }
.article-body .images-2cols .image-area { width: calc((100% - 40px) / 2); }
.article-body .images-3cols { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; margin: 30px 0; }
.article-body .images-3cols .image-area { width: calc((100% - 40px) / 3); }
.article-body .article-beginning { background-color: #f0f0f0; font-size: 14px; color: #000; line-height: 1.6; padding: .8em 2em; margin: 40px 0 60px; }
.article-body .article-beginning p { font-size: 14px; line-height: 1.6; margin-bottom: 0; }
.article-body .article-explanation { border-left: 3px solid #cabd9b; padding-left: 1em; font-size: 14px; margin: 30px 0; }
.article-body .article-info { background-color: #f6f6f6; overflow: hidden; padding: 30px; }
.article-body .article-info img { float: left; margin-right: 30px; width: 120px; height: auto; }
.article-body .article-info .text { overflow: hidden; }
.article-body .article-info .text .title { font-size: 16px; margin-bottom: 1em; font-weight: bold; }
.article-body .article-info .text .lead { font-size: 16px; }
.article-body .magazine-body h2 { color: #ea008f; font-size: 24px; font-weight: bold; margin: 40px 0 1em; }
.article-body .magazine-body h3 { color: #ea008f; font-size: 24px; font-weight: normal; margin: 40px 0 1em; }
.article-body .magazine-body h4 { color: rgba(234, 0, 143, 0.8); font-size: 18px; font-weight: normal; margin: 2.5em 0 1em; }
.article-body .magazine-body ul { margin: 0; padding: 0; }
.article-body .magazine-body li { border-top: 2px dotted #dcdcdc; padding-top: 10px; margin-top: 20px; list-style: none; }
.article-body .article-btn { display: block; width: 171px; border: 1px solid #878787; border-radius: 2px; font-size: 11px; line-height: 22px; text-align: center; color: #111; margin: 20px 0; clear: both; }
.article-body .article-btn a { color: #111; display: block; text-decoration: none; }
.article-body .article-btn a:hover { opacity: .5; }
.article-body .article-btn--pink { border-color: #ea008f; color: #ea008f; }
.article-body .article-btn--pink a { color: #ea008f; }
.article-body .article-btn--bgpink { background-color: #ea008f; color: #fff; border: none; border-radius: 4px; }
.article-body .article-btn--large { border: 2px solid #ea008f; border-radius: 12px; width: 160px; display: block; padding: .3em 1em; position: relative; color: #ea008f; text-align: center; margin: 20px auto; font-size: 16px; }
.article-body .article-text--pink { color: #ea008f; }
.article-body .article-text--yellow { color: #a0916c; }
.article-body .article-text-small { font-size: 14px; }
.article-body .article-text-large { font-size: 24px; }
.article-body hr { margin: 30px 0; border-top: 1px #000 solid; }
.article-body .article-box { color: #999; font-size: 13px; padding: 20px; border: solid 1px #999; }
.article-body .article-box .title { font-weight: bold; margin-bottom: .5em; }
.article-body .ad-article-rect { clear:both; width:300px; height:auto; display:block; margin:20px auto 30px; background:#fff; text-align:center; }
.article-body .article-border { margin: 30px 0;  padding: 20px 0; border-top: 1px #ce518b solid; border-bottom: 1px #ce518b solid; }
.article-body .article-border--beige { border-color: #cc9966; }
.article-body .article-wrap { margin: 30px 0;  padding: 18px ; border: 1px solid #9dd28b; }
.article-body .article-wrap--pink { border-color: #d28bcf; }
.article-body .article-wrap-bold { margin: 30px auto;  padding: 12px; border: 2px solid #d28bcf; width: 90%; }
.article-body .article-wrap-bold--gray { border-color: #979797; }
.article-body .article-bg { margin: 30px 0; padding: 15px;  background: #fce5f2;}
.article-body .article-bg--gray { background: #f0f0f0;}
.article-body .article-bg--beige { background: #f1ede4;}
.article-body .article-btn-wrap { display: inline-block; border: solid 2px #e4007f; padding: 7px 22px 7px 10px; text-decoration: none; margin: 10px 0; border-radius: 5px; background: #fff; color: #7f7190; font-weight: bold; font-size: 14px; position: relative; line-height: 1.6; }
.article-body .article-btn-wrap a { text-decoration: none; color: #7f7190; }
.article-body .article-btn-wrap::after { right: 10px; width: 8px; height: 8px; border-top: 2px solid #7f7190; border-right: 2px solid #7f7190; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ""; position: absolute; top: 0; bottom: 0; left: auto; margin: auto; vertical-align: middle;}
.article-body .article-btn-wrap--gray,.article-btn-wrap--gray a,.article-btn-wrap--gray::after { border-color: #a8a8a8; color: #a8a8a8; }
.article-body .article-btn-wrap--beige,.article-btn-wrap--beige a,.article-btn-wrap--beige::after { border-color: #b6ae9c; color: #b6ae9c;}