@charset "UTF-8";
/*
theme Name: 藤仁館
Description: tojinkan
version： 1.0.0
*/

/* --- 全体リセット・共通レイアウト --- */
.wp-lp-container {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
    line-height: 1.6;
    background: #fff;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
.wp-lp-container * { box-sizing: border-box; }
.wp-lp-container img { max-width: 100%; height: auto; display: block; margin: 0 auto; }


/* --- LP用のベースインナー幅設定 --- */
.lp-inner {
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/* 全幅にしないセクション */
.lp-strengths,
.lp-points-diff,
.lp-voices,
.lp-faq {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

/* 全幅セクション */
.lp-kv,
.lp-exams,
.lp-middle-banner,
.lp-cta-bottom {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /*padding: 0 !important;*/
    overflow: hidden !important;
}

/* 全幅にしたセクションの「中身」を中央寄せ */
.lp-strengths,
.lp-points-diff,
.lp-voices,
.lp-faq,
.lp-exams__grid,
.lp-middle-banner__content,
.cta-box,
.line-box {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.lp-kv img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- 装飾タイトル見出し --- */
.lp-title-deco {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #0c73ba;
    position: relative;
    padding: 20px 40px;
    margin: 0 auto 40px;
    max-width: 845px;

    background-image: linear-gradient(to right, #9fcdec 25%, transparent 25%), /* 上の線 */
                      linear-gradient(to right, #9fcdec 25%, transparent 25%); /* 下の線 */
    
    /* ドットの「太さ」と「間隔（ピッチ）」の指定 */
    /* 前の数値（2px）が太さ、後ろの数値（8px）が間隔のペース */
    background-size: 8px 2px,  /* 上の線 */
                     8px 2px,  /* 下の線 */
                     2px 8px,  /* 左の線 */
                     2px 8px;  /* 右の線 */
                     
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

/* 4隅のL字：背景グラデーションの仕組みを使って、上下に分離したL字を描く */
.lp-title-deco::before, 
.lp-title-deco::after {
    content: '';
    position: absolute;
    /* 位置を枠線の外側に少しはみ出させる調整 */
    top: -4px;
    bottom: -4px;
    width: 16px; /* L字の横線の長さ */
    
    /* 5pxの太さの線を、上端と下端だけに配置する設定（中央は透明） */
    background-image: 
        linear-gradient(#0c73ba, #0c73ba), /* 上の横線用 */
        linear-gradient(#0c73ba, #0c73ba); /* 下の横線用 */
    background-repeat: no-repeat;
    background-size: 100% 5px;             /* 横幅100%、厚み5px */
    background-position: top, bottom;      /* 上端と下端にそれぞれ配置 */
}

/* 【左側】の上と下のL字 */
.lp-title-deco::before {
    left: -6px;
    /* 左側に5pxの縦線を2つのパーツに分けて描く（中央に隙間を空ける） */
    background-image: 
        linear-gradient(#0c73ba, #0c73ba), /* 上の横線 */
        linear-gradient(#0c73ba, #0c73ba), /* 下の横線 */
        linear-gradient(#0c73ba, #0c73ba), /* 左上の縦線 */
        linear-gradient(#0c73ba, #0c73ba); /* 左下の縦線 */
    background-size: 
        100% 5px,   /* 上横線 */
        100% 5px,   /* 下横線 */
        5px 16px,   /* 左上縦線（長さ16px） */
        5px 16px;   /* 左下縦線（長さ16px） */
    background-position: 
        top left, 
        bottom left, 
        top left, 
        bottom left;
}

/* 【右側】の上と下のL字 */
.lp-title-deco::after {
    right: -6px;
    /* 右側に5pxの縦線を2つのパーツに分けて描く（中央に隙間を空ける） */
    background-image: 
        linear-gradient(#0c73ba, #0c73ba), /* 上の横線 */
        linear-gradient(#0c73ba, #0c73ba), /* 下の横線 */
        linear-gradient(#0c73ba, #0c73ba), /* 右上の縦線 */
        linear-gradient(#0c73ba, #0c73ba); /* 右下の縦線 */
    background-size: 
        100% 5px,   /* 上横線 */
        100% 5px,   /* 下横線 */
        5px 16px,   /* 右上縦線（長さ16px） */
        5px 16px;   /* 右下縦線（長さ16px） */
    background-position: 
        top right, 
        bottom right, 
        top right, 
        bottom right;
}

@media (max-width: 768px) {
    .lp-title-deco {
        font-size: 20px;
    }
}


/* --- CVボタン共通レイアウト --- */
.lp-cv-area {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 60px 20px;
    background: #fff;
}
.lp-cv-button-wrap {
    text-align: center;
}
.lp-cv-lead {
    font-size: 14px;
    color: #333;
    margin: 0 0 10px 0;
    font-weight: normal;
    display: flex;
    justify-content: center;
    align-items: center;
}

a.lp-btn, .lp-btn { 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    text-decoration: none !important; 
    font-weight: bold !important; 
    font-size: 16px !important; 
    color: #333 !important; 
    padding: 6px 15px 6px 55px !important; 
    border-radius: 50px !important; 
    width: 400px !important; 
    height: 54px !important; 
    box-shadow: 0 4px 0 rgba(0,0,0,0.15) !important; 
    transition: transform 0.2s !important; 
    position: relative !important; 
    border: none !important; 
    margin: 0 auto !important; 
    background-image: none !important; 
}
a.lp-btn:hover, .lp-btn:hover { transform: translateY(2px) !important; box-shadow: 0 2px 0 rgba(0,0,0,0.15) !important; }

.lp-btn .lp-btn-icon { 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    width: 36px !important; 
    height: 36px !important; 
    background-color: #ffffff !important; 
    background: #ffffff !important; 
    border-radius: 50% !important; 
    position: absolute !important; 
    left: 8px !important; 
    top: 50% !important; 
    transform: translateY(-50%) !important; 
    visibility: visible !important; 
    opacity: 1 !important; 
}
.lp-btn .lp-btn-icon::after { content: '' !important; display: block !important; width: 0 !important; height: 0 !important; border-style: solid !important; border-width: 6px 0 6px 10px !important; background: transparent !important; margin-left: 2px !important; border-color: transparent transparent transparent transparent !important; }

.lp-btn .lp-btn-text { flex: 1 !important; text-align: center !important; display: block !important; margin: 0 !important; padding: 0 !important; color: #333 !important; text-decoration: none !important; }

.lp-btn--yellow { background: #d9e021 !important; background-color: #d9e021 !important; }
.lp-btn--yellow .lp-btn-icon::after { border-left-color: #d9e021 !important; }
.lp-btn--orange { background: #f7931e !important; background-color: #f7931e !important; }
.lp-btn--orange .lp-btn-icon::after { border-left-color: #f7931e !important; }

/* 中間バナー・最下部用バリエーション（文字白・アイコンなし対応） */
.lp-btn--pink { background: #e54d8c !important; width: 400px !important; }
.lp-btn--pink .lp-btn-text { color: #fff !important; padding: 0 !important; }
.lp-btn--green-line { background: #2cb432 !important; width: 450px !important; }
.lp-btn--green-line .lp-btn-text { color: #fff !important; padding: 0 !important; }

/* ==========================================================================
   3. 選ばれる5つの理由＆3つのポイント
   ========================================================================== */
.lp-strengths {
    padding: 0 20px;
    background: #fff;
}
.lp-strengths__grid {
    display: grid;
    gap: 30px;
    margin-bottom: 40px;
}
.lp-strengths__grid.top-strengths {
    grid-template-columns: repeat(3, 1fr);
}
.lp-strengths__grid.bottom-strengths {
    grid-template-columns: repeat(2, 1fr);
    max-width: 760px; 
    margin: 0 auto;
}

/* 1つ1つのアイテムの縦並び */
.lp-strength-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 青い長方形ブロック */
.lp-strength-block {
    display: flex;
    align-items: center;
    background: #0073bb;
    padding: 15px 20px;
    border-radius: 4px;
    width: 100%;
    min-height: 80px;
    position: relative;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* ブロック下部の中央にある下矢印（三角形） */
.lp-strength-block::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #0073bb transparent transparent transparent;
}

/* 白枠の数字 */
.lp-strength-num {
    font-size: 26px;
    font-weight: bold;
    color: #0073bb;
    background: #fff;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-right: 15px;
    flex-shrink: 0;
}

/* ブロック内の白文字タイトル */
.lp-strength-block h3 {
    font-size: 16px;
    font-weight: bold;
    color: #fff !important;
    margin: 0;
    padding: 0;
    line-height: 1.4;
    text-align: left;
    border: none;
    background: none;
}

/* 外側の下部テキスト */
.lp-strength-desc {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    margin: 25px 0 0 0;
    max-width: 90%;
    text-align: left;
}


/* ==========================================================================
   模擬試験はここが違う！エリア
   ========================================================================== */
.lp-points-diff {
    background: #fff;
    padding: 60px 0;
}

/* 黄色の波線見出し（ウエーブ） */
.lp-title-wave {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: #000;
    margin: 0 0 50px 0;
    position: relative;
    padding-bottom: 20px;
}
/* CSSで簡易的な波線を描写 */
.lp-title-wave::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 12px;
    background-image: radial-gradient(circle at 50% 120%, transparent 4px, #ffde00 4px, #ffde00 6px, transparent 6px);
    background-size: 16px 12px;
    background-repeat: repeat-x;
}

/* 細い青枠の3カラムカード */
.lp-diff-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}
.lp-diff-card {
    border: 1px solid #4a90e2;
    border-radius: 0; 
    background: #fff;
    padding: 35px 20px 25px;
    text-align: center;
    box-shadow: none;
    position: relative;
}

/* 上部の青いPOINTテキスト */
.lp-diff-card__badge {
    font-size: 18px;
    font-weight: bold;
    color: #4a90e2;
    letter-spacing: 0.05em;
    
    /* 位置を上枠線の真上に絶対配置 */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%); 
    margin: 0;
    
    /* 枠線を消す（重なった部分を隠す）ために背景を白にし、左右に余白を作る */
    background: #fff;
    padding: 0 15px;
    white-space: nowrap;
}

.lp-diff-card__title {
    margin: 15px 0 20px 0;
    line-height: 1.6;
}

/* 黄色の蛍光ペンマーカー風スタイル */
.lp-marker {
    background: #ffef7f;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    display: inline;
    padding: 2px 4px;
}

/* カード内の説明文（左寄せ・14px） */
.lp-diff-card p {
    font-size: 14px;
    color: #333;
    margin: 0;
    text-align: left;
    line-height: 1.7; 
}

/* 注記のスタイル */
.lp-diff-card .note {
    font-size: 11px;
    margin-top: 15px;
    color:#666;
}

@media (max-width: 768px) {
    .lp-strengths__grid.top-strengths,
    .lp-strengths__grid.bottom-strengths,
    .lp-diff-grid {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        gap: 40px;
    }
    .lp-strength-block {
        max-width: 340px;
        margin: 0 auto;
    }
    .lp-strength-desc {
        margin: 20px 0 0 0;
        max-width: 340px;
    }
    .lp-diff-card {
        max-width: 400px;
        margin: 0 20px;
    }
}


/* ==========================================================================
   試験カード（カウントダウン）エリア
   ========================================================================== */
.lp-exams { 
    background: #fafbfd; 
    background-image: 
        linear-gradient(#e4ebf4 1px, transparent 1px), 
        linear-gradient(90deg, #e4ebf4 1px, transparent 1px); 
    background-size: 24px 24px; 
    padding: 60px 20px;
}
.lp-exams__grid { 
    display: grid; 
    gap: 50px 30px;
    margin-bottom: 40px; 
}
.lp-exams__grid.top-grid { 
    grid-template-columns: repeat(3, 1fr); 
}
.lp-exams__grid.bottom-grid { 
    grid-template-columns: repeat(2, 1fr); 
    max-width: 780px; 
    margin: 0 auto; 
}

/* --- カード本体の共通設定 --- */
.lp-exam-card { 
    position: relative;
    padding-top: 25px;
    background-repeat: no-repeat;
    background-size: 100% auto; 
    background-position: center top;
}

/* メインのカラフルなカード本体 */
.lp-exam-card .card-body { 
    padding: 25px 20px; 
    border-radius: 12px;
    text-align: center;
    position: relative;
    z-index: 4;
}

/* 一番手前のメインのカラータグ（共通の基本位置と装飾） */
.lp-exam-card .card-tag { 
    position: absolute;
    top: -2px;
    color: #fff; 
    font-weight: bold; 
    padding: 4px 16px; 
    font-size: 13px; 
    border-radius: 8px 8px 0 0;
    z-index: 5;
    white-space: nowrap;
}

/* --- カード内部のスタイル（共通） --- */
.lp-exam-card .exam-name { font-size: 18px; font-weight: bold; color: #fff; margin: 0; line-height: 1.4; min-height: 50px; display: flex; align-items: center; justify-content: center; }
.lp-exam-card .js-lp-countdown { background: transparent; padding: 0; margin: 0 0 15px 0; border-radius: 0; }
.lp-exam-card .counter-text { font-size: 16px; font-weight: bold; color: #fffb00; margin: 0; }
.lp-exam-card .days-count { font-size: 42px; font-weight: bold; color: #fffb00; margin: 0 2px; }
.lp-exam-card .exam-details { color: #fff; font-size: 14px; line-height: 1.6; font-weight: bold;}
.lp-exam-card .exam-round { font-size: 15px; margin: 0; font-weight: bold;}
.lp-exam-card .exam-target { font-size: 14px; margin: 0 0 15px 0; min-height: 45px; font-weight: bold;}

/* 実施日を挟む点線 */
.lp-exam-card .exam-date-line { border-top: 1px dotted rgba(255,255,255,0.6); margin: 0; position: relative; text-align: center; }
.lp-exam-card .exam-date-line span { padding: 0 10px; font-size: 12px; position: relative; top: -10px; }
.color-cyan .exam-date-line span { background: #4bc3ff; }
.color-yellow .exam-date-line span { background: #fcae3c; }
.color-blue .exam-date-line span { background: #3572e6; }
.color-green .exam-date-line span { background: #60a63b; }
.color-pink .exam-date-line span { background: #fc92c4; }

.lp-exam-card .exam-date-value { font-size: 18px; font-weight: bold; margin: 0 0 20px 0; }

/* ボタン */
.lp-exam-card .card-link-btn { display: flex; align-items: center; justify-content: space-between; background: #fff; text-decoration: none; padding: 10px 10px 10px 18px; border-radius: 30px; transition: transform 0.2s, box-shadow 0.2s; border: none; width: 100%; }
.lp-exam-card .card-link-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.lp-exam-card .card-link-text { font-size: 13px; font-weight: bold; margin: 0; }
.lp-exam-card .card-link-arrow { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; }
.lp-exam-card .card-link-arrow::after { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff; margin-left: 2px; }


/* 1. LINEUP 01: 水色 */
.color-cyan { 
    background-image: url("/wp-content/themes/tojinkan/assetes/images/pages/practice-test_lp/lineup01_bkimg.svg"); 
}
.color-cyan .card-body { background: #4bc3ff; }
.color-cyan .card-tag { 
    background: #4bc3ff; 
    left: 8px;
}
.color-cyan .card-link-text { color: #2293cc; }
.color-cyan .card-link-arrow { background: #4bc3ff; }

/* 2. LINEUP 02: オレンジ */
.color-yellow { 
    background-image: url("/wp-content/themes/tojinkan/assetes/images/pages/practice-test_lp/lineup02_bkimg.svg"); 
}
.color-yellow .card-body { background: #fcae3c; }
.color-yellow .card-tag { 
    background: #fcae3c; 
    left: 45px;
}
.color-yellow .card-link-text { color: #cd7d0b; }
.color-yellow .card-link-arrow { background: #fcae3c; }

/* 3. LINEUP 03: ブルー */
.color-blue { 
    background-image: url("/wp-content/themes/tojinkan/assetes/images/pages/practice-test_lp/lineup03_bkimg.svg"); 
}
.color-blue .card-body { background: #3572e6; }
.color-blue .card-tag { 
    background: #3572e6; 
    left: 100px; 
}
.color-blue .card-link-text { color: #235cc9; }
.color-blue .card-link-arrow { background: #3572e6; }

/* 5. LINEUP 04: グリーン */
.color-green {
    background-image: url("/wp-content/themes/tojinkan/assetes/images/pages/practice-test_lp/lineup04_bkimg.svg"); 
}
.color-green .card-body { background: #60a63b; }
.color-green .card-tag { 
    background: #60a63b; 
    left: 165px; 
}
.color-green .card-link-text { color: #4e8c2c; }
.color-green .card-link-arrow { background: #60a63b; }

/* 5. LINEUP 05: ピンク */
.color-pink { 
    background-image: url("/wp-content/themes/tojinkan/assetes/images/pages/practice-test_lp/lineup05_bkimg.svg"); 
}
.color-pink .card-body { background: #fc92c4; }
.color-pink .card-tag { 
    background: #fc92c4; 
    left: 200px; 
}
.color-pink .card-link-text { color: #e376a9; }
.color-pink .card-link-arrow { background: #fc92c4; }

/* スマホ */
@media (max-width: 768px) {
    .lp-exams__grid.top-grid, .lp-exams__grid.bottom-grid { grid-template-columns: 1fr; max-width: 100%; gap: 50px; }
    .lp-exam-card { max-width: 360px; margin: 0 auto; }

    /* 1. LINEUP 01: 水色 */
    .color-cyan .card-tag { 
        left: 5px;
    }
    /* 2. LINEUP 02: オレンジ */
    .color-yellow .card-tag { 
        left: 30px;
    }
    /* 3. LINEUP 03: ブルー */
    .color-blue .card-tag { 
        left: 80px; 
    }
    /* 5. LINEUP 04: グリーン */
    .color-green .card-tag { 
        left: 115px; 
    }
    /* 5. LINEUP 05: ピンク */
    .color-pink .card-tag { 
        left: 150px; 
    }

}


/* ==========================================================================
   合格者の声エリア
   ========================================================================== */
.lp-voices {
    background: #fff;
    padding: 60px 20px;
}
.lp-voices__grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 80px 40px; 
}

/* カード1ブロックのラッパー */
.lp-voice-card {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* --- 吹き出し本体 --- */
.lp-bubble { 
    position: relative;
    background: #fff; 
    
    /* 吹き出しの枠線を「左・右・下」だけにして上辺を消去 */
    border-left: 1px solid #1f50a2 !important;
    border-right: 1px solid #1f50a2 !important;
    border-bottom: 1px solid #1f50a2 !important;
    border-top: none !important;
    
    padding: 30px 25px; 
    
    /* テーマの overflow: hidden 対策 */
    box-shadow: 9px 9px 0 0 #227bc5 !important;
}

/* 吹き出し内の文章スタイル */
.lp-bubble p {
    font-size: 14px;
    color: #000;
    line-height: 1.7;
    text-align: left;
    margin: 0;
    font-weight: normal;
}

/* ツノの背景にある「青い影のツノ」 */
.lp-bubble::before {
    content: '' !important;
    position: absolute !important;
    bottom: -25px !important;
    left: 164px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 24px 22px 0 0 !important;
    border-color: #227bc5 transparent transparent transparent !important;
    display: block !important;
    z-index: 1 !important;
}

/* 前面にある「白＋紺の枠線付きツノ」 */
.lp-bubble::after {
    content: '' !important;
    position: absolute !important;
    bottom: -24px !important;
    left: 165px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 24px 20px 0 0 !important;
    border-color: #fff transparent transparent transparent !important;
    display: block !important;
    z-index: 3 !important;
    filter: drop-shadow(1px 0px 0px #1f50a2);
}

/* --- 下部のユーザー情報エリア --- */
.lp-user-info {
    display: block !important; 
    position: relative !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

/* --- 画像アイコンの配置 --- */
.lp-user-icon { 
    width: 90px !important;
    height: 90px !important;
    position: absolute !important;
    top: -20px !important;
    left: 40px !important;
    z-index: 5 !important;
}
.lp-user-icon img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: contain !important;
}

/* --- 右側の名前・資格テキスト --- */
.lp-user-name { 
    font-size: 14px !important; 
    font-weight: bold !important; 
    color: #000 !important;
    text-align: left !important;
    margin: 0 !important;
    padding-top: 30px !important; 
    padding-left: 144px !important; 
    line-height: 1.4 !important;
}


@media (max-width: 768px) {
    .lp-voices__grid {
        grid-template-columns: 1fr !important;
        gap: 60px !important;
    }
    .lp-voice-card {
        max-width: 480px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }
}


/* ==========================================================================
   直前対策講座 案内エリア
   ========================================================================== */
.lp-middle-banner { 
    width: 100%;
    background: #fffde6; 
    padding: 0; 
    text-align: center; 
    border-top: 1px solid #eee; 
    border-bottom: 1px solid #eee; 
    overflow: hidden;
}


.lp-middle-banner__content { 
    max-width: 1180px;
    margin: 0 auto;
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 0; 
}

/* --- 左側：画像エリア --- */
.banner-image {
    width: 50%;
    flex-shrink: 0;
    display: flex;
}
.banner-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- 右側：テキストエリア --- */
.banner-text { 
    width: 50%;
    padding: 40px 20px 40px 40px;
    box-sizing: border-box;
    text-align: center;
}

/* 蛍光ペン風マーカーの見出し */
.banner-title {
    font-size: 26px;
    font-weight: bold;
    color: #000 !important;
    line-height: 1.6;
    margin: 0 0 20px 0;
    text-align: center;
}
.lp-cta-marker {
    background: linear-gradient(transparent 40%, #ffff00 40%, #ffff00 90%, transparent 90%);
    display: inline-block;
    padding: 0 4px;
}

/* --- 中央にツノがある黒い区切り線 --- */
.banner-divider {
    position: relative;
    width: 80%;
    max-width: 400px;
    height: 1px;
    background-color: #000;
    margin: 0 auto 25px;
}
/* 下向きの小さなツノ（直角三角形） */
.banner-divider::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 5px 0 5px;
    border-color: #000 transparent transparent transparent;
}

/* --- 下部：ピンクの案内帯 --- */
.banner-badge {
    display: inline-flex;
    align-items: center;
    background-color: #f38cb4;
    color: #000;
    font-weight: bold;
    font-size: 18px;
    padding: 12px 35px 12px 20px;
    border-radius: 40px;
    max-width: 95%;
    box-sizing: border-box;
}

/* 再生ボタン風の白い丸アイコン */
.badge-icon {
    width: 32px;
    height: 32px;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 15px;
    flex-shrink: 0;
    position: relative;
}
/* 白い丸の中の右向き三角矢印 */
.badge-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #f38cb4;
}

.badge-text {
    letter-spacing: 0.05em;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .lp-middle-banner__content {
        flex-direction: column;
    }
    .banner-image {
        width: 100%;
    }
    .banner-text {
        width: 100%;
        padding: 40px 20px;
    }
    .banner-title {
        font-size: 20px;
    }
    .banner-badge {
        font-size: 15px;
        padding: 10px 20px 10px 15px;
    }
    .badge-icon {
        width: 26px;
        height: 26px;
        margin-right: 10px;
    }
    .badge-icon::after {
        border-width: 5px 0 5px 8px;
    }
}


/* ==========================================================================
   よくある質問
   ========================================================================== */
.lp-faq {
    padding: 60px 0;
}

.lp-faq-list { 
    margin: 0 auto; 
}

.lp-faq-item { 
    background: #fff; 
    padding: 35px 0; 
}

.lp-faq-item + .lp-faq-item {
    border-top: 2px dashed #ccc; 
}

/* --- 質問（Q）ブロック --- */
.faq-question { 
    font-weight: bold; 
    font-size: 18px; 
    color: #000; 
    display: flex; 
    align-items: center;
    gap: 15px; 
    margin-bottom: 20px; 
    text-align: left;
}

/* 吹き出し形状の青い丸アイコンに変形 */
.faq-question span { 
    position: relative;
    width: 48px;
    height: 48px;
    background-color: #227bc5;
    color: #fff !important; 
    font-size: 24px; 
    font-style: normal;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    padding-bottom: 2px;
    box-sizing: border-box;
}
/* 青い丸の右下の小さな三角形（吹き出しのツノ） */
.faq-question span::after {
    content: '';
    position: absolute;
    bottom: 10px;
    right: -3px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 0 12px;
    border-color: transparent transparent transparent #227bc5;
    transform: rotate(-15deg);
}

/* --- 回答（A）ブロック --- */
.faq-answer { 
    font-size: 15px; 
    color: #333; 
    display: flex; 
    align-items: flex-start;
    gap: 15px; 
    padding-left: 0; 
    line-height: 1.7; 
}

/* ピンクのA文字アイコン */
.faq-answer span { 
    color: #f38cb4 !important;
    font-size: 28px; 
    font-style: normal;
    width: 48px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
    padding-top: 2px;
}

/* 回答のテキストを左端で美しく揃える */
.faq-answer p {
    margin: 0;
    text-align: left;
    flex-grow: 1;
}

@media (max-width: 768px) {
    .lp-faq {
        padding: 60px 20px;
    }

    .lp-faq-item {
        padding: 25px 0;
    }
    .faq-question {
        font-size: 15px;
        gap: 12px;
    }
    .faq-question span {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    .faq-answer {
        font-size: 14px;
        gap: 12px;
    }
    .faq-answer span {
        font-size: 22px;
        width: 40px;
    }
}


/* ==========================================================================
   最下部 CTA / 資料請求・LINEエリア
   ========================================================================== */
.lp-cta-bottom { 
    background: #fff; 
    padding: 0 0 80px 0; 
}

.cta-top-blue-bar {
    width: 100%;
    background-color: #227bc5;
    padding: 18px 20px;
    text-align: center;
    box-sizing: border-box;
    margin-bottom: 40px;
}
.cta-top-blue-bar h2 {
    color: #fff !important;
    font-size: 22px;
    font-weight: bold;
    margin: 0;
    letter-spacing: 0.05em;
}

.cta-bottom__inner {
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.cta-box { 
    background: #fff; 
    border: none !important;
    border-radius: 0; 
    padding: 0; 
    margin: 0 auto 50px auto; 
    position: relative; 
    text-align: center;
}
.cta-box__title { 
    font-size: 24px; 
    font-weight: bold; 
    color: #000 !important;
    text-align: center; 
    margin: 0 0 30px 0; 
    letter-spacing: 0.03em;
}

.cta-present-image-wrap {
    margin: 0 auto 25px auto;
}
.cta-present-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

.sub-text { 
    font-size: 14px; 
    color: #000;
    margin: 0 auto 30px auto; 
    line-height: 1.6;
    text-align: center;
}

/* ドットの区切り線 */
.cta-divider-dots {
    border-top: 2px dashed #ccc;
    margin: 50px auto;
    width: 100%;
    max-width: 1180px;
}

/* --- LINEボックス --- */
.line-box { 
    background: #fff; 
    border-radius: 0; 
    padding: 0; 
    margin: 0 auto; 
}
.line-box__split { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 40px; 
    margin-bottom: 35px; 
}

/* LINE：左側（テキスト） */
.line-box__left { 
    flex: 1; 
    text-align: left;
}
/* アイコンロゴとテキストの横並び */
.line-title-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 15px;
}
.line-logo-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin: 0 !important;

}
.line-title { 
    font-size: 18px; 
    font-weight: bold; 
    color: #2cb432;
    margin: 0; 
}
.line-text { 
    font-size: 14px; 
    color: #000; 
    margin: 0; 
    line-height: 1.6;
}

/* LINE：右側（バナー画像） */
.line-box__right { 
    width: 62.5%;
    max-width: 625px;
    flex-shrink: 0;
}
.line-box__right img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* --- 共通：丸型矢印ボタン --- */
.cta-btn-wrap, .line-btn-wrap { 
    display: flex; 
    justify-content: center; 
}

/* 資料請求ボタン（黄緑色） */
.cta-yellow-btn {
    display: inline-flex;
    align-items: center;
    background-color: #cedb2b;
    color: #000 !important;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    padding: 12px 40px 12px 20px;
    border-radius: 40px;
    transition: transform 0.2s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
/* LINEボタン（深緑色） */
.line-green-btn {
    display: inline-flex;
    align-items: center;
    background-color: #3b9e4a;
    color: #fff !important;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    padding: 12px 40px 12px 20px;
    border-radius: 40px;
    transition: transform 0.2s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.cta-yellow-btn:hover, .line-green-btn:hover {
    transform: translateY(-2px);
}

/* ボタン内の共通丸アイコン（白） */
.cta-yellow-btn .btn-icon, .line-green-btn .btn-icon {
    width: 32px;
    height: 32px;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 20px;
    flex-shrink: 0;
    position: relative;
}
/* 白い丸の中の右向き矢印（三角） */
.cta-yellow-btn .btn-icon::after {
    content: ''; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%);
    width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #cedb2b; /* アイコン内はボタンと同じ色に */
}
.line-green-btn .btn-icon::after {
    content: ''; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%);
    width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #3b9e4a;
}
.btn-text {
    letter-spacing: 0.03em;
}

/* 画像切り替え初期化 */
.wp-lp-container .sp-only { display: none !important; }
.wp-lp-container .pc-only { display: block !important; }

/* --- レスポンシブ (スマホ表示対応) --- */
@media (max-width: 768px) {
    .wp-lp-container .pc-only { display: none !important; }
    .wp-lp-container .sp-only { display: block !important; }

    .cta-top-blue-bar h2 { font-size: 18px; }
    .cta-box__title { font-size: 18px; margin-bottom: 20px; }
    .sub-text { font-size: 13px; text-align: left; }
    
    .line-box__split {
        flex-direction: column;
        gap: 25px;
    }
    .line-box__left, .line-box__right {
        width: 100%;
    }
    
    .cta-yellow-btn, .line-green-btn {
        font-size: 15px;
        padding: 10px 25px 10px 15px;
        width: 100%;
        justify-content: flex-start;
    }
    .cta-yellow-btn .btn-icon, .line-green-btn .btn-icon {
        width: 26px;
        height: 26px;
        margin-right: 15px;
    }
    .cta-yellow-btn .btn-icon::after, .line-green-btn .btn-icon::after {
        border-width: 5px 0 5px 8px;
    }

    .lp-kv, .lp-exams, .lp-middle-banner, .lp-cta-bottom {
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
    }

    .lp-strengths__grid, .lp-strengths__grid--sub, .lp-diff-grid, .lp-exams__grid.top-grid, .lp-exams__grid.bottom-grid, .lp-voices__grid, .lp-middle-banner__content, .cta-box__split, .line-box__split {
        grid-template-columns: 1fr;
        flex-direction: column;
        text-align: center;
        max-width: 100%;
    }
    .banner-text, .cta-box__left, .line-box__left { text-align: center; }
    .lp-strength-card--wide { flex-direction: column; }

    .wp-lp-container a.lp-btn, 
    .wp-lp-container .lp-btn,
    .lp-btn--pink, 
    .lp-btn--green-line { 
        width: 100% !important; 
        height: auto !important;
        padding: 12px 15px !important;
    }

    .lp-cv-area {
        flex-direction: column;
        gap: 30px;
        align-items: center;
        padding: 10px 20px;
    }
    .lp-cv-button-wrap {
        width: 100%;
        max-width: 400px;
    }
    .lp-cv-lead { font-size: 13px; }
    .cta-box__right { width: 100%; max-width: 200px; margin: 0 auto; }
}