/*   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   */
body {
  width: 640px;
  height: 100%;
}

div#root {
  width: 100%;
  min-width: 640px;
  background: #d0f2e4;
}

/*   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   */
div.note {
  background: url(./../../common/img/textline_45.png);
  color: #5b9647;
  font-size: 21px;
  line-height: 45px;
  vertical-align: text-bottom;
  letter-spacing: 0px;
  padding-top: 2px;
  white-space: nowrap;
  text-align: left;
  width: 520px;
  margin: 0 auto;
}

span.marker {
  background: #FF0;
  padding-top: 2px;
  padding-bottom: 1px;
}

/*   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   */
h1 {
  width: 585px;
  height: 179px;
  background: url(./../../common/img/titleboard.png);
  margin: 0 auto;
  text-align: center;
}
h1 img {
  left: 96px;
  top: 87px;
}

h2, h3, h4 {
  width: 100%;
  text-align: center;
  line-height: 0px;
}

/*   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   */
.slider {
  overflow: hidden;
}

.menu,
.article {
  width: 100%;
  border-top: solid 1px transparent;
  border-bottom: solid 1px transparent;
}

.menu h3 {
  margin: 21px auto 15px auto;
}
.menu .img {
  display: block;
  margin: 0px auto 0px auto;
}
.menu .note {
  margin: 20px auto 45px auto;
}
.menu ul {
  margin: 0px auto 0px auto;
  padding: 30px 0px 23px 0px;
  background: url(./../img/bg_note.png);
  width: 516px;
  border: dotted 2px #5b9647;
}
.menu ul li {
  text-align: center;
  margin-bottom: 10px;
}
.menu ul li:last-child {
  margin-bottom: 0px;
}

/*   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   */
.article.i-1 h2 {
  margin: 24px auto 18px auto;
}
.article.i-1 .intro .img {
  margin: 92px 0px 0px 63px;
}
.article.i-1 .intro .note {
  margin: 35px 58px 62px 0px;
  width: 315px;
  float: right;
}
.article.i-1 .report {
  border-top: solid 1px transparent;
  width: 520px;
  background: url(./../img/bg_note.png);
  margin: 0px auto 59px auto;
  padding-bottom: 49px;
}
.article.i-1 .report .note {
  width: 430px;
}
.article.i-1 .report .test h4 {
  margin: 36px auto 22px auto;
}
.article.i-1 .report .test .img {
  display: block;
  margin: 0px auto 0px auto;
}
.article.i-1 .report .test .note {
  margin: 31px auto 32px auto;
}
.article.i-1 .report .result {
  margin: 0px auto 0px auto;
}
.article.i-1 .report .result h4 {
  margin: 0px auto 14px auto;
}
.article.i-1 .report .result .note {
  margin: 18px auto 0px auto;
}
.article.i-1 .report .result .img {
  margin: 0px auto 0px auto;
  width: 158px;
  height: 169px;
}
.article.i-1 .report .result .img img {
  position: absolute;
}
.article.i-1 .report .result .img img.kirakira.i-1 {
  left: -4px;
  top: 16px;
}
.article.i-1 .report .result .img img.kirakira.i-2 {
  left: -30px;
  top: 42px;
}
.article.i-1 .report .result .img img.kirakira.i-3 {
  left: 180px;
  top: 80px;
}
.article.i-1 .report .result .img img.kirakira.i-4 {
  left: 155px;
  top: 106px;
}
.article.i-1 .conclusion {
  border-top: solid 1px transparent;
  width: 520px;
  background: url(./../img/bg_note.png);
  margin: 0px auto 33px auto;
  padding-bottom: 49px;
}
.article.i-1 .conclusion h3 {
  top: -27px;
  margin-bottom: -27px;
}
.article.i-1 .conclusion .img {
  display: block;
  margin: 25px auto 27px auto;
}
.article.i-1 .conclusion .note {
  width: 430px;
}

/*   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   */
.article.i-2 h2 {
  margin: 24px auto 18px auto;
}
.article.i-2 > h3 {
  margin: 14px auto 39px auto;
}
.article.i-2 .report {
  border-top: solid 1px transparent;
  width: 520px;
  background: url(./../img/bg_note.png);
  margin: 0px auto 59px auto;
  padding-bottom: 49px;
}
.article.i-2 .report .note {
  width: 430px;
}
.article.i-2 .report .test h4 {
  margin: 36px auto 26px auto;
}
.article.i-2 .report .test .img {
  display: block;
  margin: 0px auto 0px auto;
}
.article.i-2 .report .test .note {
  margin: 31px auto 32px auto;
}
.article.i-2 .report .result {
  margin: 0px auto 0px auto;
}
.article.i-2 .report .result h4 {
  margin: 0px auto 29px auto;
}
.article.i-2 .report .result .note {
  margin: 19px auto 0px auto;
}
.article.i-2 .report .result .img {
  margin: 0px auto 0px auto;
  width: 333px;
  height: 183px;
}
.article.i-2 .report .result .img img {
  position: absolute;
}
.article.i-2 .report .result .img img.kirakira.i-1 {
  left: -4px;
  top: 16px;
}
.article.i-2 .report .result .img img.kirakira.i-2 {
  left: -30px;
  top: 42px;
}
.article.i-2 .report .result .img img.kirakira.i-3 {
  left: 315px;
  top: 0px;
}
.article.i-2 .report .result .img img.kirakira.i-4 {
  left: 340px;
  top: 26px;
}
.article.i-2 .conclusion {
  border-top: solid 1px transparent;
  width: 520px;
  background: url(./../img/bg_note.png);
  margin: 0px auto 33px auto;
  padding-bottom: 49px;
}
.article.i-2 .conclusion h3 {
  top: -27px;
  margin-bottom: -27px;
}
.article.i-2 .conclusion .img {
  display: block;
  margin: 38px auto 33px auto;
}
.article.i-2 .conclusion .note {
  width: 430px;
}

/*   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   */
.article.i-3 h2 {
  margin: 24px auto 18px auto;
}
.article.i-3 > h3 {
  margin: 14px auto 39px auto;
}
.article.i-3 .report {
  border-top: solid 1px transparent;
  width: 520px;
  background: url(./../img/bg_note.png);
  margin: 0px auto 59px auto;
  padding-bottom: 49px;
}
.article.i-3 .report .note {
  width: 430px;
}
.article.i-3 .report .test h4 {
  margin: 36px auto 20px auto;
}
.article.i-3 .report .test .img {
  display: block;
  margin: 0px auto 0px auto;
}
.article.i-3 .report .test .note {
  margin: 17px auto 47px auto;
}
.article.i-3 .report .result {
  margin: 0px auto 0px auto;
}
.article.i-3 .report .result h4 {
  margin: 0px auto 22px auto;
}
.article.i-3 .report .result .img {
  display: block;
  margin: 0px auto 0px auto;
}
.article.i-3 .report .result .note {
  margin: 26px auto 0px auto;
}
.article.i-3 .conclusion {
  border-top: solid 1px transparent;
  width: 520px;
  background: url(./../img/bg_note.png);
  margin: 0px auto 33px auto;
  padding-bottom: 49px;
}
.article.i-3 .conclusion > h3 {
  top: -27px;
  margin-bottom: -27px;
}
.article.i-3 .conclusion .note {
  margin: 32px auto 35px auto;
  width: 430px;
}
.article.i-3 .conclusion .point {
  width: 426px;
  background: url(./../img/bg_greenboard.png);
  border-top: solid 1px transparent;
  padding-bottom: 51px;
  margin: 0px auto 0px auto;
}
.article.i-3 .conclusion .point > h3 {
  margin: 29px auto 0px auto;
}
.article.i-3 .conclusion .point hr {
  margin: 34px auto 35px auto;
  border: none;
  border-top: dotted 2px #FFF;
  width: 100px;
}
.article.i-3 .conclusion .point .text {
  display: block;
  margin: 0px auto 0px auto;
}

/*   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   */
.navi {
  width: 520px;
  margin: 25px auto 0px auto;
  color: #5b9647;
  font-size: 24px;
  line-height: 44px;
  text-align: right;
}
.navi .to-next span,
.navi .to-prev span,
.navi .to-menu span {
  line-height: 31px;
  display: inline-block;
  border-bottom: solid 1px #5b9647;
}

/*   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   */
.apppend-sub-navi {
  margin-bottom: 45px;
}

/*   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   -   */