/* 会員専用コンテンツのゲート（BONO型ロックパネル） */
.tk-gate{
    background:#eef0f3;
    background-image:
        radial-gradient(circle, rgba(150,160,180,.18) 1px, transparent 1.4px);
    background-size:22px 22px;
    border-radius:18px;
    padding:64px 24px;
    margin:8px 0 24px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:320px;
}
.tk-gate-inner{
    text-align:center;
    max-width:520px;
}
.tk-gate-icon{
    width:74px;height:74px;
    margin:0 auto 22px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 6px 20px rgba(40,60,120,.10);
    display:flex;align-items:center;justify-content:center;
    color:#2f6bff;
}
.tk-gate-title{
    font-size:22px;
    font-weight:800;
    color:#1f2733;
    letter-spacing:.02em;
    margin-bottom:10px;
}
.tk-gate-desc{
    font-size:14px;
    color:#7a828f;
    margin-bottom:26px;
}
.tk-gate-btns{
    display:flex;
    gap:14px;
    justify-content:center;
    flex-wrap:wrap;
}
.tk-gate-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 26px;
    border-radius:12px;
    font-size:15px;
    font-weight:800;
    text-decoration:none;
    transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.tk-gate-btn:hover{ transform:translateY(-1px); }
.tk-gate-login{
    background:#1b2436;
    color:#fff;
    box-shadow:0 6px 16px rgba(20,30,55,.22);
}
.tk-gate-login:hover{ background:#243049; color:#fff; }
.tk-gate-signup{
    background:#fff;
    color:#1f2733;
    border:1px solid #d7dbe2;
}
.tk-gate-signup:hover{ background:#f7f8fa; color:#1f2733; }
.tk-gate-ico-login{ font-weight:700; opacity:.85; }

@media (max-width:520px){
    .tk-gate{ padding:48px 16px; min-height:260px; }
    .tk-gate-title{ font-size:19px; }
    .tk-gate-btns{ flex-direction:column; }
    .tk-gate-btn{ justify-content:center; }
}

/* =====================================================
   TOP用ウェルカムCTA [tk_welcome_cta]（非会員にだけ表示）
   ===================================================== */
/* ミニマル：装飾を抑え、余白とタイポで見せる */
.tk-welcome{
    background:#fff;
    border:1px solid #ebedf2;
    border-radius:14px;
    padding:40px 24px 34px;
    margin:8px 0 28px;
    text-align:center;
}
.tk-welcome-title{
    font-size:19px;
    font-weight:700;
    color:#1f2733;
    letter-spacing:.06em;
    margin-bottom:10px;
}
.tk-welcome-desc{
    font-size:13px;
    color:#9098a6;
    letter-spacing:.03em;
    line-height:1.9;
    margin-bottom:26px;
}
.tk-welcome-link{
    color:#1b2436;
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:3px;
}
.tk-welcome-link:hover{ color:#4a5ab9; }
.tk-welcome-btns{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
}
.tk-welcome .tk-gate-btn{
    box-shadow:none;
    padding:13px 30px;
    border-radius:10px;
    font-weight:700;
}
.tk-welcome-note{
    margin-top:18px;
    font-size:12px;
    color:#9aa1ae;
}
.tk-welcome-note a{
    color:#1b2436;
    text-decoration:underline;
    text-underline-offset:3px;
}
@media (max-width:520px){
    .tk-welcome{ padding:30px 16px 24px; }
    .tk-welcome-title{ font-size:17px; }
    .tk-welcome-btns{ flex-direction:column; }
}

/* =====================================================
   会員専用レッスンのティーザー行（未ログイン・新方式）
   リストの「Locked」を🔒に変え、クリック可能にする
   （クリック先はレッスンページ＝プレミアムゲートのティーザー）
   [class*="lesson-list"] は lesson-list- / -side / -liner /
   single-lesson-list の全ラッパーに効く
   ===================================================== */
[class*="lesson-list"] .tk-teaser{ cursor:pointer; }
[class*="lesson-list"] .tk-teaser::before{
    content:'🔒' !important;
    font-size:18px !important;
    opacity:.85 !important;
    pointer-events:none;
    /* タイトル文字に重ならないよう右端に寄せる（元のLocked中央配置を上書き） */
    left:auto !important;
    right:16px !important;
    transform:translateY(-50%) !important;
}
[class*="lesson-list"] .tk-teaser::after{
    pointer-events:none;
    opacity:.10 !important;
}
[class*="lesson-list"] .tk-teaser:hover{
    transform:translateY(-1px);
    transition:transform .12s ease;
}