@charset "Shift_JIS";
/* 有料記事　共通 */
h1:before, h1:after { color: var(--main-blue); }


.top-guid { line-height: 150%; }
.guid-detail { display: grid; grid-template-columns: min-content 1fr; column-gap: 10px; padding: 10px; margin: 10px 50px; }
.guid-detail div:nth-child(2n+1) { white-space: nowrap; }
.guid-detail-empty { height: 10px; }

.back-link { font-size: 0.75rem; text-align: center; border-top: 1px solid #000000; border-bottom: 1px solid #000000;
    margin: 100px 0px 3px; }
.back-link a { margin: 5px 10px; }


.subscription-table-button { cursor: pointer; line-height: 1; margin: 10px 30px; }
#subscription-table { display: none; margin: 0px 50px; }
#subscription-table table { border-collapse: collapse; line-height: 1; text-align: center; border: 1px solid #000000; }
#subscription-table td { border: 1px solid #000000; padding: 5px; }
.st-top { font-size: 0.75rem; }
.st-left { text-align: left; }
.st-OK { color: var(--main-blue); font-weight: bold; }
.st-NG { font-size: 0.5rem; }
.st-text { display: grid; grid-template-columns: min-content 1fr; color: var(--main-gray); font-size: 0.75rem; line-height: 120%;
    column-gap: 10px; row-gap: 5px; border: 1px solid var(--main-gray); padding: 5px; margin: 5px 10px; }
.st-text div:nth-child(2n+1) { white-space: nowrap; }

.guid-codoc { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 5px; row-gap: 5px; font-size: 0.75rem; line-height: 1;
    border: 1px solid #000000; padding: 0px 5px 5px; margin: 5px 50px 0px; }
.guid-codoc-title { grid-column: 1 / 6; text-align: center; border-bottom: 1px solid #000000; padding: 3px; }
.guid-codoc-empty { display: none; }

.guid-codoc .codoc-siteSubscription-subscription a:hover { background-color: transparent; }
.guid-codoc .codoc-siteSubscription-subscription .codoc-info .codoc-title a { font-size: 1rem; font-weight: normal; }
.guid-codoc .codoc-siteSubscription-subscription .codoc-info .codoc-title a:hover { color: var(--main-blue); }
.guid-codoc .codoc-siteSubscription-subscription .codoc-info .codoc-btn-disable { color: #ffffff !important; border-color: transparent; }
.guid-codoc .codoc-siteSubscription-subscription .codoc-info .codoc-btn-disable:hover { color: #ffffff !important; border-color: transparent; }
.guid-codoc .codoc-discription { display: none; }
.guid-codoc .codoc-entry .codoc-btn { color: var(--main-blue) !important; font-weight: normal; background-color: #ffffff; border: solid 1px var(--main-blue); }
.guid-codoc .codoc-entry .codoc-btn:hover { color: #ffffff !important; background-color: var(--main-blue); }

.guid-fanbox { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 10px; row-gap: 10px; font-size: 0.75rem; line-height: 1;
    border: 1px solid #000000; padding: 0px 10px 5px; margin: 5px 50px 100px; }
.guid-fanbox-title { grid-column: 1 / 4; text-align: center; border-bottom: 1px solid #000000; padding: 3px; }
.fanbox-img { background-repeat: no-repeat; background-position: center; padding-top: 66.6%; width: 100%; }
.fanbox-price { text-align: right; margin-top: 5px; }
.fanbox-title { font-size: 1rem; }
.fanbox1 .fanbox-img { background-image: url("img_subscription1.png"); background-size: contain; }
.fanbox2 .fanbox-img { background-image: url("img_subscription2.png"); background-size: contain; }
.fanbox3 .fanbox-img { background-image: url("img_subscription3.png"); background-size: contain; }
.guid-fanbox-buy { grid-column: 1 / 4; color: var(--main-blue); font-size: 1rem; text-align: center; border-radius:6px;
    border: solid 1px var(--main-blue); padding: 15px; }
.guid-fanbox-buy:hover { color: #ffffff; background-color: var(--main-blue); }


.up-date { margin: 0px 50px 100px; }
.up-date-title { font-size: 0.75rem; margin-bottom: 3px; }
.up-date-main { border: 1px solid #000000; }
.up-date-main iframe { width: 100%; height: calc(0.75rem * 1.8 * 5); }
.up-date-main div { text-align: center; padding: 30px 0px }


.article-content { display: grid; grid-template-columns: 1fr; row-gap: 10px; margin: 10px 10px 100px; }
.article-content a { display: block; border-bottom: 1px solid var(--main-pink); }
.article-content a:hover { color: var(--main-purple); background-color: transparent; border-color: var(--main-purple); }

.article-first { margin: 10px 10px 50px; }
.article-first-title { border-bottom: 1px solid var(--main-pink); padding: 3px; }
.article-first-title span { font-size: 0.75rem; margin-left: 2em; }
.article-first-content { margin: 5px 10px 50px; }
.article-first-content a { color: var(--main-pink); text-align: center; border: 1px solid var(--main-pink); }
.article-first-content a:hover { color: var(--main-purple); border-color: var(--main-purple); }
.article-first-content.one-complet { display: grid; grid-template-columns: 150px 150px; column-gap: 100px; row-gap: 10px; }
.article-first-content.multiple { display: grid; grid-template-columns: min-content 1fr; column-gap: 10px; row-gap: 10px;
    align-items: center; }
.article-first-content.multiple { margin: 5px 0px 50px 10px; }
.article-first-content.multiple div:nth-child(2n+1) { white-space: nowrap; }
.article-first-content.multiple a { margin: 2px; }
.article-first-content.multiple.no-complet { grid-template-columns: min-content 150px 150px; row-gap: 5px; }
.article-first-content.multiple.no-complet div { white-space: nowrap; }


/* ---------------------------------------------------------------------------------------------------- */
/* スマホ対応用 */
@media (max-width: 480px) {
    .top-guid { margin: 0px 10px 30px; }
    
    .guid-detail { margin: 10px; }
    
    #subscription-table { margin: 0px 10px; }
    
    .guid-codoc { grid-template-columns: 1fr 1fr; margin: 5px 10px 0px; }
    .guid-codoc-title { grid-column: 1 / 3; }
    .guid-codoc-empty { display: inline; }
    .guid-fanbox { margin: 5px 10px 0px; }
    
    .up-date { margin: 0px 20px 100px; }
    
    .article-first-content { margin: 5px 30px 30px; }
    .article-first-content.one-complet { grid-template-columns: 1fr; }
    .article-first-content.multiple.no-complet { grid-template-columns: 1fr; margin: 5px 30px 30px; }
    .article-first-content.multiple.no-complet div { text-align: center; margin-top: 10px; }
}
/* ---------------------------------------------------------------------------------------------------- */