@charset "utf-8";

/*--------------------------------------------------------------
  logimath教室
--------------------------------------------------------------*/

#campaign_logimath-titlearea {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
}

#campaign_logimath-titlearea .container-max {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: start;
    height: stretch;
    min-height: 100%;
}

#campaign_logimath-titlearea .titlearea {
    margin: 0;
    padding: 2rem;
    width: 60%;
    height: stretch;

    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
}

#campaign_logimath-titlearea .linkarea {
    margin: 0;
    padding: 3rem;
    width: 40%;
    height: stretch;

    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end;
    text-align: end;
}

#campaign_logimath-titlearea h5 strong {
    color: #f00;
}

@media (max-width: 767.98px) {

    /* sm 以下の画面サイズの場合のスタイル */
    #campaign_logimath-titlearea {
        background-position: 70% 50%;
    }

    #campaign_logimath-titlearea .titlearea {
        margin: 0;
        padding: 1rem;
        width: 100%;
    }

    #campaign_logimath-titlearea .linkarea {
        margin: 0;
        padding: 1rem;
        width: 100%;
        height: unset;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #campaign_logimath-titlearea .linkarea img {
        width: 100%;
    }

    #campaign_logimath-titlearea .container-max {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {

    /* md の画面サイズの場合のスタイル */
    #campaign_logimath-titlearea {
        background-position: 70% 50%;
    }


    #campaign_logimath-titlearea .titlearea {
        margin: 0;
        padding: 1rem;
        width: 100%;
    }

    #campaign_logimath-titlearea .linkarea {
        margin: 0;
        padding: 1rem;
        width: 100%;
        height: unset;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #campaign_logimath-titlearea .linkarea img {
        width: 100%;
    }

    #campaign_logimath-titlearea .container-max {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100%;
    }
}

@media (min-width: 992px) {
    /* lg 以上の画面サイズの場合のスタイル */
}



/*--------------------------------------------------------------
  ろんり算数とは
--------------------------------------------------------------*/


#campaign_logimath-content {
    margin: 0;
    padding: 0;
    width: 100%;

    background-color: rgb(252, 255, 222);
}

#campaign_logimath-content h2 {
    margin: 4rem 0 4rem 0;
    text-align: center;
    font-size: clamp(2rem, 7vw, 4rem);
}

#campaign_logimath-content p {
    font-size: clamp(1rem, 2vw, 1.2rem);
}