@charset "UTF-8";
/**
 * 教えて！かんでん過去の特集一覧ページ用CSS
 * /brand/for_kids/teach/archive/index.html
*/
.teach-header {
  min-height: 220px;
  height: auto;
}

.section-title {
  padding: 12px;
  background: url('/brand/for_kids/teach/images/bg_qa_title.gif') repeat;
}

.dialog {
  margin-bottom: 30px;
  overflow: hidden;
  *zoom: 1;
}
.dialog-speaker {
  width: 17.70833%;
}
.boy .dialog-speaker, .girl .dialog-speaker {
  float: left;
  text-align: right;
}
.doctor .dialog-speaker {
  float: right;
  text-align: left;
}
.dialog-content {
  position: relative;
  border-width: 5px;
  border-style: solid;
  border-radius: 10px;
  padding: 36px 4.28135%;
  width: 73%;
}
.boy .dialog-content {
  float: right;
  background: #F6FCFC;
  border-color: #CEEDF0;
}
.girl .dialog-content {
  float: right;
  background: #FFFAFB;
  border-color: #FDD6DA;
}
.doctor .dialog-content {
  float: left;
  background: #F9FCF7;
  border-color: #D1E7C1;
}
.dialog-content:before {
  position: absolute;
  content: '';
  display: block;
}
.boy .dialog-content:before {
  top: 45px;
  left: -40px;
  width: 40px;
  height: 39px;
  background: url('/brand/for_kids/teach/images/bg_balloon_triangle_boy.gif') no-repeat;
}
.girl .dialog-content:before {
  left: -40px;
  top: 45px;
  width: 40px;
  height: 39px;
  background: url('/brand/for_kids/teach/images/bg_balloon_triangle_girl.gif') no-repeat;
}
.doctor .dialog-content:before {
  right: -40px;
  top: 45px;
  width: 40px;
  height: 39px;
  background: url('/brand/for_kids/teach/images/bg_balloon_triangle_doctor.gif') no-repeat;
}

@media print, screen and (min-width: 768px) {
  .teach-header {
    height: 250px;
    margin-bottom: 30px;
  }

  .section-title {
    font-size: 157%;
    font-weight: normal;
    padding: 15px 20px;
  }

  .dialog-content {
    width: 68.125%;
  }
  .dialog-content:before {
    position: absolute;
    content: '';
    display: block;
  }
}