/* ==========================================================================
   MIRU育｜法人・自治体向け食育プログラム LP
   レスポンシブ（スマホ・タブレット）用スタイル
   ========================================================================== */

/* SP固定ボタンはPCでは非表示 */
#sp_btn {
    display: none;
}


@media screen and (max-width: 960px) {

    body {
        padding-bottom: 62px;
    }

    .section_inr {
        padding: 0 24px;
    }

    .heading_serif {
        font-size: 2.6rem;
        margin-bottom: 20px;
    }

    .txt_read {
        font-size: 1.5rem;
    }

    .pc-only {
        display: none;
    }

    /* ヘッダー（スマホは最初の表示のみで、スクロール追従はさせない。電話・お問い合わせはSP下部固定ボタンで対応） */
    .header {
        position: static;
        box-shadow: 0 2px 10px rgba(22, 52, 92, 0.08);

    }

    .header_inr {
        padding: 14px 20px;
        justify-content: center;
    }

    .header_actions {
        display: none;
    }

    /* ファーストビュー */
    .top_fv {
        padding: 0 0 10px;
    }

    .top_fv_inr {
        flex-direction: column;
        gap: 4px;
        padding: 0 5px;
    }

    .fv_txt {
        flex: none;
        order: 2;
        width: 90%;

    }

    .fv_img {
        flex: none;
        order: 1;
        max-width: 100%;
        width: 100%;
    }
    .pc_img {
        display: none !important;
    }

    .sp_img {
        display: block !important;
    }


    /* ==========================================================================
   実績バー
   ========================================================================== */
.sec_achieve {
    background: var(--gradient-blue);
    padding: 10px 0;
}

.ctn_achieve {
           flex-direction: column;
        gap: 2px;

}

.achieve_item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.achieve_label {
    font-size: 1.4rem;
    padding: 2px 4px;
    white-space: nowrap;
    line-height: 1.3;
}

.achieve_num {
    color: var(--color-white);
    font-weight: 700;
    font-size: 1.4rem;
}

.achieve_num strong {
    font-size: 2.2rem;
    margin: 0 4px;
}



    /* 相談CTA */
    .sec_consult {
        padding: 40px 0;
        text-align: center;
    }

    .ctn_consult {
        flex-direction: column;
        width: 100%;
        gap: 20px;
    }

    .consult_img {
        flex: none;
        width: 100%;
    }

    .consult_txt .heading_serif {
        font-size: 2.2rem;
    }


    .btn_cta_wide a {
        width: 100%;
        font-size: 1.6rem;
        padding: 16px 44px;
    }

    .btn_cta_wide .arrow {
        right: 16px;
        width: 22px;
        height: 22px;
        font-size: 1.3rem;
    }

    .btn_cta_wide {
    margin-top: 10px;
}

    /* 課題 */
    .section_problem {
        padding: 60px 0 60px;
    }

    .ctn_problem {
        flex-direction: column;
        gap: 24px;
    }

    .box_problem {
        flex-direction: column;
        align-items: center;
        padding: 20px;
        gap:0px;
    }

    .problem_photo {
        flex: 0 0 80px;
        width: 80px;
        height: 80px;
    }

    .problem_tit {
        text-align: center;
        font-size: 2rem;
        line-height: 1.3;
    }

    .problem_list {
        font-size: 1.35rem;
    }

    /* 下部矢印 */
    .scroll_arrow span {
        border-left: 60px solid transparent;
        border-right: 60px solid transparent;
        border-top: 40px solid var(--color-white);
    }

    /* Solution */
    .section_solution {
        padding: 60px 0;
    }

    .tit_solution {
        width: 55%;
        margin-bottom: 1.2em;
    }

    .ctn_solution {
        flex-direction: column;
        gap: 20px;
    }

    .icon_solution {
        width: 35%;
    }

    /* MIRU育とは */
    .section_about {
        padding: 40px 0 20px;
    }

    .img_about {
        width: 100%;
        padding: 0;
    }
    .section_about > .section_inr > p {
    margin-bottom: 30px;
}

    .ctn_compare {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .box_compare {
        width: 100%;
    }

    .compare_icon {
        width: 50%;
    }
    .conclusion_txt {
    font-family: var(--font-mincho);
    font-size: 2.4rem;
    color: var(--color-navy);
    line-height: 1.3;
}


    /* 選ばれる理由 */
    .section_reason {
        padding: 40px 0;
    }

    .box_reason {
        flex-direction: column;
        padding: 20px;
        gap: 16px;
    }

    .reason_img {
        flex: none;
        width: 100%;
        height: 200px;
    }

    .reason_heading {
        font-size: 2rem;
    }

    /* セミナー事例／対象者 */
    .section_seminar {
        padding: 40px 0;
    }

    .ctn_tag {
        margin-bottom: 40px;
    }
.tag_item {
    padding: 5px 18px;
    border-radius: 30px;
}


    .ctn_audience {
        flex-direction: column;
        gap: 24px;
    }

    /* 受講者の声 */
    .section_voice {
        padding: 40px 0;
    }

    .tit_manzokudo {
        width: 70%;
    }

    .ctn_voice {
        gap: 18px;
    }

    .box_voice {
        flex: 0 0 100%;
        padding: 22px;
    }

    /* 導入の流れ */
    .section_flow {
        padding: 60px 0;
    }

    .flow_list li {
        gap: 18px;
        padding: 20px 0;
    }

    .flow_num {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    /* 代表プロフィール */
    .section_profile {
        padding: 60px 0;
    }

    .ctn_profile {
        flex-direction: column;
        gap: 24px;
    }

    .profile_img {
        flex: none;
        max-width: 240px;
        margin: 0 auto;
    }

    .profile_name {
        font-size: 2rem;
        text-align: center;
    }

    .profile_role {
        text-align: center;
    }

    /* よくあるご質問 */
    .section_faq {
        padding: 60px 0;
    }

    .accordion-open {
        padding: 18px 20px;
        font-size: 1.4rem;
    }

    .accordion-close {
        padding: 16px 20px 20px;
    }

    .bnr_link {
        width: 100%;
        margin-top: 2em;
    }

    /* フォーム */
    .section_form {
        padding: 60px 0;
    }

    .form_dummy {
        padding: 24px 20px;
    }

    /* SP下部固定ボタン（フローティング） */
    #sp_btn {
        display: flex;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 99;
        box-shadow: 0 -2px 10px rgba(22, 52, 92, 0.15);
    }

    #sp_btn .menu_left,
    #sp_btn .menu_right {
        flex: 1;
    }

    #sp_btn a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 62px;
        color: var(--color-white);
        font-weight: 700;
        font-size: 1.3rem;
        text-align: center;
        line-height: 1.3;
    }

    #sp_btn .menu_left a {
        background: var(--color-blue);
    }

    #sp_btn .menu_right a {
        background: var(--color-navy);
    }
}

@media screen and (max-width: 420px) {

    .fv_headline_img img {
        width: 100%;
    }

    .header_logo a {
        font-size: 1.8rem;
    }

    #sp_btn a {
        font-size: 1.15rem;
    }
}