@charset "UTF-8";

#contents article h3 .sub{
  font-size:.75em;
  line-height:1.5;
  margin:.25em 0 0;
}

#contents article h4{
  font-size:18px;
  margin-top:2em;
  border-top: 1px solid #333;
  line-height:1.2;
  border: none;
}
#contents article h4 + p{
  margin-top:0;
}
#contents article h4 + h5{
  margin-top:0;
}
#contents article h5{
  font-size:16px;
  line-height:1.2;
  margin:1em 0 0;
  font-weight:900;
}
#contents article h5 + p{
  margin-top:.5em;
}


#contents article p.mt0{
  margin-top:0;
}
#contents article p.mb0{
  margin-bottom:0;
}
#contents article p.ml05m{
  margin-left:.5em;
}
#contents article p.ml10m{
  margin-left:1em;
}

#contents article figure.mainContainer{
  margin:0 auto;
  width:100%;
  max-width:600px;
}
#contents article figure.mainContainer img{
  width:100%;
}
#contents article figure.mainContainer figcaption{
  font-size:14px;
  margin:.25em 0 0;
  text-align:center;
}

#contents article .bothContainer{
  margin:1em 0;
  display:grid;
  grid-template-columns:repeat(2, calc(50% - .5em));
  gap:1em;
}
#contents article .bothContainer p{
  margin:0;
}
#contents article .bothContainer figure{
  margin:0 auto;
  max-width:400px;
}
#contents article .bothContainer figure img{
  width:100%;
}
#contents article .bothContainer figure figcaption{
  font-size:14px;
  margin:.25em 0 0;
  text-align:center;
}


/* ----- responsive ----- */
@media (max-width:767px) {
  #contents article h3 .sub{
    margin-bottom:.25em;
  }
  #contents article h4{
    font-size:16px;
  }
  #contents article h5{
    font-size:15px;
  }
  #contents article .bothContainer{
    grid-template-columns:1fr;
  }
}