@charset "utf-8";
/*
 * mem_join.css
 * 入会ページ（index.htm.jp / index.htm.en）専用コンポーネント
 * mem_index.css の後に読み込むこと（.left 等の上書きのため）
 */

/* 選択式統合ボタン共通 */
.vip-combo{
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
    background:#fff;
    border:2px solid #b59a5a;
    border-radius:6px;
    padding:14px 16px 16px;
    text-decoration:none;
    color:#333;
}
.vip-combo .combo-title{
    display:block;
    font-size:17px;
    font-weight:700;
    color:#7a5a1a;
    text-align:center;
    margin-bottom:10px;
    line-height:1.35;
}
.vip-combo .combo-title .label-tag{
    display:inline-block;
    background:#b59a5a;
    color:#fff;
    font-size:18px;
    font-weight:700;
    padding:2px 8px;
    border-radius:3px;
    margin-right:6px;
    vertical-align:middle;
}
.vip-combo .combo-opts{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:7px;
    flex:1;
    min-height:210px;
}
.vip-combo .combo-opts label{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:#f7f1e2;
    border:2px solid #d9c89a;
    border-radius:5px;
    padding:2px 10px 2px 36px;
    cursor:pointer;
    transition:all .15s ease;
    line-height:1.35;
    position:relative;
}
/* 視認用ラジオ丸 */
.vip-combo .combo-opts label::before{
    content:"";
    position:absolute;
    left:10px;
    top:50%;
    transform:translateY(-50%);
    width:18px;
    height:18px;
    border:2px solid #b59a5a;
    border-radius:50%;
    background:#fff;
    box-sizing:border-box;
}
.vip-combo .combo-opts input[type="radio"]{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.vip-combo .combo-opts input[type="radio"]:checked + label{
    background:#c3e8ac;
    border-color:#b8860b;
    box-shadow:0 0 0 2px rgba(184,134,11,.18) inset;
}
.vip-combo .combo-opts input[type="radio"]:checked + label::before{
    background:radial-gradient(#b8860b 45%, #fff 50%);
    border-color:#b8860b;
}
.vip-combo .combo-opts .price{
    display:inline;
    font-size:20px;
    font-weight:800;
    color:#0d0900;
}
.vip-combo .combo-opts .desc{
    display:block;
    font-size:16px;
    color:#555;
    margin-top:3px;
}
.vip-combo .combo-opts .pay{
    display:inline;
    font-size:19px;
    color:#555;
    margin-left:8px;
}
.card-icons{
    display:inline-flex;
    gap:4px;
    align-items:center;
    vertical-align:middle;
    margin-left:6px;
    opacity:0.3;
}
.vip-combo .combo-go{
    display:block;
    background:#b8860b;
    color:#fff;
    text-align:center;
    font-size:17px;
    font-weight:700;
    padding:12px;
    border-radius:5px;
    text-decoration:none;
    letter-spacing:.04em;
    margin-top:auto;
}
.vip-combo .combo-go:hover{ background:#9a6e00; }

/* box_base のボックス全体hover を無効化 */
.box_base.vip-combo:hover{
    background:#fff !important;
    border-color:#b59a5a !important;
    transform:none !important;
    box-shadow:none !important;
    opacity:1 !important;
}
.box_base.vip-combo.tojido:hover{
    background:#fff !important;
    border-color:#3a6fa8 !important;
}
/* 個々のラベルにhover */
.vip-combo .combo-opts label:hover{
    background:#ede5cc;
    border-color:#b59a5a;
}
.vip-combo.tojido .combo-opts label:hover{
    background:#cde0f2;
    border-color:#3a6fa8;
}

/* 都度払い用カラー（青系） */
.vip-combo.tojido{ border-color:#3a6fa8; }
.vip-combo.tojido .combo-title{ color:#1f4a7a; }
.vip-combo.tojido .combo-title .label-tag{ background:#3a6fa8; }
.vip-combo.tojido .combo-opts label{ background:#eaf2fb; border-color:#a8c4e3; }
.vip-combo.tojido .combo-opts label::before{ border-color:#3a6fa8; }
.vip-combo.tojido .combo-opts input[type="radio"]:checked + label{
    background:#ffe6f3; border-color:#1f4a7a;
    box-shadow:0 0 0 2px rgba(31,74,122,.18) inset;
}
.vip-combo.tojido .combo-opts input[type="radio"]:checked + label::before{
    background:radial-gradient(#1f4a7a 45%, #fff 50%);
    border-color:#1f4a7a;
}
.vip-combo.tojido .combo-opts .price{ color:#1f4a7a; }
.vip-combo.tojido .combo-go{ background:#3a6fa8; }
.vip-combo.tojido .combo-go:hover{ background:#27548a; }

/* ビットキャッシュ継続ボタン */
.bitcash-side{
    display:block;
    box-sizing:border-box;
    background:#f4c542;
    color:#5a3c00 !important;
    text-align:center;
    padding:13px 12px;
    border-radius:6px;
    border:2px solid #c89a1a;
    text-decoration:none;
    line-height:1.5;
}
.bitcash-side .bs-title{
    display:block;
    font-size:20px;
    font-weight:700;
    margin-bottom:6px;
}
.bitcash-side .bs-sub{
    display:block;
    font-size:16px;
    opacity:1;
}
.bitcash-side:hover{ background:#e6b730; }

/* キャンセルボタン */
.cancel-side{
    display:block;
    box-sizing:border-box;
    background:#666;
    color:#fff !important;
    text-align:center;
    padding:13px 12px;
    border-radius:6px;
    border:2px solid #4a4a4a;
    text-decoration:none;
    line-height:1.0;
}
.cancel-side .cs-title{
    display:block;
    font-size:20px;
    font-weight:700;
    margin-bottom:6px;
}
.cancel-side .cs-sub{
    display:block;
    font-size:19px;
    opacity:.9;
}
.cancel-side:hover{ background:#4a4a4a; }

/* ===== ラジオ廃止・ラベル直接クリック化 ===== */
/* 視認用ラジオ丸を非表示・左パディングを詰める */
.vip-combo .combo-opts label::before{ display:none !important; }
.vip-combo .combo-opts label{ padding-left:14px !important; }
/* 「選択した内容で入会へ進む →」ボタンを廃止（JS未動作時の保険） */
.vip-combo .combo-go{ display:none !important; }