@charset "SHIFT-JIS";

/*================================================
 *  マテリアルアイコン
 ================================================*/
/* Material iconsを利用する */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* 推奨サイズ */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
 
  /* WebKitブラウザサポート */
  -webkit-font-smoothing: antialiased;
  /* Chrome、Safariサポート */
  text-rendering: optimizeLegibility;
 
  /* Firefoxサポート */
  -moz-osx-font-smoothing: grayscale;
 
  /* IEサポート */
  font-feature-settings: 'liga';
}

/* アイコンサイズ */
.material-icons.md-14 { font-size: 14px; vertical-align:-0.10em; }
.material-icons.md-18 { font-size: 18px; vertical-align:-0.15em; }
.material-icons.md-24 { font-size: 24px; vertical-align:-0.20em; }
.material-icons.md-36 { font-size: 36px; vertical-align:-0.25em; }
.material-icons.md-48 { font-size: 48px; vertical-align:-0.35em; }
 
/* 背景が明るいとき用のアイコン色 */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
 
/* 背景が暗いとき用のアイコン色 */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }



/*================================================
 *  一般・共通設定
 ================================================*/


#footerMenu {
    width:800px;
    margin:10px auto;
    border-top: 2px solid #f99;
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
}

#copyright {
    clear:both;
    width:800px;
    margin:10px auto;
    border-top: 2px solid #f99;
    background-color: #db7093;
}


/*================================================
 *  シェアボタン
 ================================================*/

.shareButtonAll {
    margin: 15px 0 5px 0;
}

.shareButtonIndex {
    width:800px;
    margin:0px auto;
}

.shareButtonFB {
    margin-top: -2px;
    margin-right: 5px;
    float: left;
}


/*================================================
 *  フッター
 ================================================*/
footer {
    clear:both;
}

.footmenu {
    width:357px;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: 20px;
    float:left;
}
p.footlistTitle {
    list-style:none;
    font-size:24px;
    font-weight:bold;
    color:#3c3c3c;
    margin-bottom:10px;
}
.footmenu li {
    list-style:none;
    font-size:16px;
    padding:3px;
}
.footmenu li:hover {
    background-color: #ffc0cb;
}

.footmenu ul i {
    color:#f77;
}

.copyrightStyle {
    text-align: center;
    font-size:14px;
    font-weight:bold;
    padding:5px;
    color:#fff;
}
.copyrightStyle a {
    color:#fff;
}
.copyrightStyle a:hover {
    background-color:#fb0;
}





/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:779px) {
    body {
        box-sizing:border-box;
        width:100%;
        padding:0 10px;
    }

    header {
        width:100%;
    }

    header h1 {
        margin-bottom:0;
    }

    #navArea {
        display: none;
    }

    #topBannerArea {
        clear:both;
        margin-top:-20px;
        width:100%;
    }

    #contents {
        width:100%;
    }

    #main {
        width:100%;
    }

    #sub {
        width:100%;
    }

    #footerMenu {
        width:100%;
    }

    #copyright {
        width:100%;
    }


    /* ヘッダー */
    .headerLogo {
        width:80%;
        text-align:center;
    }
    .headerLogo img {
        width:100%;
    }
    .headerCategory1 {
        clear:both;
        margin-left:0;
        line-height: normal;
        width:45%;
        padding:0px 1px;
        text-align: center;
        font-size:14px;
        height: 30px;
    }
    .headerCategory2 {
        margin-left:5px;
        line-height: normal;
        width:45%;
        padding:0px 1px;
        text-align: center;
        font-size:14px;
        height: 30px;
    }
    .headerComment {
        margin-left:10px;
        margin-top:5px;
        line-height: 40px;
        padding:5px;
        height:auto;
        line-height: 1.0em;
        text-align: center;
    }

    .headerBnrArea {
        display: none;
    }

    /* グローバルナビ */

    .navAreaClass li {
        width:17%;
        padding:1%;
        font-size: 12px;
        height:100%;
    }

    /* ハンバーガーメニュー */
    .hmbgrBtn {
        background:transparent url(../images/btn.png) no-repeat 0 0;
        display: block;
        width:35px;
        height: 35px;
        position: absolute;
        top:20px;
        right:20px;
        cursor: pointer;
        z-index: 200;
    }
    .hmbgrPeke {
        clear:both;
        float:left;
        background-position: -35px 0;
    }
    .hmbgrDrawr {
        clear:both;
        float:left;
        display: none;
        background-color:rgba(0,0,0,0.6);
        position: absolute;
        top: 0px;
        right:0;
        width:260px;
        padding:60px 0 20px 0;
        z-index: 100;
    }
    #hmbgrMenu li {
        list-style: none;
        width:260px;
        color:#fff;
        font-size: 18px;
        font-weight: bold;
        display: block;
        padding: 15px;
    }
    #hmbgrMenu li:hover {
        background-color:rgba(256,256,0,0.6);
    }

    /* トップイメージ */
    .slideBox {
        display:block;
        box-sizing:border-box;
        width:100%;
        height:auto;
    }

    .slideImage img {
        width:100%;
    }

    .footmenu {
        width:100%;
        border-top:2px solid #eee;
        padding:10px;
    }

    /* トップページの右段情報 */
    .mainNav {
        width:100%;
    }

    .mainNav li {
        width:40%;
        font-size:18px;
        height:65px;
        vertical-align: middle;
    }

    /* トップナビ */
    .topNavi {
        margin-right:0;
    }

    .topNaviColumn {
        display:block;
        box-sizing:border-box;
        width:100%;
        float:none;
        margin-right:0;
        margin-bottom:10px;
    }

    /* ぱんくず */
    #breadId {
        width:100%;
        clear:both;
    }

    /* 教室・講師紹介 */
    #detailClass {
        width:100%;
        clear:both;
    }

    #detailClassABSelect {
        width:100%;
        clear:both;
    }

    .detailClassABSelectBoxA {
        width:30%;
        font-size:21px;
    }

    .detailClassABSelectBoxB {
        width:30%;
        font-size:21px;
    }

    .detailClassTeacher {
        width:100%;
        clear:both;
    }

    .detailClassTeacherImg {
        width:100%;
        clear:both;
    }

    .detailClassTeacherText {
        width:100%;
        clear:both;
    }

    .detailClassMain {
        width:100%;
        clear:both;
    }
    .detailClassAside {
        width:100%;
        clear:both;
    }

    .detailClassSchool {
        box-sizing:border-box;
        width:100%;
        clear:both;
        display: inline-block;
    }
    .detailClassSchoolImg {
        clear:both;
        width:100%;
        margin-right: 0 auto;
        text-align: center;
    }
    .detailClassSchoolText {
        width:100%;
        clear:both;
    }
    .detailClassSchoolTextSub {
        width:100%;
        clear:both;
    }

    /* 記事ページ */
    #articlePage {
        width:100%;
        clear:both;
    }
    .articlePageMain {
        width:100%;
        clear:both;
    }
    .articlePageAside {
        width:100%;
        clear:both;
    }
    .articlePageSummary {
        box-sizing:border-box;
        width:100%;
        clear:both;
    }

    /* 検索結果・コンテンツリストページ */
    #listPage {
        width:100%;
        clear:both;
    }
    .listPageMain {
        width:100%;
        clear:both;
    }
    .listPageAside {
        width:100%;
        clear:both;
    }

    /* 問い合わせページ */
    #contactPage {
        width:100%;
        clear:both;
    }
    .contactPageMain {
        width:100%;
        clear:both;
    }
    .contactPageAside {
        width:100%;
        clear:both;
    }

}