.div01 { flex-flow: wrap; justify-content: space-between; align-items: flex-start; }
.div01 .pht { margin: 8px 0px 0px; flex-basis: 40%; text-align: center; line-height: 125%; order: 1; }
.div01 .pht img { width: 100%; margin-bottom: 8px; }
.div01 .bun { flex-basis: 54%; order: 2; }
.div01 .bun ul { margin: 0px; padding: 0px 0px 30px; list-style-type: none; }
.div01 .bun li { position: relative; margin: 0px; padding: 5px 0px 5px 32px; border-bottom: 1px dashed #777777; }
.div01 .bun li::before { position: absolute; top: 18px; left: 10px; content: ""; width: 10px; height: 10px; border-radius: 50%; background-color: #333333; }
.div02 { margin: 40px 0px 0px; padding: 15px; border: 1px solid #777777; }
.div02 .pht { margin-bottom: 20px; }
.div02 .pht img { width: 100%; }
@media print, screen and (min-width: 600px) {
  .div01 { display: flex; }
  .div02 .pht { float: right; margin: 0px 0px 5px 20px; width: 45%; max-width: 284px; }
}
@media print, screen and (min-width: 768px) {
  .div02 { padding: 25px; }
  .div02 .pht { margin: 0px 0px 5px 35px; }
  .div01 .bun li::before { top: 22px; }
}