/* CSS Document */
article ul.demo1 {
  margin-bottom: 10rem; }
  article ul.demo1 li dl {
    padding: 3rem;
    margin: 2rem;
    border-radius: 2rem;
    background-color: #fff;
    box-shadow: 5px 5px 20px #c8c9cc, -5px -5px 20px #ffffff;
    text-align: center; }
    article ul.demo1 li dl img {
      border-radius: 1rem; }
    article ul.demo1 li dl p {
      margin: 0;
      margin-top: 2rem; }
    article ul.demo1 li dl dd {
      margin: 0; }

article ul.demo2 li {
  align-items: center; }
  article ul.demo2 li div {
    padding: 0; }
    article ul.demo2 li div img {
      width: 100%; }
  article ul.demo2 li dl {
    padding: 4rem; }
article ul.demo2 li:nth-child(1) {
  justify-content: flex-start; }
  article ul.demo2 li:nth-child(1) div {
    margin-left: calc(50% - 50vw);
    order: 1; }
    @media screen and (max-width: 767px) {
      article ul.demo2 li:nth-child(1) div {
        margin-left: auto; } }
  article ul.demo2 li:nth-child(1) dl {
    order: 2; }
article ul.demo2 li:nth-child(2) {
  justify-content: flex-end; }
  article ul.demo2 li:nth-child(2) div {
    margin-right: calc(50% - 50vw);
    order: 2; }
    @media screen and (max-width: 767px) {
      article ul.demo2 li:nth-child(2) div {
        margin-right: auto;
        order: 1; } }
  article ul.demo2 li:nth-child(2) dl {
    order: 1; }
    @media screen and (max-width: 767px) {
      article ul.demo2 li:nth-child(2) dl {
        order: 2; } }

pre {
  height: 56px;
  display: flex;
  align-items: center; }