/* ==============================================
   connec+ (page-connect.php) 専用スタイル
   ============================================== */

/* --- 0. 改行コントロール --- */
.sp_only {
    display: none !important;
}

/* --- パンくず・ヒーロー共通上書き --- */
#neck {
    position: relative !important;
}

#breadcrumb {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin: 20px 0 !important;
    padding: 0 90px !important;
    z-index: 10;
}

/* #waist の common.css padding-top を解除 */
#waist {
    padding-top: 0 !important;
}

/* .inner の横幅制限をヒーローだけ解除 */
#connect_hero .inner {
    max-width: 100% !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* ================================================
   1. ヒーローセクション
   ================================================ */
.page_hero {
    padding-top: 84px;
}

.page_hero_wrapper {
    position: relative !important;
    width: 100% !important;
    height: 650px !important;
    overflow: hidden !important;
    display: block !important;
}

#connect_hero .page_hero_wrapper::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background:
        linear-gradient(to right, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .3) 35%, rgba(255, 255, 255, 0) 55%),
        url(/images/connect/connect_bk.jpg) no-repeat center bottom / cover !important;
    z-index: 1 !important;
}

#connect_hero .page_hero_wrapper::before {
    display: none !important;
}

/* テキスト */
#connect_hero .page_hero_text {
    color: #0372d1 !important;
    position: absolute;
    top: 50% !important;
    left: 28% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10;
    width: 400px;
}

#connect_hero .hero_logo {
    width: 320px;
    margin-bottom: 25px;
}

#connect_hero .hero_logo img {
    width: 100%;
    height: auto;
}

#connect_hero .page_hero_text h3 {
    margin-bottom: .8em;
    font-size: 2.36em;
    line-height: 1.3em;
    color: #0372d1 !important;
    font-weight: 700 !important;
}

#connect_hero .page_hero_text p {
    font-size: 1.4em;
    line-height: 1.6em;
    color: #0372d1 !important;
    font-weight: 500 !important;
}

/* スクリーン画像 */
#connect_hero .page_hero_image {
    position: absolute;
    top: 50% !important;
    left: 72% !important;
    transform: translate(-50%, -45%) !important;
    width: 650px;
    z-index: 5;
}

#connect_hero .page_hero_image img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .15));
}

/* ================================================
   2. custom_main 共通レイアウト
   ================================================ */
#custom_main {
    padding: 0;
}

/* セクション */
.cn_section {
    padding: 72px 0;
    margin: 0 -90px;
    /* inner の padding を打ち消して全幅に */
    padding-left: 90px;
    padding-right: 90px;
}

.cn_section--gray {
    background: #f4f7fb;
}

.cn_section--fade {
    background: linear-gradient(180deg, #fff 0%, #ecf5ff 100%);
}

#cn_problem {
    padding-top: 36px;
}

/* セクションヘッド */
.cn_section_head {
    text-align: center;
    margin-bottom: 52px;
}

/* .cn_eyebrow {
    display: block;
    color: #0372d1;
    font-size: .95em;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-bottom: 12px;
} */

.cn_section_title {
    font-size: 2.1em !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
    color: #0b1b2b !important;
    margin: 0 0 .6em !important;
}

.cn_section_title .cn_blue {
    color: #0372d1;
}

.cn_section_lead {
    font-size: 1.15em;
    color: #445;
    line-height: 1.8;
    margin: 0;
}

/* ================================================
   3. カードグリッド
   ================================================ */
.cn_cards {
    display: grid;
    gap: 24px;
}

.cn_cards--3col {
    grid-template-columns: repeat(3, 1fr);
}

/* 課題カード */
.cn_card {
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    border: 2px solid #e2e8f0;
    transition: transform .2s ease, border-color .2s ease;
}

.cn_card:hover {
    transform: translateY(-3px);
    border-color: #0372d1;
}

.cn_card_head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.cn_num_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #e8f0fb;
    color: #0372d1;
    font-weight: 900;
    font-size: 1.1em;
    flex-shrink: 0;
}

.cn_tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: .8em;
    font-weight: 700;
}

.cn_tag--red {
    background: #fef2f2;
    color: #b91c1c;
}

.cn_card_title {
    font-size: 1.25em !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    color: #0b1b2b !important;
    margin: 0 0 12px !important;
}

.cn_card_body {
    font-size: .95em;
    color: #445;
    line-height: 1.85;
    margin: 0;
}

/* ================================================
   5. フィーチャーカード（強み）
   ================================================ */
/* 課題カード（cn_card--problem）は基底の .cn_card で完結 */
.cn_card--problem {}

.cn_card--feature {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.cn_card--feature .cn_card_title {
    padding: 0 24px;
    margin-bottom: 8px !important;
    margin-top: 0 !important;
}

.cn_card--feature .cn_card_body {
    padding: 0 24px 24px;
    flex: 1;
}

/* ビジュアルエリア */
.cn_feature_visual {
    position: relative;
    height: 160px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    margin-bottom: 20px;
}

/* .cn_feature_visual--map {
    background: #e8f0fb;
}

.cn_feature_visual--swap {
    background: #f0fdf4;
}

.cn_feature_visual--chart {
    background: #fffbeb;
}

.cn_feature_svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
} */

.cn_feature_visual--img {
    height: 200px;
}

.cn_feature_visual--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 12px 12px 0 0;
}

/* SVGビジュアル廃止のためコメントアウト（画像差し替え済み）
.cn_map_dot {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.cn_map_dot--blue {
    background: #0372d1;
    box-shadow: 0 0 0 4px rgba(3, 114, 209, .18);
}

.cn_map_dot--green {
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .18);
}

.cn_pulse {
    animation: cn_pulse 2.2s ease-in-out infinite;
}

@keyframes cn_pulse {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: .8;
    }
}

.cn_live_badge {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid #dde;
    border-radius: 9999px;
    padding: 3px 10px;
    font-size: .75em;
    font-weight: 700;
    color: #0b1b2b;
}

.cn_blink_dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    animation: cn_blink 1.6s ease-in-out infinite;
}

@keyframes cn_blink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: .3;
    }
}

.cn_swap_inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 20px 24px 0;
}

.cn_swap_truck {
    text-align: center;
}

.cn_truck_icon {
    display: block;
    font-size: 2em;
    margin-bottom: 4px;
}

.cn_truck_label {
    font-size: .75em;
    font-weight: 700;
    color: #445;
}

.cn_swap_truck--active .cn_truck_icon {
    border: 2px solid #16a34a;
    border-radius: 12px;
    padding: 4px 8px;
}

.cn_green {
    color: #16a34a;
}

.cn_swap_arrow {
    width: 56px;
    flex-shrink: 0;
}

.cn_driver_badge {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #dde;
    border-radius: 9999px;
    padding: 4px 12px;
    font-size: .75em;
    font-weight: 700;
    white-space: nowrap;
    color: #0b1b2b;
}

.cn_chart_badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #fff;
    border: 1px solid #dde;
    border-radius: 9999px;
    padding: 3px 10px;
    font-size: .75em;
    font-weight: 700;
    color: #15803d;
}
*/

/* フィーチャーバッジ（番号） */
.cn_feature_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-weight: 900;
    font-size: 1.1em;
    margin: 0 24px 10px;
    flex-shrink: 0;
}

.cn_feature_badge--blue {
    background: #0372d1;
    color: #fff;
}

.cn_feature_badge--green {
    background: #16a34a;
    color: #fff;
}

.cn_feature_badge--dark {
    background: #0b1b2b;
    color: #fff;
}

/* 安心ポイント行 */
.cn_reassure_row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 40px;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.cn_reassure_item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #dde;
    border-radius: 10px;
    padding: 14px 18px;
    font-weight: 700;
    font-size: .95em;
}

.cn_check_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff3e0;
    color: #f28b30;
    flex-shrink: 0;
}

.cn_check_icon svg {
    width: 16px;
    height: 16px;
}

/* ================================================
   6. 料金セクション
   ================================================ */
.cn_pricing_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.cn_pricing_card {
    border-radius: 18px;
    padding: 36px;
    position: relative;
}

.cn_pricing_card--primary {
    background: #0372d1;
    color: #fff;
}

.cn_pricing_card--secondary {
    background: #fff;
    border: 2px solid #dde;
    color: #0b1b2b;
    box-shadow: 0 8px 40px -10px rgba(3, 114, 209, .15);
}

.cn_pricing_badge {
    display: inline-flex;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: .8em;
    font-weight: 700;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    margin-bottom: 14px;
}

.cn_pricing_badge--light {
    background: #e8f0fb;
    color: #0372d1;
}

.cn_pricing_sub {
    font-size: .88em;
    line-height: 1.6;
    opacity: .9;
    margin: 0 0 20px;
}

.cn_price_block {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

.cn_price_label {
    font-size: .9em;
    font-weight: 700;
    opacity: .85;
}

.cn_price_num {
    font-size: 3.8em;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.02em;
}

.cn_price_unit {
    font-size: 1em;
    font-weight: 700;
    opacity: .85;
}

.cn_campaign_label {
    font-size: .88em;
    font-weight: 700;
    color: #fde68a;
    margin: 0 0 16px;
}

.cn_price_set_label {
    font-size: 1.6em;
    font-weight: 900;
    line-height: 1.3;
    color: #0372d1;
    margin-bottom: 16px;
}

.cn_price_set_label span {
    font-size: .65em;
    color: #445;
}

.cn_pricing_desc {
    font-size: .92em;
    line-height: 1.8;
    margin: 0 0 24px;
    opacity: .95;
}

.cn_pricing_card--primary .cn_pricing_desc {
    color: rgba(255, 255, 255, .92);
}

/* ================================================
   7. ボタン
   ================================================ */
.cn_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    padding: 14px 22px;
    font-weight: 700;
    font-size: .95em;
    text-decoration: none !important;
    transition: opacity .15s ease, transform .15s ease;
    line-height: 1.4;
}

.cn_btn:hover {
    opacity: .85;
    transform: translateY(-1px);
    text-decoration: none !important;
}

.cn_btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.cn_btn--white {
    background: #fff;
    color: #0372d1 !important;
}

.cn_btn--orange {
    background: linear-gradient(83deg, #f28b30 0%, #f5a623 100%);
    color: #fff !important;
    box-shadow: 0 8px 20px -6px rgba(242, 139, 48, .5);
}

.cn_btn--cta {
    background: linear-gradient(83deg, #f28b30 0%, #f5a623 100%);
    color: #fff !important;
    font-size: 1.2em;
    padding: 18px 36px;
    border-radius: 12px;
    box-shadow: 0 10px 28px -8px rgba(242, 139, 48, .55);
    margin-bottom: 24px;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

#connect_hero .page_hero_text p.cn_hero_notice {
    font-size: .8em !important;
    color: #445 !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    margin: .8em 0 1.6em !important;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, .7) !important;
    border-radius: 6px !important;
}

.cn_btn--hero {
    background: linear-gradient(83deg, #f28b30 0%, #f5a623 100%);
    color: #fff !important;
    font-size: 1.05em;
    padding: 15px 28px;
    border-radius: 10px;
    box-shadow: 0 8px 24px -6px rgba(242, 139, 48, .5);
    display: inline-flex;
}

.cn_btn--hero:hover,
.cn_btn--orange:hover,
.cn_btn--cta:hover {
    color: #fff !important;
    text-decoration: none !important;
}

.cn_btn--white:hover {
    color: #0372d1 !important;
    text-decoration: none !important;
}

/* ================================================
   8. Final CTA セクション
   ================================================ */
.cn_cta_box {
    background: linear-gradient(180deg, #fff 0%, #e8f0fb 100%);
    border: 2px solid #0372d1;
    border-radius: 20px;
    padding: 60px 48px;
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.cn_cta_box::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(3, 114, 209, .1), transparent);
    pointer-events: none;
}

.cn_cta_lead {
    font-size: 1.05em;
    color: #445;
    line-height: 1.85;
    margin: 0 0 32px;
}

.cn_tel_box {
    background: #fff;
    border: 1px solid #dde;
    border-radius: 14px;
    padding: 24px 32px;
    display: inline-block;
    min-width: 340px;
}

.cn_tel_label {
    font-size: .8em;
    font-weight: 700;
    color: #888;
    letter-spacing: .15em;
    margin: 0 0 4px;
}

.cn_tel_num {
    display: block;
    font-size: 2.6em;
    font-weight: 900;
    color: #0372d1 !important;
    letter-spacing: .02em;
    line-height: 1.2;
    text-decoration: none !important;
    margin-bottom: 6px;
}

.cn_tel_num:hover {
    opacity: .8;
    text-decoration: none !important;
}

.cn_tel_note {
    font-size: .88em;
    color: #445;
    line-height: 1.6;
    margin: 0;
}

.cn_tel_note span {
    color: #888;
    font-size: .92em;
}

/* ============ App Badges ============ */
.cn_badge_row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.cn_badge_img {
    height: 48px;
    width: auto;
}

@media screen and (max-width: 751px) {
    .cn_badge_row {
        flex-direction: column;
        align-items: center;
    }
}

/* ================================================
   9. スマホ対応
   ================================================ */
@media screen and (max-width: 751px) {

    .sp_only {
        display: block !important;
    }

    /* ヒーロー */
    .page_hero_wrapper {
        height: auto !important;
        min-height: 850px !important;
        overflow: visible !important;
    }

    #connect_hero .page_hero_wrapper::after {
        background:
            linear-gradient(to bottom, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .5) 60%, rgba(255, 255, 255, 0) 100%),
            url(/images/connect/connect_bk.jpg) no-repeat center bottom / cover !important;
    }

    #connect_hero .page_hero_text {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        padding: 110px 40px 10px !important;
        text-align: center !important;
    }

    #connect_hero .hero_logo {
        width: 240px !important;
        margin: 0 auto 1.5em !important;
    }

    #connect_hero .page_hero_text h3 {
        font-size: 1.8em !important;
        text-align: center !important;
    }

    #connect_hero .page_hero_text p {
        font-size: 1.3em !important;
        margin-bottom: 2em !important;
    }

    #connect_hero .page_hero_image {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 95% !important;
        margin: 0 auto 50px !important;
    }

    /* custom_main */
    .cn_section {
        margin: 0 -20px;
        padding: 48px 20px;
    }

    .cn_section_title {
        font-size: 1.6em !important;
    }

    .cn_cards--3col {
        grid-template-columns: 1fr;
    }

    .cn_reassure_row {
        grid-template-columns: 1fr;
    }

    .cn_pricing_grid {
        grid-template-columns: 1fr;
    }

    .cn_cta_box {
        padding: 36px 20px;
    }

    .cn_tel_box {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .cn_tel_num {
        font-size: 2em;
    }

    .cn_btn--cta {
        font-size: 1em;
        padding: 16px 20px;
    }
}