@charset "UTF-8";
/* 考える塾の子どもたちスタイル */
/* children */
/* media query */
/* layout */
/* padding, margin */
/* headline */
/* color */
/* flex */
/* font */
/* other */
/* btn */
/* link */
/* 子どもたちの成功体験ビフォーアフター */
.children-btn {
  cursor: pointer; }

.parent-none {
  display: none; }

.parent-btn {
  cursor: pointer; }

.children-none {
  display: none; }

input[type="radio"] {
  display: none; }

#children #sub-navi dl dt,
.before_after #sub-navi dl dt {
  white-space: pre-wrap; }
#children #sub-navi dl dd ul li a span,
.before_after #sub-navi dl dd ul li a span {
  white-space: pre-wrap; }
#children #undercontents #section-first,
.before_after #undercontents #section-first {
  width: 90% !important;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  text-align: center !important; }
  #children #undercontents #section-first #check1:active + .beforeafter-ul,
  .before_after #undercontents #section-first #check1:active + .beforeafter-ul {
    display: none; }
  #children #undercontents #section-first .flex,
  .before_after #undercontents #section-first .flex {
    display: flex;
    justify-content: center;
    margin: auto;
    margin-bottom: 3em; }
    #children #undercontents #section-first .flex li,
    .before_after #undercontents #section-first .flex li {
      list-style: none;
      cursor: pointer; }
    #children #undercontents #section-first .flex label,
    .before_after #undercontents #section-first .flex label {
      margin: 2em;
      font-family: fot-tsukuardgothic-std, sans-serif;
      font-style: normal;
      color: #008CD6;
      font-size: 1.5em;
      font-weight: 700;
      text-decoration: none;
      padding-bottom: 0.1em;
      border-bottom: dashed 2px #008CD6;
      cursor: pointer;
      position: relative; }
      #children #undercontents #section-first .flex label input,
      .before_after #undercontents #section-first .flex label input {
        margin-right: 0.5em; }
      #children #undercontents #section-first .flex label .check,
      .before_after #undercontents #section-first .flex label .check {
        font-size: 16px;
        padding-left: 22px;
        position: relative; }
      #children #undercontents #section-first .flex label .check::before,
      .before_after #undercontents #section-first .flex label .check::before {
        background-color: white;
        border: 1px solid #008CD6;
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 14px;
        width: 14px; }
      #children #undercontents #section-first .flex label input[type="radio"]:checked + .check::before,
      .before_after #undercontents #section-first .flex label input[type="radio"]:checked + .check::before {
        background-color: #008CD6; }
      #children #undercontents #section-first .flex label input[type="radio"]:checked + .check::after,
      .before_after #undercontents #section-first .flex label input[type="radio"]:checked + .check::after {
        border-bottom: 2px solid white;
        border-right: 2px solid white;
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 4px;
        height: 11px;
        width: 6px;
        transform: rotate(40deg); }
    #children #undercontents #section-first .flex #children,
    .before_after #undercontents #section-first .flex #children {
      color: #FD9200;
      border-bottom: dashed 2px #FD9200; }
      #children #undercontents #section-first .flex #children .check::before,
      .before_after #undercontents #section-first .flex #children .check::before {
        border: 1px solid #FD9200; }
      #children #undercontents #section-first .flex #children input[type="radio"]:checked + .check::before,
      .before_after #undercontents #section-first .flex #children input[type="radio"]:checked + .check::before {
        background-color: #FD9200; }
    #children #undercontents #section-first .flex #parent,
    .before_after #undercontents #section-first .flex #parent {
      color: #FB4A4A;
      border-bottom: dashed 2px #FB4A4A; }
      #children #undercontents #section-first .flex #parent .check::before,
      .before_after #undercontents #section-first .flex #parent .check::before {
        border: 1px solid #FB4A4A; }
      #children #undercontents #section-first .flex #parent input[type="radio"]:checked + .check::before,
      .before_after #undercontents #section-first .flex #parent input[type="radio"]:checked + .check::before {
        background-color: #FB4A4A; }
    #children #undercontents #section-first .flex label:hover,
    .before_after #undercontents #section-first .flex label:hover {
      opacity: 0.6; }
  #children #undercontents #section-first .beforeafter-area-ul,
  .before_after #undercontents #section-first .beforeafter-area-ul {
    width: 100%;
    height: 100%;
    list-style: none;
    column-count: 2; }
    #children #undercontents #section-first .beforeafter-area-ul .children-area,
    .before_after #undercontents #section-first .beforeafter-area-ul .children-area {
      background-image: url(../img/common/bg_beforeafter_children.png);
      background-size: 100% 100%;
      background-repeat: no-repeat; }
      #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area,
      .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area {
        background-color: #EDEDED;
        border-radius: 15px;
        height: 100%; }
      #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area p,
      .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area p {
        font-size: 1.3em; }
        #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area p span,
        .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area p span {
          color: #FB8E4A;
          background: linear-gradient(transparent 50%, #FFE79B 50%, #FFE79B 100%); }
      #children #undercontents #section-first .beforeafter-area-ul .children-area .after-h2 span,
      .before_after #undercontents #section-first .beforeafter-area-ul .children-area .after-h2 span {
        color: #fff;
        background-color: #FB8E4A; }
    #children #undercontents #section-first .beforeafter-area-ul .parent-area,
    .before_after #undercontents #section-first .beforeafter-area-ul .parent-area {
      background-image: url(../img/common/bg_beforeafter_parent.png);
      background-size: 100% 100%;
      background-repeat: no-repeat; }
      #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area,
      .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area {
        background-image: url(../img/common/bg_before_parent.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 100%; }
      #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area p,
      .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area p {
        font-size: 1.3em; }
        #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area p span,
        .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area p span {
          color: #FB4A4A; }
      #children #undercontents #section-first .beforeafter-area-ul .parent-area .after-h2 span,
      .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .after-h2 span {
        color: #FB4A4A;
        border: solid 3px #FB4A4A;
        border-radius: 15px; }
        #children #undercontents #section-first .beforeafter-area-ul .parent-area .after-h2 span span,
        .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .after-h2 span span {
          border: none; }
    #children #undercontents #section-first .beforeafter-area-ul .children-area,
    #children #undercontents #section-first .beforeafter-area-ul .parent-area,
    .before_after #undercontents #section-first .beforeafter-area-ul .children-area,
    .before_after #undercontents #section-first .beforeafter-area-ul .parent-area {
      width: 100%;
      height: 100%;
      margin-bottom: 4%;
      display: inline-block; }
      #children #undercontents #section-first .beforeafter-area-ul .children-area img,
      #children #undercontents #section-first .beforeafter-area-ul .parent-area img,
      .before_after #undercontents #section-first .beforeafter-area-ul .children-area img,
      .before_after #undercontents #section-first .beforeafter-area-ul .parent-area img {
        width: 100%; }
      #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area,
      #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area,
      .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area,
      .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area {
        width: 100%;
        display: flex;
        padding: 6%; }
        #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area,
        #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area,
        .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area,
        .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area {
          width: 30%;
          display: flex;
          padding: 1.5em 1em 1em;
          margin-top: 1em; }
          #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area img,
          #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area img,
          .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area img,
          .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area img {
            width: 50%;
            height: 100%; }
          #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area dl,
          #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area dl,
          .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area dl,
          .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area dl {
            width: 100%; }
            #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area dl dt,
            #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area dl dt,
            .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area dl dt,
            .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area dl dt {
              display: flex; }
              #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area dl dt p,
              #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area dl dt p,
              .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area dl dt p,
              .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area dl dt p {
                font-size: 0.5em;
                text-align: right; }
                #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area dl dt p span,
                #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area dl dt p span,
                .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area dl dt p span,
                .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area dl dt p span {
                  font-size: 2em;
                  font-weight: bold; }
            #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area dl dd p,
            #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area dl dd p,
            .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area dl dd p,
            .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area dl dd p {
              font-size: 0.8em; }
        #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area,
        #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area,
        .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area,
        .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area {
          width: 70%; }
          #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area .after-h2,
          #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area .after-h2,
          .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area .after-h2,
          .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area .after-h2 {
            display: flex;
            background-image: none;
            font-size: 1.2em;
            padding: 0; }
            #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area .after-h2 span,
            #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area .after-h2 span,
            .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area .after-h2 span,
            .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area .after-h2 span {
              width: 55%;
              font-size: 0.9em;
              padding: 1em;
              margin-left: 5%;
              border-radius: 15px;
              line-height: 1.3;
              height: 100%;
              text-align: left; }
              #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area .after-h2 span span,
              #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area .after-h2 span span,
              .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area .after-h2 span span,
              .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area .after-h2 span span {
                font-size: 2em;
                font-weight: bold;
                padding: 0;
                margin: 0; }
            #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area .after-h2 img,
            #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area .after-h2 img,
            .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area .after-h2 img,
            .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area .after-h2 img {
              width: 40%;
              height: 100%; }
          #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area p,
          #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area p,
          .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area p,
          .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area p {
            font-family: vdl-penletter, sans-serif;
            margin-left: 5%; }
      #children #undercontents #section-first .beforeafter-area-ul .children-area .teacher-voice,
      #children #undercontents #section-first .beforeafter-area-ul .parent-area .teacher-voice,
      .before_after #undercontents #section-first .beforeafter-area-ul .children-area .teacher-voice,
      .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .teacher-voice {
        text-align: left;
        padding: 0 10% 6%; }
        #children #undercontents #section-first .beforeafter-area-ul .children-area .teacher-voice dt,
        #children #undercontents #section-first .beforeafter-area-ul .parent-area .teacher-voice dt,
        .before_after #undercontents #section-first .beforeafter-area-ul .children-area .teacher-voice dt,
        .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .teacher-voice dt {
          color: #22A26B;
          font-size: 1.3em;
          font-weight: bold;
          display: flex;
          align-items: center; }
          #children #undercontents #section-first .beforeafter-area-ul .children-area .teacher-voice dt img,
          #children #undercontents #section-first .beforeafter-area-ul .parent-area .teacher-voice dt img,
          .before_after #undercontents #section-first .beforeafter-area-ul .children-area .teacher-voice dt img,
          .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .teacher-voice dt img {
            width: 1.7em;
            height: 100%;
            padding-left: 0.5em; }

/* mobile */
@media screen and (max-width: 575px) {
  #children #undercontents #section-first .flex,
  .before_after #undercontents #section-first .flex {
    display: block;
    margin-left: 0; }
    #children #undercontents #section-first .flex li,
    .before_after #undercontents #section-first .flex li {
      text-align: left;
      margin: 0.5em 0; }
  #children #undercontents #section-first .beforeafter-area-ul,
  .before_after #undercontents #section-first .beforeafter-area-ul {
    column-count: 1; }
    #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area,
    #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area,
    .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area,
    .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area {
      display: block; }
      #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area,
      #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area,
      .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area,
      .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area {
        width: 90%;
        margin: auto; }
        #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area dl dt,
        #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area dl dt,
        .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area dl dt,
        .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area dl dt {
          justify-content: center;
          font-size: 1.2em; }
          #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area dl dt img,
          #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area dl dt img,
          .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area dl dt img,
          .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area dl dt img {
            width: 25%; }
        #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area dl dd p,
        #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area dl dd p,
        .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .before-area dl dd p,
        .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .before-area dl dd p {
          font-size: 1em; }
      #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area,
      #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area,
      .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area,
      .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area {
        width: 100%; }
        #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area dl dt,
        #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area dl dt,
        .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area dl dt,
        .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area dl dt {
          font-size: 1.2em; }
          #children #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area dl dt .after-p,
          #children #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area dl dt .after-p,
          .before_after #undercontents #section-first .beforeafter-area-ul .children-area .beforeafter-area .after-area dl dt .after-p,
          .before_after #undercontents #section-first .beforeafter-area-ul .parent-area .beforeafter-area .after-area dl dt .after-p {
            width: 50%; } }
/* Kjの子どもたちと話してみた！聞いてみた！ */
#children #undercontents #section-first,
.conversation #undercontents #section-first {
  width: 90% !important;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  text-align: center !important;
  display: flex;
  flex-wrap: wrap;
  margin-top: 2em;
  justify-content: space-between;
  z-index: 10; }
  #children #undercontents #section-first .content,
  .conversation #undercontents #section-first .content {
    width: 30%;
    height: 100%;
    margin-bottom: 4%;
    background-image: url(../img/common/bg_conversation.png);
    background-size: 98% 100%;
    background-repeat: no-repeat;
    list-style: none;
    position: relative;
    padding: 3%;
    cursor: pointer; }
    #children #undercontents #section-first .content .js-modal-open h2,
    .conversation #undercontents #section-first .content .js-modal-open h2 {
      font-size: 1.3em;
      font-weight: bold;
      border-bottom: solid 1px;
      display: inline-block;
      background-image: none; }
    #children #undercontents #section-first .content .js-modal-open .conversation-div,
    .conversation #undercontents #section-first .content .js-modal-open .conversation-div {
      display: flex; }
      #children #undercontents #section-first .content .js-modal-open .conversation-div .children-voice,
      .conversation #undercontents #section-first .content .js-modal-open .conversation-div .children-voice {
        text-align: center;
        font-family: vdl-penletter, sans-serif;
        width: 70%; }
      #children #undercontents #section-first .content .js-modal-open .conversation-div img,
      .conversation #undercontents #section-first .content .js-modal-open .conversation-div img {
        width: 7em;
        height: auto;
        position: absolute;
        bottom: -1em;
        right: 0em; }
  #children #undercontents #section-first .content:hover,
  .conversation #undercontents #section-first .content:hover {
    background-image: url(../img/common/bg_conversation_up.png);
    background-size: 98% 100%;
    background-repeat: no-repeat; }
  #children #undercontents #section-first .modal,
  .conversation #undercontents #section-first .modal {
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    z-index: 200; }
    #children #undercontents #section-first .modal .modal__bg,
    .conversation #undercontents #section-first .modal .modal__bg {
      background: rgba(255, 255, 255, 0.8);
      height: 100vh;
      position: absolute;
      width: 100%; }
    #children #undercontents #section-first .modal .modal__content,
    .conversation #undercontents #section-first .modal .modal__content {
      background-image: url(../img/common/bg_beforeafter_children.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      left: 50%;
      padding: 2% 5%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, 25%);
      width: 80%; }
      #children #undercontents #section-first .modal .modal__content .children-voice-up,
      .conversation #undercontents #section-first .modal .modal__content .children-voice-up {
        position: relative;
        padding: 2em; }
        #children #undercontents #section-first .modal .modal__content .children-voice-up dl dt,
        .conversation #undercontents #section-first .modal .modal__content .children-voice-up dl dt {
          font-size: 1.5em;
          font-weight: bold; }
        #children #undercontents #section-first .modal .modal__content .children-voice-up dl dd .children-voice,
        .conversation #undercontents #section-first .modal .modal__content .children-voice-up dl dd .children-voice {
          font-family: vdl-penletter, sans-serif;
          width: 80%;
          text-align: center;
          font-size: 2em; }
        #children #undercontents #section-first .modal .modal__content .children-voice-up .img-children-voice-up,
        .conversation #undercontents #section-first .modal .modal__content .children-voice-up .img-children-voice-up {
          width: 10em;
          position: absolute;
          top: 0;
          right: 1em; }
        #children #undercontents #section-first .modal .modal__content .children-voice-up .children-voice-ul,
        .conversation #undercontents #section-first .modal .modal__content .children-voice-up .children-voice-ul {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          margin-top: 1em;
          justify-content: space-around; }
          #children #undercontents #section-first .modal .modal__content .children-voice-up .children-voice-ul li,
          .conversation #undercontents #section-first .modal .modal__content .children-voice-up .children-voice-ul li {
            list-style: none;
            display: flex;
            margin: 0.7em 0;
            padding: 0 1em;
            font-size: 1.3em;
            font-family: vdl-penletter, sans-serif; }
            #children #undercontents #section-first .modal .modal__content .children-voice-up .children-voice-ul li .img-children-voice,
            .conversation #undercontents #section-first .modal .modal__content .children-voice-up .children-voice-ul li .img-children-voice {
              width: 1.8em;
              height: 1em;
              padding-right: 0.5em; }
            #children #undercontents #section-first .modal .modal__content .children-voice-up .children-voice-ul li .modalimg,
            .conversation #undercontents #section-first .modal .modal__content .children-voice-up .children-voice-ul li .modalimg {
              width: auto;
              min-height: 1.3em;
              max-width: 100%; }
        #children #undercontents #section-first .modal .modal__content .children-voice-up .close-p,
        .conversation #undercontents #section-first .modal .modal__content .children-voice-up .close-p {
          color: #22A26C;
          text-align: center;
          border: solid 1px #22A26C;
          display: inline-block;
          padding: 1em 2em;
          margin-top: 2em; }
        #children #undercontents #section-first .modal .modal__content .children-voice-up .close-p:hover,
        .conversation #undercontents #section-first .modal .modal__content .children-voice-up .close-p:hover {
          color: #fff;
          background-color: #22A26C;
          cursor: pointer; }

/* mobile */
@media screen and (max-width: 575px) {
  #children #undercontents #section-first .content,
  .conversation #undercontents #section-first .content {
    width: 75%;
    margin: 2em auto; }
  #children #undercontents #section-first .modal .modal__content,
  .conversation #undercontents #section-first .modal .modal__content {
    width: 90%;
    height: 80vh;
    transform: translate(-50%, 10%);
    overflow: scroll; }
    #children #undercontents #section-first .modal .modal__content .children-voice-up dl dt,
    .conversation #undercontents #section-first .modal .modal__content .children-voice-up dl dt {
      margin-top: 1em; }
    #children #undercontents #section-first .modal .modal__content .children-voice-up dl dd .children-voice,
    .conversation #undercontents #section-first .modal .modal__content .children-voice-up dl dd .children-voice {
      width: 100%; }
    #children #undercontents #section-first .modal .modal__content .children-voice-up .img-children-voice-up,
    .conversation #undercontents #section-first .modal .modal__content .children-voice-up .img-children-voice-up {
      display: none; } }

/*# sourceMappingURL=children.css.map */