body {
  background: #fff9eb url("../images/header-bg.gif") repeat-x center top;
}

@media only screen and (min-width: 768px) {
  body {
    margin: 0 auto;
    width: 320px;
  }
}

/* header */
/* ------------------------------ */
header {
  margin-bottom: 0;
  border-bottom: none;
}

/* footer */
/* ------------------------------ */
footer {
  background: #292829;
}

footer #copy {
  padding: 2px 0 0;
}

/* main */
/* ------------------------------ */
#main .studentA {
  color: #308656;
}

#main .studentA02 {
  color: #20c467;
}

#main .studentB {
  color: #c2355f;
}

#main .studentB02 {
  color: #f15e8a;
}

#main .studentC {
  color: #a6a201;
}

#main .studentC02 {
  color: #99d517;
}

#main .teacher {
  color: #eb9002;
}

#main .all {
  color: #1d8cd9;
}

#main .modBtn {
  position: relative;
  margin: 12px -1px 0;
}

#main .modBtn a {
  display: block;
  margin: 0 auto;
  width: 302px;
  height: 38px;
  line-height: 38px;
  color: #6b5945;
  text-align: center;
  font-size: 16px;
  background: url(../../images/btn_01.jpg) no-repeat 0 0;
  background-size: contain;
}

#main .modPagetop {
  padding: 4px 0 18px;
}

#main .modPagetop:after {
  display: block;
  clear: both;
  content: '';
  overflow: hidden;
}

#main .modPagetop a {
  float: right;
  display: block;
  padding-top: 44px;
  width: 44px;
  height: 0;
  text-indent: 200%;
  background: url(../../images/ico_pagetop_01.jpg) no-repeat 0 0;
  background-size: contain;
  overflow: hidden;
}

/* modHeader */
/* ------------------------------ */
#main {
  line-height: 1.75;
  color: #6b5945;
}

#main .modHeader {
  position: relative;
  margin: 0 -10px;
  padding: 3px 10px 6px;
  line-height: 1.55;
  font-size: 17px;
  font-weight: normal;
  color: #FFFFFF;
  background: #9bc761;
}

#main .modHeader span {
  font-size: 13px;
}

/* modVisual */
/* ------------------------------ */
#main .modVisual {
  position: relative;
  margin: 0 -10px;
}

#main .modVisual img {
  width: 100%;
  height: auto;
}

/* modHeader */
/* ------------------------------ */
#main .modPageHeader {
  padding: 4px 0 0;
}

#main .modPageHeader h3 {
  margin: 0 0 16px;
  text-align: center;
}

#main .modPageHeader h3 img {
  margin: 0 0 0 -1px;
  width: 301px;
  height: auto;
}

#main .modPageHeader .txt {
  padding: 0 20px;
}

/* modProf */
/* ------------------------------ */
#main .modProf {
  position: relative;
  margin: 0 -10px;
  margin: 12px 0 0;
  padding: 24px 0 23px;
  background: url(../../images/bg_border_01.jpg) no-repeat 50% 0;
  background-size: 300px auto;
}

#main .modProf .ttl {
  margin: 0 0 16px;
  font-size: 15px;
  color: #ecbd00;
}

#main .modProf .ttl:before {
  content: '';
  position: relative;
  top: -1px;
  display: inline-block;
  margin: 0 7px 0 0;
  vertical-align: middle;
  width: 24px;
  height: 14px;
  background: url(../../images/ico_leaf_01.jpg) no-repeat 0 0;
  background-size: contain;
}

#main .modProf .unit {
  position: relative;
  padding: 16px 135px 16px 20px;
  border-radius: 3px;
}

#main .modProf .unit.studentAUnit {
  background: #FFF url(../../images/bg_prof_01.jpg) no-repeat 100% 100%;
  background-size: 153px auto;
}

#main .modProf .unit.studentBUnit {
  background: #FFF url(../../images/bg_prof_02.jpg) no-repeat 100% 100%;
  background-size: 183px auto;
}

#main .modProf .unit.studentCUnit {
  background: #FFF url(../../images/bg_prof_03.jpg) no-repeat 100% 100%;
  background-size: 128px auto;
}

#main .modProf .unit.teacherUnit {
  background: #FFF url(../../images/bg_prof_04.jpg) no-repeat 100% 100%;
  background-size: 132px auto;
}

#main .modProf .unit + .unit {
  margin: 20px 0 0 0;
}

#main .modProf .unit dt {
  position: relative;
  margin: 0 0 11px;
  padding: 0 0 0 28px;
}

#main .modProf .unit dt:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  margin: -11px 0 0 0;
  vertical-align: middle;
  width: 23px;
  height: 21px;
  background: url(../../images/ico_flower_01.jpg) no-repeat 0 50%;
  background-size: contain;
}

#main .modProf .unit .studentB:before {
  height: 19px;
  background-image: url(../../images/ico_leaf_02.jpg);
}

#main .modProf .unit .studentC:before {
  margin: -12px 0 0 0;
  height: 22px;
  background-image: url(../../images/ico_ribbon_01.jpg);
}

#main .modProf .unit .teacher:before {
  margin: -13px 0 0 0;
  height: 24px;
  background-image: url(../../images/ico_tree_01.jpg);
}

#main .modProf .unit .txt {
  letter-spacing: 0.02em;
  font-size: 14px;
}

/* modSection */
/* ------------------------------ */
#main .modSection .ttlA {
  position: relative;
  margin: 0 -10px;
}

#main .modSection .ttlA img {
  width: 100%;
  height: auto;
}

#main .modSection .ttlB {
  position: relative;
  margin: 15px 0 -4px 1.5em;
  text-indent: -1.5em;
  color: #6b5945;
}

#main .modSection .modBody {
  position: relative;
  margin: 0 -10px;
  padding: 0 10px 14px;
}

#main .modSection .modBody.isLine {
  padding: 16px 10px 14px;
  background: url(../../images/bg_border_02.jpg) no-repeat 50% 0;
  background-size: 99px auto;
}

#main .modSection .unit dt {
  display: table-cell;
  padding: 15px 0 0;
  width: 7em;
}

#main .modSection .unit .txt {
  display: table-cell;
  padding: 15px 0 0;
}

#main .modSection .msg {
  margin: 15px 0 0;
}