@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    font-family: 'メイリオ', Meiryo, 'Meiryo UI', YuGothic, 'Yu Gothic', 'Yu Gothic UI', 'ＭＳ ゴシック', 'ＭＳ Ｐゴシック', 'MS PGothic', 'MS UI Gothic', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'ヒラギノ角ゴ StdN', 'Hiragino Kaku Gothic StdN', 'ヒラギノ丸ゴ ProN', 'Hiragino Maru Gothic ProN', 'TsukuARdGothic-Regular', 'TsukuBRdGothic-Regular', 'Osaka', sans-serif;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background-color: #fff2c6;
    line-height: 1.8em;
}


/*ヘッダー*/


.header_list {
    padding: 30px 0;
    background-color: #ffa682;
}

.header_list ul {
    display: flex;
    justify-content: center;
}

.header_list a {
    color: #fff;
    text-decoration: none;
    padding: 0 30px;
}

.header_list li {
    color: #fff;
}

.nav-unshown {
    display: none;
}

/*suv_page_headere*/
.suv_header_list {
    padding: 10px 0;
    background-color: #ffa682;
    position: fixed;
    z-index: 10;
    width: 100%;

}

.suv_header_list ul {
    display: flex;
    justify-content: center;
}

.suv_header_list a {
    color: #fff;
    text-decoration: none;
    padding: 0 30px;
}

.suv_header_list li {
    color: #fff;
}


/*メインビジュアル*/

.main_logo {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 100px 0 30px 0;
}

.main_logo img {
    width: 700px;
    height: auto;
}


/*コンセプト*/
.line {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 30px 0;
}

.line img {
    width: 700px;
}

.center_p p {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}


/*概要*/

.summary {
    padding: 30px 0;
    width: 700px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

/*left*/
.summary_left {
    width: 400px;
}


.sum_a a {
    text-decoration: none;
    color: #fff;
    background-color: #ffa682;
    font-size: 20px;
    display: inline;
    float: right;
    padding: 10px 5px;
    border-radius: 30px;
    box-shadow: 1px 2px 3px #999;
}

.sum_a a:hover {
    box-shadow: none;
}

/*rigth*/
.hand_piano img {
    width: 300px;
}


/*GoogleMAP*/
.MAP {
    padding-top: 30px;
    width: 700px;
    margin: 0 auto;
}

.map_link ul {
    display: flex;
    justify-content: center;
}

.map_link {
    padding: 30px 0;
}


/*パンフレットダウンロード*/
.pamphlet {
    padding: 30px 0;
    width: 500px;
    margin: 0 auto;
}

.pamphlet img {
    width: 500px;
}


/*footer*/
footer {
    background-color: #ffa682;
    padding: 30px 0;
}

.footer_info {
    display: flex;
    justify-content: center;
}

h2 {
    text-align: center;
    color: #fff2c6;
}

.classroom_p {
    width: 500px;
}

.mail_info {
    padding-left: 30px;
}

/*    HOMEボタン*/
    .home_btn{
  position: fixed;
  right: 10px;
  bottom: 10px;
    }






/*サブページ*/

/*ロゴ共通*/
.main_logo_suv img {
    width: 500px;
    height: auto;
}

.main_logo_suv {
    width: 500px;
    height: auto;
    margin: 0 auto;
    padding-top: 100px;
}

/*link色共通*/
.teacher_a a {
    color: #ffa682;
}


/*電話でのお問い合わせ*/
.tel_contact,
.tel_contact img {
    width: 500px;
    margin: 0 auto;
}

.tel_contact {
    padding: 30px 0;
}


/*教室案内*/

.classroom_img,
.classroom_img img {
    width: 200px;
    margin: 0 auto;
}

.classroom_p {
    width: 400px;
}

.classroom {
    display: flex;
    flex-wrap: wrap;
    width: 700px;
    margin: 0 auto;
    padding: 30px;
}

.main {
    width: 700px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 1px 2px 3px #777;
}

.lesson {
    padding: 30px;
}

h3 {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    font-size: 30px;
    font-weight: 700;
    padding: 30ox 0;
}

.lesson p {
    padding: 30px;
}

.lesson_tt {
    font-weight: 700;
    background-color: #ffa682;
    color: #fff;
}

.pc {
    display: block !important;
}

.sp {
    display: none !important;
}



/*教師のご紹介*/
.piano img {
    width: 700px;
    height: auto;
    padding: 0 30px;
}

.piano {
    width: 700px;
    margin: 0 auto;
    padding: 30px 0;
}

.teacher_p p {
    padding: 30px;
}

.border {
    padding: .25em 0 .5em .75em;
    border-left: 6px solid #ffa682;
    border-bottom: 1px solid #999;
}


/*新着情報*/

.news li {
    padding: 10px 0;
}

.new {
    width: 700px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 1px 2px 3px #777;
    padding: 10px;
}

.toc {
    background-color: #ffa682;
    color: #fff;
    display: inline;
    padding: 5px 10px;
    border-radius: 10px;
    font-weight: 700;
}

.new p {
    padding: 10px 0;
}

/*みんなの演奏*/
h4 {
    font-size: 18px;
    text-align: center;
}

.play_music {
    padding: 10px 0;
    width: 700px;
    margin: 0 auto;
}

.play_music img {
    width: 25px;
    height: auto;
}

h5 {
    display: inline;
    font-size: 20px;
    font-weight: 700;
}

/*地図検索*/
h6 {
    display: flex;
    justify-content: center;
    font-size: 30px;
    text-align: center;
    letter-spacing: .2em;
    line-height: 1.2em;
    padding-top: 30px;
    font-weight: 700;
}

.main iframe {
    padding-top: 30px;
    width: 700px;
    margin: 0 auto;
}

.mapion {
    text-align: right;
}

.Around {
    padding: 30px;
}




/*リンク*/
.link_page {
    width: 700px;
    margin: 0 auto;
    padding: 30px;
}






/*文字装飾*/
.weight {
    font-weight: 700;
}

/*トップページ：850px以上でのスマホメニュー非表示*/
@media screen and (min-width:850px) {
    .header_smh {
        display: none;
    }
}


/*レスポンシブ設定*/
@media screen and (max-width:850px) {
    .sp {
        display: block !important;
    }


    /*    ハンバーガーメニュー*/
    header {
        padding: 10px;
        background: #ffa682;

        /* 追従 */
        position: -webkit-sticky;
        position: sticky;
        top: 0;

        padding: 10px;
        z-index: 100000;
        background-color: #ffa682;
        box-sizing: border-box;
    }

    #nav-drawer {
        position: relative;
    }

    /*チェックボックス等は非表示に*/
    .nav-unshown,
    .home_btn{
        display: none;
    }

    /*アイコンのスペース*/
    #nav-open {
        display: inline-block;
        width: 30px;
        height: 22px;
        vertical-align: middle;

    }

    /*ハンバーガーアイコン*/
    .header_smh ul li a {
        padding-top: 30px;
        padding-left: 10px;
        text-decoration: none;
        color: #000;
        font-weight: 700;
        margin: 0 auto;
    }

    .header_smh li {
        padding: 10px;
        text-align: center;
        font-size: 20px;
    }

    .header_smh ul {
        padding-top: 30px;
    }

    #nav-open span,
    #nav-open span:before,
    #nav-open span:after {
        position: absolute;
        height: 3px;
        /*線の太さ*/
        width: 25px;
        /*長さ*/
        border-radius: 3px;
        background: #555;
        display: block;
        content: '';
        cursor: pointer;
    }

    #nav-open span:before {
        bottom: -8px;
    }

    #nav-open span:after {
        bottom: -16px;
    }

    /*閉じる用の薄黒カバー*/
    #nav-close {
        display: none;
        /*はじめは隠しておく*/
        position: fixed;
        z-index: 99;
        top: 0;
        /*全体に広がるように*/
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0;
        transition: .3s ease-in-out;
    }

    /*中身*/
    #nav-content {
        overflow: auto;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        /*最前面に*/
        width: 50%;
        /*右側に隙間を作る（閉じるカバーを表示）*/
        max-width: 300px;
        /*最大幅（調整してください）*/
        height: 100%;
        background: #fff;
        /*背景色*/
        transition: .3s ease-in-out;
        /*滑らかに表示*/
        -webkit-transform: translateX(-105%);
        transform: translateX(-105%);
        /*左に隠しておく*/
    }

    /*チェックが入ったらもろもろ表示*/
    #nav-input:checked ~ #nav-close {
        display: block;
        /*カバーを表示*/
        opacity: .5;
    }

    #nav-input:checked ~ #nav-content {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        /*中身を表示（右へスライド）*/
        box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
    }


    .pc {
        display: none !important;
    }


    /*    700px*/
    .main_logo img,
    .line img,
    .summary,
    .MAP,
    .MAP iframe,
    .pamphlet img,
    .main_logo_suv,
    .footer_info {
        width: 100%;
    }

    .main_logo_suv{
        width: 60%;
    }
    
    .main_logo,
    .main_logo img{
        height: auto;
    }



    /*    ヘッダー*/
    .header_list,
    .suv_header_list {
        display: none;
    }

    .smh_none {
        display: none;
    }


    /*    概要*/
    .hand_piano {
        display: none;
    }

    .sum_a a {
        font-size: 18px;
        padding: 5px 3px;
        border-radius: 30px;
    }

    /*MAP*/
    .map_link ul {
        display: block;
    }

    .header_list,
    .map_link,
    .concept,
    .summary,
    .MAP iframe,
    .link_page {
        padding: 0 10px;
    }

    /*    footer*/

    .mail_info img {
        width: 50%;
    }

    .footer_info {
        display: block;
        padding: 0 10px;
    }

    .mail_info {
        padding-left: 0;
    }


    .top_page_btn img{
        width: 100px;
        height: auto;
    }
    


    /*    下層ページ*/

    .main {
        width: 95%;
    }

    .classroom,
    .classroom_p,
    .classroom_img,
    .tel_contact img,
    .piano,
    .main_logo_suv img,
    .new,
    .main iframe,
    .link_page,
    .play_music {
        width: 100%
    }

    .classroom_img img,
    .piano img {
        width: 100%;
        height: auto;
        padding: 30px 0;
    }

    .classroom {
        display: block;
    }

    .classroom,
    .lesson,
    .lesson p,
    .piano,
    .teacher_p {
        padding: 10px;
    }

    .tel_contact,
    .pamphlet {
        width: 70%;
    }

    .classroom_p p,
    h3,
    .lesson p,
    .teacher_p p {
        padding: 30px 0;
    }

    .main_logo_suv img{
        padding: 0;
    }

    .mail_info img {
        width: 300px;
    }
}


/*896px*/
@media screen and (max-width: 896px) {
    .main_logo img{
        width: 600px;
        height: 420px;
    }
    
}

@media screen and (max-width: 768px) {
    .main_logo img{
        width: 480px;
        height: 336px;
    }
    
}


/*480px*/
@media screen and (max-width: 480px) {
    .main_logo img{
        width: 400px;
        height: 280px;
    }
    
}