@charset "Shift_JIS";
/* ご支援　共通 */
p { line-height: 150%; }
p a { line-height: 100%; }

h1 { white-space: nowrap; padding: 5px; margin: 0px; }
h1:before, h1:after { content: ""; }
.h1-title { display: grid; grid-template-columns: 1fr min-content 1fr; column-gap: 30px; margin: 50px 0px; }
    .g-left { border-radius: 20px 0px 0px 20px; background: linear-gradient(to right, var(--main-blue), 10%, var(--main-purple), 60%, var(--main-pink), 90%, #ffffff); }
    .g-right { border-radius: 0px 20px 20px 0px; background: linear-gradient(to left, var(--main-blue), 10%, var(--main-purple), 60%, var(--main-pink), 90%, #ffffff); }
h2 { margin-top: 100px; }
h3 { margin: 3px 0px 0px 5px; }
h3:before { content: "〇\A"; color: var(--main-purple); }
h3:after { content: "\A〇"; color: var(--main-purple); }
h4 { margin-top: 30px; }
h4:first-letter { color: var(--main-purple); font-size: 1.25rem; }



.top-info { border: 1px solid #000000; padding: 10px; margin: 50px; }
.top-info p { line-height: 120%; margin: 5px 0px; }

.support-content { margin: 5px 10px 50px; }
.caution { font-size: 0.75rem; text-indent: 1em; margin: 20px 0px 30px; }
.caution span { color: #ff0000; }

.support-content .codoc-support .codoc-support-title { color: #000000; font-weight: normal; }
.support-content .codoc-support { background-color: #ffffff; border: solid 1px #000000; }
.support-content .codoc-support .codoc-btn { color: var(--main-pink) !important; font-weight: normal; border: solid 1px var(--main-pink); }
.support-content .codoc-support .codoc-btn:hover { color: var(--main-purple) !important; background-color: var(--main-purple-pale); border-color: var(--main-purple); }


.amazon-link { display: grid; grid-template-columns: min-content 1fr; row-gap: 10px; margin: 30px 5px 5px 2em; }
.amazon-link a { white-space: nowrap; border: 1px solid var(--main-pink); padding: 5px; }
.amazon-link a:hover { border-color: var(--main-purple); }


/* ---------------------------------------------------------------------------------------------------- */
/* スマホ対応用 */
@media (max-width: 480px) {
    .top-info { margin: 50px 10px; }
    
    .subsc-grid { grid-template-columns: 1fr; }
    
    .amazon-link { grid-template-columns: 1fr; margin: 30px; }
    .amazon-link div { display: none; }
    .amazon-link a { white-space: normal; text-align: center; }
}
/* ---------------------------------------------------------------------------------------------------- */