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

@media screen and (max-width:767px) {
    img {
        max-width: 100vw;
        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;
    }

    /* ナビバー */
    #navbar {
        display: none;
    }

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

    #guitar_img {
        width: 100vw;
        height: 350px;
        margin: 0;
        padding: 0;
        background-size: cover;
        background-image: url(/img/top_guitar_smart.avif);
    }

    #jazzguitar_img {
        width: 100vw;
        height: 350px;
        margin: 0;
        padding: 0;
        background-size: cover;
        background-image: url(/img/top_jazzguitar_smart.avif);
    }

    #drum_img {
        width: 100vw;
        height: 350px;
        margin: 0 0 0 0;
        background-size: cover;
        background-image: url(/img/top_drum_smart.avif);
    }

    #drum_img_hachioji {
        width: 100vw;
        height: 350px;
        margin: 0 0 0 0;
        background-size: cover;
        background-image: url(/img/top_drum_smart_hachioji.avif);
    }

    #bass_img {
        width: 100vw;
        height: 350px;
        margin: 0 0 0 0;
        background-size: cover;
        background-image: url(/img/top_bass_smart.avif);
    }

    #woodbass_img {
        width: 100vw;
        height: 350px;
        margin: 0 0 0 0;
        background-size: cover;
        background-image: url(/img/top_woodbass_smart.avif);
    }

    #vocal_img {
        width: 100vw;
        height: 350px;
        margin: 0 0 0 0;
        background-size: cover;
        background-image: url(/img/top_vocal_smart.avif);
    }

    #dtm_img {
        width: 100vw;
        height: 350px;
        margin: 0 0 0 0;
        background-size: cover;
        background-image: url(/img/top_dtm_smart.avif);
    }

    #classicguitar_img {
        width: 100vw;
        height: 350px;
        margin: 0 0 0 0;
        background-image: url(/img/top_classicguitar_smart.avif);
        background-size: cover;
    }

    #ukulele_img {
        width: 100vw;
        height: 350px;
        margin: 0 0 0 0;
        background-image: url(/img/top_ukulele_smart.avif);
        background-size: cover;
    }

    #piano_img {
        width: 100vw;
        height: 350px;
        margin: 0 0 0 0;
        background-image: url(/img/top_piano_smart.avif);
        background-size: cover;
    }

    #flute_img {
        width: 100vw;
        height: 350px;
        margin: 0 0 0 0;
        background-image: url(/img/top_flute_smart.avif);
        background-size: cover;
    }

    #clarinet_img {
        width: 100vw;
        height: 350px;
        margin: 0 0 0 0;
        background-image: url(/img/top_clarinet_smart.avif);
        background-size: cover;
    }

    #cajon_img {
        width: 100vw;
        height: 350px;
        margin: 0 0 0 0;
        background-image: url(/img/top_cajon_smart.avif);
        background-size: cover;
    }

    #online_img {
        width: 100vw;
        height: 350px;
        background-size: cover;
        background-image: url(/img/top_online_smart.avif);
    }

    #online_guitar_img {
        width: 100vw;
        height: 350px;
        margin: 0;
        background-image: url(/img/online_guitar_smart.avif);
        background-size: cover;
    }

    #online_classicguitar_img {
        width: 100vw;
        height: 350px;
        margin: 3px 0 0 0;
        background-image: url(/img/online_classicguitar_smart.avif);
        background-size: cover;
    }

    #online_jazzguitar_img {
        width: 100vw;
        height: 350px;
        margin: 3px 0 0 0;
        background-image: url(/img/online_jazzguitar_smart.avif);
        background-size: cover;
    }

    #online_bossanova_img {
        width: 100vw;
        height: 350px;
        margin: 3px 0 0 0;
        background-image: url(/img/online_bossanova_smart.avif);
        background-size: cover;
    }

    #online_ukulele_img {
        width: 100vw;
        height: 350px;
        margin: 3px 0 0 0;
        background-image: url(/img/online_ukulele_smart.avif);
        background-size: cover;
    }

    #online_bass_img {
        width: 100vw;
        height: 350px;
        margin: 3px 0 0 0;
        background-image: url(/img/online_bass_smart.avif);
        background-size: cover;
    }

    #online_drum_img {
        width: 100vw;
        height: 350px;
        margin: 3px 0 0 0;
        background-image: url(/img/online_drum_smart.avif);
        background-size: cover;
    }

    #online_dtm_img {
        width: 100vw;
        height: 350px;
        margin: 3px 0 0 0;
        background-image: url(/img/online_dtm_smart.avif);
        background-size: cover;
    }

    /* メインコンテンツ */
    main .freeimg {
        width: 100%;
        height: auto;
        display: block;
    }

    main {
        width: auto;
    }

    main h1 {
        text-align: left;
        width: auto;
        height: 45px;
        font-size: 110%;

    }

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

    }

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

    /* キャッチコピー セクション */
    #catch {
        margin-bottom: 25px;
    }

    #catch h2 {
        margin: 10px 5px 5px 5px;
        padding: 10px 10px 30px 10px;
    }

    main .point01 {
        width: auto;
        height: 40px;
    }

    main .point02 {
        width: auto;
        height: 40px;
    }

    main .point03 {
        width: auto;
        height: 40px;
    }

    main .point04 {
        width: auto;
        height: 40px;
    }

    main .point05 {
        width: auto;
        height: 40px;
    }

    main .point06 {
        width: auto;
        height: 40px;
    }

    main .point07 {
        width: auto;
        height: 40px;
    }

    #fee .feeimg {
        width: 99%;
        height: auto;
        margin: 5px 5px 5px 5px;
    }

    #access .studioimg {
        width: 98%;
        height: auto;
        margin: 5px 5px 5px 5px;
    }

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

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

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

    /* よくある質問2 */
    .qa-list dl {
        position: relative;
        padding: 15px 40px 15px 10px;
    }

    .qa-list dl::before {
        top: 20px;
        right: 20px;
        width: 7px;
        height: 7px;
    }

    .qa-list dl dt {
        padding: 0 0 0 30px;
        font-size: 14px;
    }

    .qa-list dl dt::before {
        font-size: 14px;
        top: 3px;
        left: 5px;
        content: 'Q.';
    }

    .qa-list dl dd::before {
        font-size: 14px;
        top: 5px;
        left: 5px;
        content: 'A.';
    }

    .qa-list dl dd {
        margin: 10px 0 0;
        padding: 0 0 0 30px;
        font-size: 14px;
    }

    .qa-list dl dd p {
        margin: 30px 0 0;
    }

    .qa-list dl dd p:first-child {
        margin-top: 0;
    }

    /* サイトバー */
    aside {
        display: none;
    }

    /* フッター */
    footer {
        display: block;
        height: auto;
        width: auto;
        margin: 0;
    }

    footer .footer_1 {
        display: none;
        margin: auto;
    }

    footer .footer_2 {
        display: none;
        margin: auto;
    }

    footer .footer_3 {
        text-align: center;
        margin: auto;
    }

    footer .footer_4 {
        text-align: center;
        margin: auto;
    }

    footer .footer_1_mb {
        text-align: center;
    }

    #footer_end {
        margin: 0 auto;
    }

    .pc {
        display: inline;
    }

    .mb {
        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%;
    }

    /* グーグルマップ縮小 */
    .gmap-wrap {
        position: relative;
        height: 0;
        padding-bottom: 56.25%;
        /* 縦横比の指定 */
        overflow: hidden;
    }

    .gmap-wrap iframe,
    .gmap-wrap object,
    .gmap-wrap embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}