@charset "utf-8";

/* dream container */
.dream.container {
  text-align: center;
  padding: 0;
  overflow: hidden;
}
  .dream.container h2 {
    margin-top: 0.4em;
    margin-bottom: 0;
  }
  .dream.container h3 {
    font-size: 2.1rem;
  }
  .dream.container .hd.col,
  .dream.container .desc.col {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .dream.container .col,
  .dream.container .col .col_inner>*:first-child {
    margin-top: 0;
  }
  .dream.container .picture.col picture {
    width: 100%;
    padding: 75% 0 0 0;
    background-color: #CCCCCC;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  html.no-webp .dream.container .picture.col picture {
    background-image: url('../img/home/family.jpg?revision=20210112');
  }
  html.webp .dream.container .picture.col picture {
    background-image: url('../img/home/family.webp?revision=20210112');
  }
  .dream.container .desc.col .col_inner {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
    background-color: #FFFFFF;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
  }
  html.no-webp .dream.container .desc.col .col_inner {
    background-image: url('../img/home/g574.png?revision=20210112');
  }
  html.webp .dream.container .desc.col .col_inner {
    background-image: url('../img/home/g574.webp?revision=20210112');
  }
@media screen and (max-width: 767.98px) {
  .dream.container .hd.col {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .dream.container .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
  }
  .dream.container .row .col {
    flex: 1 0 auto;
    float: none;
  }
  .dream.container .hd.col {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .dream.container .picture.col {
    padding: 0;
  }
  .dream.container .desc.col {
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 959.98px) {
  .dream.container .desc.col h2,
  .dream.container .desc.col h3 {
    display: none;
  }
  .dream.container .desc.col p:first-of-type {
    margin-top: 0;
  }
}
@media screen and (min-width: 960px) {
  .dream.container .hd.col {
    display: none;
  }
  .dream.container .picture.col {
    order: 2;
  }
    .dream.container .picture.col picture {
      height: 100%;
      padding: 0;
    }
  .dream.container .desc.col {
    width: 50%;
    order: 1;
    display: flex;
    justify-content: flex-end;
  }
  .dream.container .col .col_inner {
    max-width: 42rem;
  }
}
@media screen and (min-width: 1260px) {
  .dream.container .col .col_inner {
    max-width: 55rem;
  }
}
@media screen and (min-width: 1500px) {
  .dream.container .picture.col picture {
    max-width: 78rem;
  }
}