@charset "UTF-8";
/**
 * Component: 会員限定プレビュー（さわり表示 + フェード + 会員登録誘導）
 * p-members-preview
 *
 * FLOCSS: Project layer
 * - 冒頭3行分のさわりを表示し、上から下に向けてフェードアウト
 * - 白カード等の装飾は使わずシンプルに配置
 * - ボタンは TOP の既存スタイル(c-gi-btn) を踏襲し、矢印アイコンのみ非表示にする
 */

/* ==========================================================================
   Wrapper
   ========================================================================== */
.p-members-preview {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 24px 0;
}

/* ==========================================================================
   さわり部分（3行分のフェードアウト）
   - 1行目: クリア
   - 2〜3行目: 段階的にフェード
   - 以降: 完全に非表示
   ========================================================================== */
.p-members-preview__excerpt {
    /* line-height 24px × 3行 = 72px。本文行の継続も折り込んで少し余裕を持たせる */
    max-height: 4.8em;
    overflow: hidden;
    color: #333333;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    pointer-events: none;
    user-select: none;
    /* 上から下に向けて段階的にフェード */
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 33%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 33%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(0, 0, 0, 0) 100%
    );
}

/* excerpt 内に許可された HTML（p / img / figure 等）が入る場合の調整 */
.p-members-preview .p-members-preview__excerpt p,
.p-members-preview .p-members-preview__excerpt p:not(.gi-sophia-quote__text) {
    line-height: 1.6;
    margin: 0 0 4px;
}

.p-members-preview__excerpt img,
.p-members-preview__excerpt figure,
.p-members-preview__excerpt picture {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.p-members-preview__excerpt figure {
    margin: 0 0 4px;
}

.p-members-preview__excerpt figcaption {
    font-size: 12px;
    color: #666;
    text-align: center;
}

/* ==========================================================================
   CTA カード（白背景 + 薄青枠）
   - heading 内テキスト間: 10px
   - heading と buttons の間: 24px
   ========================================================================== */
.p-members-preview__cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 32px;
    background-color: #FFFFFF;
    border: 1px solid #A6BEE0;
    border-radius: 12px;
    box-sizing: border-box;
}

.p-members-preview__cta-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* 詳細本文の .p-article-detail__body p:not(.gi-sophia-quote__text) (0,2,1) に勝つよう
   .p-members-preview .p-members-preview__cta p.xxx (0,3,1) で指定 */
.p-members-preview .p-members-preview__cta p.p-members-preview__cta-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: calc(28.8 / 20);
    color: #1E3A5F;
    margin: 0;
    text-align: center;
}

.p-members-preview .p-members-preview__cta p.p-members-preview__cta-subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: calc(24 / 14);
    color: #1E3A5F;
    margin: 0;
    text-align: center;
}

/* タイトル改行制御:
   inline-block + nowrap で各セグメントを崩せない単位とし、
   幅が足りる場合は1行、足りない場合は指定の位置（セグメント間）で改行する */
.p-members-preview__cta-title-line {
    display: inline-block;
    white-space: nowrap;
}

/* ==========================================================================
   ボタン
   - 既存の c-gi-btn / c-gi-btn--primary-outline / c-gi-btn--primary-filled
     を流用し、矢印アイコン分の右パディングと ::after を打ち消す
   ========================================================================== */
.p-members-preview__buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 13px;
}

.p-members-preview__button.c-gi-btn {
    /* 矢印アイコン分の右パディング予約を解除 */
    --c-gi-btn-icon-reserve: 0px;
    width: 246px;
    padding: 15px 24px 17px;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    box-sizing: border-box;
}

.p-members-preview__button.c-gi-btn:hover,
.p-members-preview__button.c-gi-btn:focus,
.p-members-preview__button.c-gi-btn:visited,
.p-members-preview__button.c-gi-btn:active {
    text-decoration: none;
}

.p-members-preview__button.c-gi-btn::after {
    display: none;
    content: none;
}

/* ログイン: 白地・青枠・青文字 */
.p-members-preview__button.c-gi-btn--primary-outline,
.p-members-preview__button.c-gi-btn--primary-outline:visited,
.p-members-preview__button.c-gi-btn--primary-outline:hover,
.p-members-preview__button.c-gi-btn--primary-outline:focus,
.p-members-preview__button.c-gi-btn--primary-outline:active {
    color: var(--color-primary, #2873C9);
}

/* 新規登録: 青塗り・白文字 */
.p-members-preview__button.c-gi-btn--primary-filled,
.p-members-preview__button.c-gi-btn--primary-filled:visited,
.p-members-preview__button.c-gi-btn--primary-filled:hover,
.p-members-preview__button.c-gi-btn--primary-filled:focus,
.p-members-preview__button.c-gi-btn--primary-filled:active {
    color: #FFFFFF;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media screen and (max-width: 767px) {
    .p-members-preview {
        gap: 20px;
        margin: 16px 0;
    }

    .p-members-preview__excerpt {
        max-height: 4.5em;
        font-size: 14px;
    }

    .p-members-preview__cta {
        gap: 20px;
        padding: 24px 16px;
    }

    .p-members-preview .p-members-preview__cta p.p-members-preview__cta-title {
        font-size: 16px;
        line-height: calc(24 / 16);
    }

    .p-members-preview .p-members-preview__cta p.p-members-preview__cta-subtitle {
        font-size: 13px;
        line-height: calc(20 / 13);
    }

    .p-members-preview__buttons {
        flex-direction: column;
        gap: 10px;
    }

    .p-members-preview__button.c-gi-btn {
        width: 100%;
        max-width: 320px;
        min-width: 0;
        padding: 13px 20px 15px;
        font-size: 15px;
    }
}