@charset "shift_jis";
/* CSS Document */

@media screen and (max-width:767px) {
    img {
        max-width: 100%;
        height: auto;
        width: auto;
    }

    /* 全体 */
    body {
        overflow-x: hidden;
    }

    #container {
        width: 100%;
    }

    #wrapper {
        display: block;
        /* ← flexを解除 */
        width: 100%;
        /* ← 幅を100%に固定 */
        margin: 0 auto;
        /* ← 左右中央揃え */
        padding: 0;
        /* ← 余白をリセット */
    }

    /* ヘッダー */
    header {
        width: auto;
        height: auto;
        margin: 0;
    }

    #header_main {
        width: auto;
        height: auto;
        margin: 0;
    }

    header .left_area {
        position: static;
        /* ← PCのabsoluteを上書きして通常のフローに戻す */
        text-align: left;
        /* ← 中央寄せをやめて左寄せ */
        margin: 0;
        padding: 5px 0 0 10px;
        /* ← ちょっと余白を調整（好みで） */
    }

    header .logo {
        margin: 0 0 4px 0;
        /* ← ロゴ画像との隙間 */
    }

    header .logoimg {
        width: 150px;
        /* ← スマホ用の小さいロゴに */
        height: auto;
        display: block;
    }

    header .copy {
        display: none;
    }

    header .contact {
        display: none;
    }

    main {
        width: 100%;
    }

    main h2 {
        text-align: left;
        width: auto;
        height: 45px;
        font-size: 100%;
    }

    main h3 {
        width: auto;
        height: 20px;
        font-size: 100%;
    }

    #fee img {
        width: 95%;
        height: auto;
    }

    main .for_trial img {
        width: 95%;
        height: auto;
    }

    /* mainimage */
    #mainimage {
        width: 100vw;
        height: 350px;
        background-size: cover;
        background-image: url(/img/smart_img.jpg);
    }

    main .instructor {
        width: 100px;
        height: auto;
    }

    aside {
        display: none;
    }

    .center {
        text-align: center;
    }

    .movie-wrap {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
    }

    .movie-wrap iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    main .col {
        float: left;
        padding: 5px 0px 5px 15px;

    }

    main .col_01 {
        float: left;
        padding: 5px 0px 5px 15px;

    }

    #navbar {
        display: none;
    }

    footer {
        display: block;
        height: 100%;
        width: 100%;
        margin: 0;
    }

    footer .footer_1 {
        display: none;
    }

    footer .footer_2 {
        display: none;
    }

    footer .footer_3 {
        text-align: center;
    }

    footer .footer_4 {
        text-align: center;
    }

    footer .footer_1_mb {
        text-align: center;
    }

    footer_end {
        margin: 0 auto;
    }

    .pc {
        display: inline;
    }

    .mb {
        display: none;
    }