@charset "UTF-8";
@import url(reset.css);
@import url(base.css);
@import url(layout.css);
@import url(inpage.css);
@import url(system.css);

/*  Top Contents
-----------------------------------------------------------------------------*/
#mainVisual {
  padding-bottom: 10px;
  width: 877px;
}

#mainVisual:after {
  height: 0;
  display: block;
  clear: both;
  content: " ";
}

#mainVisual .topFlash {
  width: 356px;
  float: left;
}

#mainVisual img {
  width: 519px;
  float: right;
}

#searchInstruments {
  width: 432px;
  background: url(/common/images/box_bg01.gif) no-repeat left bottom;
  float: left;
}

#searchInstruments h2 {
  text-indent: -9999px;
  height: 43px;
  background: url(/common/images/st-out-instruments.gif) no-repeat left top;
}

#searchInstruments h2 a {
  width: 432px;
  height: 43px;
  display: block;
}

#searchInstruments h2 a:hover {
  width: 432px;
  height: 43px;
  display: block;
  background: url(/common/images/st-on-instruments.gif) no-repeat left top;
}

#searchInstruments h3 {
  font-size: 86%;
  font-weight: normal;
  text-align: right;
  width: 209px;
  height: 120px;
  float: left;
}

#searchInstruments h3.acoustic { background: url(/common/images/search_acoustic.jpg) no-repeat 14px center; }
#searchInstruments h3.electric { background: url(/common/images/search_electric.jpg) no-repeat 14px center; }
#searchInstruments h3.ukulele { background: url(/common/images/search_ukulele.jpg) no-repeat 14px center; }
#searchInstruments h3.saxophone { background: url(/common/images/search_saxophone.jpg) no-repeat 14px center; }
#searchInstruments h3.piano { background: url(/common/images/search_piano.jpg) no-repeat 14px center; }
#searchInstruments h3.violin { background: url(/common/images/search_violin.jpg) no-repeat 14px center; }

#searchInstruments h3 a {
  padding: 90px 15px 0 0 ;
  width: 194px;
  height: 30px;
  display: block;
  background: url(/common/images/icon06.gif) no-repeat right 93px;
}

#searchInstruments p {
  padding: 14px 0 14px 14px;
  clear: both;
}

#searchInstruments dl {
  margin: 14px auto ;
  padding: 10px 0;
  width: 404px;
  background: #fff;
}

#searchInstruments dd { padding: 0 10px 0 30px; }

#searchInstruments dt {
  padding: 0 10px 0 30px;
  background: url(/common/images/icon_exclamation.gif) no-repeat 8px top;
}

#searchInstruments dt img { margin-left: 5px; }

.con_right {
  width: 432px;
  float: right;
}

#searchPurpose {
  margin-bottom: 10px;
  padding-bottom: 1px;
  width: 432px;
  background: url(/common/images/box_bg01.gif) no-repeat left bottom;
}

#searchPurpose h2 {
  text-indent: -9999px;
  height: 43px;
  background: url(/common/images/st-out-purpose.gif) no-repeat left top;
}

#searchPurpose h2 a {
  width: 432px;
  height: 43px;
  display: block;
}

#searchPurpose h2 a:hover {
  width: 432px;
  height: 43px;
  display: block;
  background: url(/common/images/st-on-purpose.gif) no-repeat left top;
}

#searchPurpose dl {
  margin: 0 auto;
  width: 430px;
}

#searchPurpose dt {
  padding: 0 5px 15px 25px;
  position: absolute;
}

#searchPurpose dd {
  line-height: 1.5em;
  padding: 0 30px 15px 110px;
  background: url(/common/images/purpose_bg.gif) repeat-x left bottom;
}

#searchPurpose dd h3 {
  font-size: 120%;
  line-height: 2.0em;
  padding: 15px 0 0 20px;
  background: url(/common/images/icon04.gif) no-repeat left 20px;
}

#topVoice {
  padding-bottom: 10px;
  width: 432px;
  background: url(/common/images/box_bg04.gif) no-repeat left bottom;
}

#topVoice:after {
  height: 0;
  display: block;
  clear: both;
  content: " ";
}

#topVoice h2 {
  text-indent: -9999px;
  width: 143px;
  height: 109px;
  background: url(/common/images/members_voice_title.gif) no-repeat 10px top;
  float: left;
}

#topVoice h2 a {
  width: 133px;
  height: 109px;
  display: block;
}

#topVoice .fr {
  padding-right: 7px;
  float: right;
}

#topVoice p.comment {
  padding: 10px 10px 0;
  clear: both;
}

#topVoice p.btn {
  text-align: right;
  margin-bottom: 5px;
  padding-right: 10px;
}

.topContents_left02 {
  padding-top: 15px;
  width: 643px;
  float: left;
}

#topFaq, #topInfo {
  margin-bottom: 14px;
  padding-bottom: 14px;
  width: 643px;
  background: url(/common/images/box_bg02.gif) no-repeat left bottom;
}

#topFaq:after {
  height: 0;
  display: block;
  clear: both;
  content: " ";
}

#topFaq h2 {
  text-indent: -9999px;
  height: 43px;
  background: url(/common/images/st-out-faq.gif) no-repeat left top;
}

#topFaq h2 a, #topInfo h3 a {
  width: 642px;
  height: 43px;
  display: block;
}

#topFaq h2 a:hover { background: url(/common/images/st-on-faq.gif) no-repeat left top; }

#topFaq div {
  margin: 10px auto 0;
  width: 616px;
}

#topFaq dl.lesson {
  margin: 0 0 10px 0;
  padding: 0 0 10px;
  width: 278px;
  background: #f2f2f2;
  float: left;
}

#topFaq dl.lesson dt, #topFaq dl.qbox dt {
  font-size: 120%;
  font-weight: bold;
  padding: 0px 0 5px 15px;
  background: url(/common/images/icon05.gif) no-repeat left 5px #fff;
}

#topFaq dl.lesson dd {
  line-height: 1.6em;
  padding: 5px 10px 5px 25px;
  border-bottom: 1px dotted #dcdbdb;
  background: url(/common/images/icon01.gif) no-repeat 10px 10px;
}

#topFaq dl.lesson dd.top {
  padding-top: 10px;
  background: url(/common/images/icon01.gif) no-repeat 10px 15px;
}

#topFaq dl.lesson dd.more {
  text-align: right;
  border-bottom: none;
  background-image: none;
}

#topFaq dl.qbox {
  padding-bottom: 10px;
  width: 328px;
  background: #f2f2f2;
  float: right;
}

#topFaq dl.qbox dd {
  line-height: 2.0em;
  padding: 0 0 0 60px;
}

#topFaq dl.qbox dd.gakuhu { background: url(/common/images/icon_qbox_gakuhu.gif) no-repeat 10px 5px; }
#topFaq dl.qbox dd.ocarina { background: url(/common/images/icon_qbox_ocarina.gif) no-repeat 10px 5px; }
#topFaq dl.qbox dd.piano { background: url(/common/images/icon_qbox_piano.gif) no-repeat 10px 5px; }
#topFaq dl.qbox dd.ukulele { background: url(/common/images/icon_qbox_ukulele.gif) no-repeat 10px 5px; }
#topFaq dl.qbox dd.sax { background: url(/common/images/icon_qbox_sax.gif) no-repeat 10px 5px; }
#topFaq dl.qbox dd.eg { background: url(/common/images/icon_qbox_eg.gif) no-repeat 10px 5px; }
#topFaq dl.qbox dd.cello { background: url(/common/images/icon_qbox_cello.gif) no-repeat 10px 5px; }
#topFaq dl.qbox dd.vocal { background: url(/common/images/icon_qbox_vocal.gif) no-repeat 10px 5px; }
#topFaq dl.qbox dd.flute { background: url(/common/images/icon_qbox_fl.gif) no-repeat 10px 5px; }

#topFaq dl.qbox dd.gakuhu a, #topFaq dl.qbox dd.ocarina a, #topFaq dl.qbox dd.piano a, #topFaq dl.qbox dd.ukulele a, #topFaq dl.qbox dd.vocal a, #topFaq dl.qbox dd.cello a, #topFaq dl.qbox dd.eg a, #topFaq dl.qbox dd.sax a, #topFaq dl.qbox dd.flute a {
  padding-right: 15px;
  background: url(/common/images/icon_blank.gif) no-repeat right center;
}

#topFaq dl.qbox dd.top {
  padding-top: 10px;
  background-position: 10px 15px;
}

#topFaq dl.qbox dd.aboutBox {
  line-height: 1.4em;
  margin: 10px auto 0;
  padding: 5px 10px;
  width: 288px;
  background: #fff;
}

#topFaq dl.qbox dd.aboutBox p {
  line-height: 2.0em;
  padding: 0 0 0 15px;
  background: url(/common/images/icon_arrow.gif) no-repeat left center;
}

#topFaq dl.qbox dd.aboutBox span {
  font-size: 86%;
  color: #767676;
  display: block;
}

#topInfo { clear: both; }

#topInfo h3 {
  text-indent: -9999px;
  height: 43px;
  background: url(/common/images/st-out-info.gif) no-repeat left top;
}

#topInfo h3 a:hover { background: url(/common/images/st-on-info.gif) no-repeat left top; }

#topInfo dl {
  margin: 10px auto 0;
  width: 600px;
}

#topInfo dt {
  padding: 10px 5px 10px 15px;
  background: url(/common/images/icon01.gif) no-repeat left center;
  position: absolute;
}

#topInfo dd {
  padding: 10px 0 10px 140px;
  border-bottom: 1px dotted #ccc;
}

#topInfo dd.last { border-bottom: none; }

#topRelated {
  padding-bottom: 30px;
  width: 643px;
  background: url(/common/images/box_bg03.gif) no-repeat left bottom;
}

#topRelated:after {
  height: 0;
  display: block;
  clear: both;
  content: " ";
}

#topRelated h4 {
  font-size: 120%;
  line-height: 40px;
  text-indent: 20px;
  background: url(/common/images/box_upper_related.gif) no-repeat left top;
}

#topRelated dl {
  padding: 10px 0 0 20px;
  width: 300px;
  float: left;
}

#topRelated dt {
  font-size: 120%;
  font-weight: bold;
  padding-bottom: 10px;
}

#topRelated dd {
  padding-left: 15px;
  background: url(/common/images/icon01.gif) no-repeat left center;
}

#topRelated dd a {
  padding-right: 15px;
  background: url(/common/images/icon_blank.gif) no-repeat right center;
}

.topContents_right02 {
  padding-top: 15px;
  width: 220px;
  float: right;
}

.topContents_right02 div.special {
  margin-bottom: 10px;
  padding: 7px 0;
  width: 220px;
  background: url(/common/images/special_bg.gif);
}

.topContents_right02 div.special h4 {
  text-indent: -9999px;
  margin: 0 auto;
  width: 206px;
  height: 36px;
  background: url(/common/images/special_title.gif) no-repeat ;
}

.topContents_right02 div.special dl {
  margin: 0 auto;
  width: 206px;
  background: #fff;
}

.topContents_right02 div.special dt, .topContents_right02 div.special dd { padding: 10px 0 0 5px; }
.topContents_right02 div.special dd p { padding: 5px; }
.topContents_right02 div.special dd p.more { text-align: right; }

#topBannerArea {
  margin-bottom: 10px;
  width: 220px;
}

#topBannerArea li span {
  font-size: 86%;
  line-height: 1.2em;
  padding: 3px 0 ;
}

#topBannerArea li img { margin-bottom: 2px; }

.redbold a, redbold a:hover, redbold a:visited {
  font-weight: bold;
  color: #ff0000;
  text-decoration: underline;
}