@charset "UTF-8";
@import url(../base/init.css);
@import url(../base/style.css);
@import url(../piece/style.css);


/*******************************************************************************
#1  オーバーライド：メインナビゲーション
*******************************************************************************/
#headerMainNavi {
  margin-bottom: 0;
}


/*======================================
#2 スマートフォン用
======================================*/
@media screen and (max-width: 640px) {
  #headerMainNavi {
    margin-bottom: 1em;
  }
}




/*******************************************************************************
#1  オーバーライド：メイン
*******************************************************************************/
#main {
  width: 100%;
  float: none;
  margin-bottom: 2em;
}
#mainContainer {
  width: 96%;
  margin-right: auto;
  margin-left: auto;
}




/*******************************************************************************
#1  オーバーライド：サイド
*******************************************************************************/
#side {
  width: 100%;
  float: none;
  margin-bottom: 2em;
}
#sideContainer {
  width: 96%;
  margin-right: auto;
  margin-left: auto;
}

/* バナー */
#sideBanner {
  text-align: left;
}
#sideBanner li {
  float: left;
  margin: 0 1em 1em 0;
}
@media screen and (max-width: 640px) {
  #sideBanner li {
    float: none;
    margin: 0 0 0.5em 0;
  }
}




/*******************************************************************************
#1  コース
*******************************************************************************/
#baseTitle .course {
  margin: 0 auto 0;
  max-width: 943px;;
  position: relative;
  top: -3em;
}

#baseTitle .course h2 {
  color: #fff;
  background: #6FBF00;
  text-align: center;
  padding: 0.5em;
  margin: 0 0 1em 0;
}

#baseTitle .course ul {
  margin: 15px 0 0 50px;
  padding: 0;
}
#baseTitle .course ul li {
  margin: 0;
  padding: 0 0 0 10px;
  list-style: url(images/menu_ul_mark.gif);
  color:#005332;
}

#baseTitle .course .menu-left  {
  background:url(images/menu_about.gif) top no-repeat;
  width: 314px;
  height: 341px;
  float: left;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
    }
#baseTitle .course .menu-center  {
  background:url(images/menu_area.gif) top no-repeat;
  width: 315px;
  height: 341px;
  float: left;
  padding: 0 0 0 0;
  margin: 0;
    }
#baseTitle .course .menu-right  {
  background:url(images/menu_family.gif) top no-repeat;
  width: 314px;
  height: 341px;
  float: right;
  padding: 0 0 0 0;
  margin: 0;
    }

#baseTitle .course p.menu-btn  {
  width: 314px;
  margin: 0;
  padding:0;
    }


/*======================================
#2 スマートフォン用
======================================*/
@media screen and (max-width: 640px) {
  #baseTitle .course {
     top: 0;
   position: relative;
   padding: 0 0 0.5em 0;
    margin: 0 auto 0;
    width: 100% !important;

  }
  
  #baseTitle .course ul li {
    float: none;
    width: 50% !important;
    margin: 0 0 0.5em 0
  }
}






/*******************************************************************************
#1	main
*******************************************************************************/

#main p.bn-catch {
  margin: 0 auto 0;
  margin-bottom: 4.5em;
  text-align: center;
}

#main .box-list  {
  width: 900px;
  padding-top: 20px;
  margin: 0 auto 0;
  position: relative;
}


#main .box-list .box-left  {
  width: 300px;
  float: left;
  padding: 0 0 0 20px;
  margin: 0 0 1.0em 0;
  font-size: 0.9em;
  line-height: 150%;
    }
#main .box-list .box-center  {
  width: 300px;
  float: left;
  padding: 0 0 0 20px;
  margin: 0 0 1.0em 0;
  font-size: 0.9em;
  line-height: 150%;
    }
#main .box-list .box-right  {
  width: 300px;
  float: right;
  padding: 0 0 0 20px;
  margin: 0 0 1.0em 0;
  font-size: 0.9em;
  line-height: 150%;
    }

#main .box-list h4  {
  padding: 3px 0 0 15px;
  border-left: #939393 solid 5px;
  color: #6FBF00;
  font-size:120%;
  font-weight: bold;
  margin: 0 0 0.5em 0;
    }
#main h3.h3-info  {
  color: #fff;
  background: #666666;
  font-size:120%;
  font-weight: bold;
  margin: 0 0 0.5em 0;
  padding: 10px;
    }


#main .box-fab  {
  width: 100%;
  padding: 1.5em 1.0em 2.0em 1.0em ;
  margin: 0 auto 2.5em;
  border: solid #AFDC72 2px;
  background-color:#F9FDFA;
  position: relative;
}


#main .box-fab h3  {
  padding: 3px 0 0 15px;
  color: #6FBF00;
  font-size:120%;
  font-weight: bold;
  margin: 0 0 0.5em 0;
    }

#main .box-fab ul  {
  margin: 10px 0 0 30px;
  padding: 0 0 0 0;
    }

#main .box-fab ul li  {
  margin: 0 20px 0 30px;
  padding: 0 0 0 5px;
  list-style: square;
  color:#005332;
  float: left;
    }


/*======================================
#2 スマートフォン用
======================================*/
@media screen and (max-width: 640px) {
#main .box-list .box-left   {
  width: 100%;
  float: none;
  padding: 0;
  margin: 0 0 1.5em 0;
    }
#main .box-list .box-center  {
  width: 100%;
  float: none;
  padding: 0;
  margin: 0 0 1.5em 0;
    }
#main .box-list .box-right  {
  width: 100%;
  float: none;
  padding: 0;
  margin: 0 0 1.5em 0;
    }

}


