@charset "UTF-8";
/* CSS Document */
/* =======================================================================================================

　ハンバーガーicon  ドロワー

========================================================================================================== */
/*表示位置はheaderhtml内のFlexで括ってある*/
.hamburger {
  display: block;
/*ポジションheader.cssに記載*/
  width: 30px;
  height: 42px;/*位置調整あり*/
  cursor: pointer;
  text-align: center;
  border: solid 0px;
}
/* ライン
-------------------------------------------------------------------------*/
.hamburger span {
  display: block;
  position: relative; /*通常の位置を基準に相対位置を指定*/
  /*position: absolute;*/ /*親要素基準*/
  width: 30px;
  height: 2px;
  /*left: 0px;*/
  background: #555;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

/* ライン位置
-------------------------------------------------------------------------*/
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン　×icon
-------------------------------------------------------------------------*/
.hamburger.active {
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  width: 0px;
}
.hamburger.active span:nth-child(1), .hamburger.active span:nth-child(3) {
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.hamburger.active span:nth-child(1) {
  -webkit-transform: translateY(12px);
  -ms-transform: translateY(12px);
  -o-transform: translateY(12px);
  transform: translateY(12px);
}
.hamburger.active span:nth-child(3) {
  -webkit-transform: translateY(-12px) rotate(90deg);
  -ms-transform: translateY(-12px) rotate(90deg);
  -o-transform: translateY(-12px) rotate(90deg);
  transform: translateY(-12px) rotate(90deg);
}

/*


*/
/* =======================================================================================================

　グローバルメニュー内容

========================================================================================================== */
nav.globalMenuSp {
  /*ポジションheader.cssに記載*/
  color: #000;
  /*background: #fff;*/
    background: #ccc;
  text-align: center;
  transform: translateX(100%);
  transition: all .9s;
    width: 100%;
  max-width: 500px;
    padding-top: 30px;
     height: 100%;
 overflow: auto;
 -webkit-overflow-scrolling: touch;
}
/*　リスト全体------------*/
nav.globalMenuSp .menu_list{
    width: 90%;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 10px;
  
}
/*　＜特別挿入＞
　　ご利用案内にも講座事前申し込みを入れ囲みをつける------------*/
nav.globalMenuSp .menu_list .moushikomi{
 width: 250px;
padding:3px;
   border: solid 1px
}

nav.globalMenuSp a {
  text-decoration: none;
  color: #1D1C1C;
}
nav.globalMenuSp a:hover {
  color: #E44040;
}

/*　トップページへ------------*/
nav.globalMenuSp .menu_list .home{
 font-size: 1rem;
 line-height: 26px;
 text-align: left;
 margin-bottom: 10px;
 padding-bottom: 10px;
 border-bottom: solid 1px #ffffff;
}
/*　分類タイトル------------*/
nav.globalMenuSp .menu_list .title{
    text-align: left;
    font-size: 1.2rem;
    margin-bottom: 10px;
    padding-bottom: 10px;
      border-bottom: solid 1px #ffffff;
}


nav.globalMenuSp .title {
  text-align: center;
  vertical-align: middle;
  font-size: 1.4rem;
  font-family: a-otf-jun-pro, sans-serif;
  font-weight: 300;
  margin-bottom: 30px;
  color: #000000;
  border: solid 0px;
}

nav.globalMenuSp .title img{ /*icon*/
  /*width: 50px;*/
  width: 100%; /*IEのsvg対応100%指定必須*/
  max-width: 50px; /*IEのsvg対応*/
  min-width: 30px; /*IEのsvg対応*/
  margin-right: 18px;
  vertical-align: middle;
  border: solid 0px;
}
/*　リスト　column_1boxは1段カラム　column_2boxは2段　.column_3boxは3段------------*/
nav.globalMenuSp .menu_list .column_1box, .menu_list .column_2box, nav.globalMenuSp .menu_list .column_3box {
  column-rule-style: solid;
  column-gap: 40px;
  column-rule-width: 0px;
  column-rule-color: #ffffff;
    margin-top: 0px;
  margin-bottom: 30px;
  font-size: 1rem;
  line-height: 26px;
    text-align: left;
  border: solid 0px;
}
nav.globalMenuSp .menu_list .column_2box {/*1カラム*/
  column-count: 1;
}
nav.globalMenuSp .menu_list .column_2box {/*2カラム*/
  column-count: 2;
}
nav.globalMenuSp .menu_list .column_3box {/*3カラム*/
  column-count: 3;
}
nav.globalMenuSp .break-before{/*カラム強制改行*/
 break-before: column;   
}
nav.globalMenuSp .break-after{/*カラム改行させない カラムをまたぐ場合がある*/
 break-after: column;   
}



.nabi_hight{
    height: 100px;
}



/* =======================================================================================================

　このクラスを、jQueryで付与・削除する

========================================================================================================== */
nav.globalMenuSp.active {
  transform: translateX(0%);
}
/* ディバイスサイズ設定
   （全体レイアウトcontainer、main_areaはlayout.cssに記載）
======================================================================================================= */
/* スマホ用 */
@media (max-width: 749px) {

}
/* タブレット用 */
@media (min-width: 750px) and (max-width: 1023px) {


}

/* デスクトップ用------------------------------- */
@media (min-width: 1024px) {
 
}