@charset "utf-8";
/*----------------------------------------------------------------------------
　KBマガジン LP専用スタイル（パーツ選定版）
　※ 使用しているパーツ（h2/h3/h4, p, ul, btn-*, table, float-wrap,
　　 toc_parts, lt_parts, coop_parts, links_parts, summary_parts）は、
　　 いずれも common.css に定義済みのため、本ファイルでは再定義していません。
　　 MV（ヒーロー）は独自の .lp_mv として作成しており、common.css・
　　 index.cssのどちらにも依存しません（TOPページ専用の .mv_home /
　　 mv_home.php / header_home.php 等は使用していません）。
　　 common.css / index.css 自体はどちらも未変更です。
-----------------------------------------------------------------------------*/

/*--------------------------------------
　TOP専用MVの非表示（テンプレート「lp用」の mv_home.php include 対策）
　※ 本ページのMVは独自の .lp_mv（下記）に置き換えたため、
　　 テンプレート側が自動出力する .mv_home（TOPページ専用・下層ページ
　　 では体裁が崩れるため使用しない）は不要です。テンプレート側で
　　 mv_home.php の include を削除できるまでの間、念のためこの
　　 ルールで非表示にしています。include を削除したら、このルールは
　　 不要になるため削除してください。
---------------------------------------*/
.wrap > .mv_home {
    display: none;
}

/*--------------------------------------
　MV（ヒーロー）
　※ 独自コンポーネント。.mv_home の見た目（ロゴ／キャッチコピー／
　　 「ウソ」「ホント」の色付きタグ／円形イラスト）に寄せていますが、
　　 マークアップ・CSSともに完全に独立しており、common.css・
　　 index.cssにもTOP専用JS（スライダー・追従バナー等）にも依存
　　 しません。下層ページのどのテンプレートに組み込んでも表示が
　　 崩れません。
---------------------------------------*/
.lp_mv {
    background: #fff;
    padding: 3rem 3rem 4rem;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.lp_mv__inner {
    max-width: 620px;
    position: relative;
    z-index: 1;
}

.lp_mv__logo {
    width: 200px;
    margin: 0 0 2rem;
}

.lp_mv__logo a {
    display: block;
}

.lp_mv__catch {
    margin: 0;
    font-size: 2.6rem;
    font-weight: bold;
    line-height: 1.5;
    color: #1a1a1a;
}

.lp_mv__tag {
    display: inline-block;
    padding: 0.2rem 1rem;
    box-sizing: border-box;
    line-height: 1.3;
}

.lp_mv__tag--lie {
    background: #5ccee6;
}

.lp_mv__tag--true {
    background: #c4e53b;
}

.lp_mv__lead {
    margin: 2rem 0 0;
    font-size: 1.5rem;
    line-height: 1.8;
}

.lp_mv__accent {
    font-weight: bold;
    color: #f0621e;
}

.lp_mv__visual {
    position: absolute;
    top: -1rem;
    right: -40px;
    width: 420px;
    height: 420px;
    box-sizing: border-box;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
    z-index: 0;
}

.lp_mv__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.l-footer-copy {
    padding: 1.5rem 0;
}

/* SP ------------------------------*/
@media screen and (max-width: 768px) {
    .lp_mv {
        padding: 2rem 1.5rem 20rem;
    }

    .lp_mv__inner {
        max-width: 100%;
    }

    .lp_mv__logo {
        width: 130px;
        margin: 0 0 1.5rem;
    }

    .lp_mv__catch {
        font-size: 1.9rem;
    }

    .lp_mv__lead {
        margin: 1.5rem 0 0;
        font-size: 1.3rem;
        line-height: 1.7;
    }

    .lp_mv__visual {
        top: auto;
        bottom: 1rem;
        right: 50%;
        transform: translateX(50%);
        width: 220px;
        height: 220px;
    }
}

/* toc_parts内の「閉じる」テキストのタップ領域（SP時のみ表示） */
.toc_parts .toc_close {
    display: none;
    margin: 2rem 0 0;
    padding: 1rem 0;
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 100px;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .toc_parts .toc_close {
        display: block;
    }
}

/*--------------------------------------
　追従CTAバー（SP専用）
　※ common.css の .fixed_bnr（サイト共通のバナー広告）とは別物のため、
　　 独自クラスとして新規作成しています。common.css は未変更です。
---------------------------------------*/
.lp_fixed_cta {
    display: none;
}

@media screen and (max-width: 768px) {
    .lp_fixed_cta {
        display: flex;
        align-items: stretch;
        gap: 0.6rem;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 0.8rem 1rem;
        box-sizing: border-box;
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
        z-index: 500;
    }

    .lp_fixed_cta .btn-web,
    .lp_fixed_cta .btn-tel {
        flex: 1;
        margin: 0;
    }

    .lp_fixed_cta .btn-web a,
    .lp_fixed_cta .btn-tel a {
        display: block;
        max-width: 100%;
        margin: 0;
        padding: 1.1rem 0.5rem;
        box-sizing: border-box;
        font-size: 1.15rem;
        line-height: 1.3;
    }

    .lp_fixed_cta .btn-web a:after {
        display: none;
    }

    /* 追従バーの高さ分、最終セクションが隠れないように余白を確保 */
    #page {
        padding-bottom: 8rem;
    }
}

/*--------------------------------------
　フック文
---------------------------------------*/
.lp_hook {
    background: #fff;
    padding: 5rem 3rem;
    box-sizing: border-box;
}

.lp_hook__inner {
    max-width: 700px;
    margin: auto;
    text-align: center;
}

.lp_hook__headline {
    font-size: 2.8rem;
    font-weight: bold;
    line-height: 1.5;
}

.lp_hook__lead {
    margin: 2rem 0 0;
    font-size: 1.5rem;
    line-height: 1.8;
    color: #595959;
}

.lp_hook__catch {
    margin: 3rem 0 0;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.6;
}

/* SP ------------------------------*/
@media screen and (max-width: 768px) {
    .lp_hook {
        padding: 3rem 1.5rem;
    }

    .lp_hook__headline {
        font-size: 2rem;
    }

    .lp_hook__lead {
        margin: 1.5rem 0 0;
        font-size: 1.4rem;
        line-height: 1.7;
    }

    .lp_hook__catch {
        margin: 2rem 0 0;
        font-size: 1.6rem;
    }
}

/*--------------------------------------
　導入（5つの問いかけ）
---------------------------------------*/
.lp_intro {
    background: #f4f3f0;
    padding: 5rem 3rem 6rem;
    box-sizing: border-box;
}

.lp_intro__inner {
    max-width: 820px;
    margin: auto;
    text-align: center;
}

.lp_intro__bubble {
    background: #c4e53b;
    max-width: 640px;
    margin: 0 auto;
    padding: 2.2rem 3rem;
    box-sizing: border-box;
    border-radius: 16px;
    position: relative;
}

.lp_intro__bubble p {
    margin: 0;
    font-size: 1.9rem;
    font-weight: bold;
    line-height: 1.6;
    color: #1a1a1a;
}

.lp_intro__bubble::before {
    content: "";
    position: absolute;
    left: 70px;
    bottom: -20px;
    border: 14px solid transparent;
    border-top-color: #c4e53b;
}

.lp_intro__bubble::after {
    content: "?";
    position: absolute;
    right: 20px;
    bottom: -54px;
    font-size: 5.5rem;
    font-weight: 900;
    line-height: 1;
    color: #fff572;
}

.lp_intro__visual {
    max-width: 220px;
    margin: 4.5rem auto 0;
}

.lp_intro__lead {
    margin: 3rem 0 0;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.6;
}

.lp_intro__num {
    display: inline-block;
    margin: 0 0.3rem;
    padding: 0.2rem 1.2rem;
    box-sizing: border-box;
    background: #fff;
    border: 2px solid #f0621e;
    border-radius: 4px;
    color: #f0621e;
    font-size: 1.3em;
    font-weight: bold;
}

.lp_intro__bottom {
    margin: 1.5rem 0 0;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.6;
}

/* SP ------------------------------*/
@media screen and (max-width: 768px) {
    .lp_intro {
        padding: 3rem 1.5rem 5rem;
    }

    .lp_intro__bubble {
        padding: 1.8rem 2rem;
    }

    .lp_intro__bubble p {
        font-size: 1.5rem;
    }

    .lp_intro__bubble::after {
        right: 10px;
        bottom: -44px;
        font-size: 4rem;
    }

    .lp_intro__visual {
        max-width: 45%;
        margin: 3.5rem auto 0;
    }

    .lp_intro__lead {
        margin: 2rem 0 0;
        font-size: 1.4rem;
    }

    .lp_intro__num {
        padding: 0.1rem 0.8rem;
    }

    .lp_intro__bottom {
        margin: 1.2rem 0 0;
        font-size: 1.6rem;
    }
}