@charset "utf-8";
/* CSS Document */
/* kids_characters.css */
/*
 * window size
 * PC 768px--
 * tab 521px--767px
 * sp --520px
*/

/* -------------------------
  characters common
--------------------------*/

.char {
  background: url(/j/kids/characters/img/ill_lawn1.png) no-repeat;
  background-position: center bottom;
  padding: 1em;
}

.char .intro {
  line-height: 2;
}

.ruze .fl_box {
  justify-content: center;
  align-items: center;
}

.norisu .fl_box {
  justify-content: center;
  align-items: end;
}

.char .fl_inner:nth-of-type(2) {
  max-width:350px;
  margin-bottom: 3em;
}

.char .name {
  font-size: 1.7em;
  font-weight: bold;
  border-bottom: 3px solid #000;
}

table.prof {
  margin: 3em auto;
  font-size: 1.2em;
}

table.prof tr th {
  text-align: left;
  padding: 5px;
  width: 110px;
  color: #e94816;
}

table.prof tr td {
  padding: 6px;
}

.norisu .fl_inner:nth-of-type(3) {
  margin-bottom: 3em;
}

.matoirisu {
  max-width: 700px;
  margin: 0 auto 5em;
}

.matoirisu .fl_box {
  align-items: center;
}

.matoirisu .fl_inner {
  flex: 1;
}

.matoirisu .fl_inner .title {
  font-weight: bold;
  margin-bottom: 10px;
}

.matoirisu .fl_inner img {
  width: 100%;
}

.matoirisu .text {
  line-height: 2.1;
}

.separate_cloud {
  background: url(/j/kids/characters/img/ill_cloud_pc.png) no-repeat;
  height: 70px;
  background-position: center;
  margin-bottom: 3em;
}

.char_footer {
  margin-top: 4em;
}

.char_footer .separate_cloud {
  margin-bottom: 0;
}

.char_footer .char {
  padding: 1em 0;
}

.char_footer .btn_box {
  margin-bottom: 4em;
}

.footer_characters {
  background: url(/j/kids/characters/img/prof_characters.png) no-repeat;
  height: 190px;
}


@media (max-width: 767px) {/* tab */

  .ruze .fl_box,
  .norisu .fl_box {
    display: block;
    text-align: center;
  }
  .ruze .char,
  .norisu .char {
    text-align: center;
    background: unset;
  }
  .char .fl_inner:nth-of-type(1) {
    margin-bottom: 2em;
  }
  .char .fl_inner:nth-of-type(2) {
    max-width: unset;
  }
  .char .fl_inner:nth-of-type(3) {
    margin-bottom: 0;
  }
  table.prof {
    margin: 2em auto 4em;
  }

}

@media (max-width: 520px) {/* sp */

  .separate_cloud {
    background: url(/j/kids/characters/img/ill_cloud_sp.png) no-repeat;
    height: 80px;
    background-position: center;
  }
  .matoirisu .fl_box {
    display: block;
  }

}