@charset "utf-8";
/* ============================================================
   bill.css  coolgalsonline 入会ページ専用スタイル
   ============================================================ */

/* --- リセット --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0; padding: 0;
    background: #e2e2e2;
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",
                 "メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    line-height: 1.5;
}
a { text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }

/* --- 外枠 -------------------------------------------------- */
.wrap {
    margin: 0 auto;
    max-width: 880px;                      /* 700px → 880px */
    background: #fdffef;
    border: 1px solid #1e1e1e;
}
header {
    text-align: center;
    padding: 10px 8px;
    background: #fff;
    border-bottom: 2px solid #333;
}
header h1 {
    font-size: 26px; color: #000; line-height: 1.4; margin: 0;
    text-shadow: 4px 2px 3px #a4a8bb;
}
header h2 { font-size: 21px; margin: 4px 0 0; }
header a  { color: #0044aa; }

/* --- 利用規約 --------------------------------------------- */
.Paragraph_01 {
    padding: 10px 14px;
    border-bottom: 1px solid #bbb;
    background: #fff;
}
.Paragraph_01 ul { margin: 6px 0 6px 4px; text-align: left; }
.Paragraph_01 li { font-size: 15px; line-height: 1.8; } /* 13→15px */
.Paragraph_01 p  { font-size: 15px; margin-top: 6px; }  /* 13→15px */

/* --- 規約ボタン ------------------------------------------- */
.terms-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    justify-content: center;
}
.btn-terms {
    flex: 1 1 calc(50% - 8px);
    min-width: 160px;
    display: block;
    text-align: center;
    padding: 11px 8px;
    border-radius: 6px;
    background: linear-gradient(180deg, #c7d9be 0%, #679799 100%);
    color: #4b4b4b;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.3;
}
.btn-terms:hover { opacity: .82; }

/* --- 説明テキスト ----------------------------------------- */
.Paragraph_02 { padding: 8px 14px; background: #fff; }
.Paragraph_02 p { font-size: 16px; }                    /* 14→16px */

/* --- BitCashリンク ----------------------------------------- */
.bitcash-link {
    display: block;
    text-align: center;
    padding: 8px;
    margin: 6px auto;
    width: 97%;
    background: #fff8e1;
    border: 1px solid #aaa;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    color: #003366;
}
.bitcash-link:hover { background: #fff3c0; }

/* --- プランヘッダー --------------------------------------- */
.plan-header {
    background: #1a3a6a;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    padding: 6px 8px;
    margin: 10px auto 0;
    width: 97%;
    border-radius: 4px 4px 0 0;
}

/* --- ボタングリッド --------------------------------------- */
.plan-box {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    background: #fff;
    border: 1px solid #888;
    border-top: none;
    width: 97%;
    margin: 0 auto 6px;
    border-radius: 0 0 4px 4px;
}
.plan-box > * { flex: 1 1 calc(50% - 8px); min-width: 140px; }

/* --- ボタン共通 ------------------------------------------- */
.btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 74px;
    padding: 10px 8px;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.3;
    transition: opacity .15s;
    color: inherit;
}
.btn:hover { opacity: .82; }
.btn .sub {
    display: block;
    font-size: 18px;                       /* 14→18px */
    font-weight: normal;
    margin-top: 5px;
    line-height: 1.5;
}

/* 通常継続（グレー紫） */
.btn-std {
    background: linear-gradient(180deg, #8a6aa0 0%, #5c3d7a 100%);
    color: #fff;
}
.btn-std .sub { color: #e8d8ff; }

/* プレミアム継続（ピンク） */
.btn-rebill {
    background: linear-gradient(180deg, #f7caff 0%, #dfa0ef 100%);
    color: #000;
}
.btn-rebill .sub { color: #444; }

/* 都度 30日（シルバーブルー） */
.btn-onetime {
    background: linear-gradient(180deg, #d5dae9 0%, #a0a9c3 100%);
    color: #000;
}
.btn-onetime .sub { color: #222; }

/* 都度 120日（ネイビー） */
.btn-onetime120 {
    background: linear-gradient(180deg, #1c5490 0%, #0c2e58 100%);
    color: #fcfdb0;
}
.btn-onetime120 .sub { color: #cce4ff; }

/* --- 退会リンク ------------------------------------------- */
.cancel-wrap {
    text-align: center;
    padding: 6px;
    width: 97%;
    margin: 0 auto 6px;
    background: #f5f5f5;
    border: 1px solid #aaa;
    border-radius: 4px;
}
.btn-cancel {
    display: inline-block;
    background: linear-gradient(180deg, #888 0%, #555 100%);
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    padding: 7px 28px;
    border-radius: 5px;
}
.btn-cancel:hover { opacity: .8; }

/* --- プレミアム追加ログイン ------------------------------- */
.Paragraph_05 {
    padding: 8px 14px;
    width: 97%;
    margin: 6px auto;
    border: 1px solid #555;
    background: #fff;
    text-align: center;
    border-radius: 4px;
}
.Paragraph_05 p { font-size: 15px; margin-top: 5px; }   /* 13→15px */
.premium a {
    display: block;
    width: 80%;
    margin: 0 auto;
    padding: 10px 6px;
    border-radius: 6px;
    background: linear-gradient(180deg, #3d3232 0%, #000 50%, #717476 100%);
    text-align: center;
}
.premium a:hover { opacity: .82; }
.premium .span_01 {
    display: block;
    color: #ffe000;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.5;
    text-shadow: 1px 2px 3px #000;
}

/* --- VIPセクション ---------------------------------------- */
.Paragraph_08 {
    padding: 12px 14px;
    text-align: center;
    border-top: 1px solid #ccc;
}
.Paragraph_08 h3 { font-size: 17px; font-weight: bold; margin-bottom: 6px; }
.Paragraph_08 p  { font-size: 15px; margin-bottom: 4px; } /* 13→15px */
.Paragraph_08 img { display: block; margin: 6px auto; }
.Paragraph_08 > a {
    display: block;
    width: 220px;
    line-height: 48px;
    color: #ffff00;
    font-size: 30px;
    margin: 4px auto;
    background: linear-gradient(180deg, #717 0%, #444 44%, #222 58%, #1e1e1e 100%);
    border-radius: 5px;
    text-align: center;
    text-shadow: 0 2px 2px #555;
}
.Paragraph_08 > a:hover { opacity: .8; }

/* --- PW再取得 --------------------------------------------- */
.Paragraph_09 { padding: 12px 14px; text-align: center; }
.Paragraph_09 p { font-size: 16px; margin-bottom: 6px; }          /* 14→16px */
.Paragraph_09 p:first-child { font-weight: bold; font-size: 17px; } /* 15→17px */

/* --- サンプル --------------------------------------------- */
.Paragraph_10 {
    background: #ccff99;
    padding: 10px 14px;
    border-top: 1px solid #999;
    text-align: center;
}
.Paragraph_10 .info p { font-size: 15px; }               /* 13→15px */
.Paragraph_10 .info p:first-child { font-weight: bold; margin-bottom: 4px; }
.info_img {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.info_img a   { display: block; font-size: 14px; text-align: center; color: #000; } /* 12→14px */
.info_img img { display: block; margin: 0 auto; }

/* ============================================================
   レスポンシブ（スマホ）
   ============================================================ */
@media (max-width: 480px) {
    .wrap       { max-width: 100%; }
    header h1   { font-size: 20px; }
    .plan-box > * { flex: 1 1 100%; }
    .btn        { font-size: 15px; min-height: 60px; }
    .btn .sub   { font-size: 13px; }
    .premium a  { width: 95%; }
    .btn-cancel { padding: 8px 0; width: 80%; display: block; }
    .Paragraph_08 > a { width: 90%; }
    .terms-links .btn-terms { flex: 1 1 100%; }
}