@charset "utf-8";

.pillow {
  width: 100%;
  max-width: 1000px;
  margin: auto;

  @media screen and (min-width: 768px) {
    font-size: 150%;
  }
}

.pillow div {
  box-sizing: border-box;
}

h4 {
  margin-bottom: 10px;
}

.mainVisual {
  width: 100%;
}

.pillow img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.sec-wrapper {
  margin: 0 auto 25px;
  box-sizing: border-box;
}

.sec-wrapper h3 {
  margin-bottom: 10px;
}

.description p {
  margin-bottom: .5em;
}

.outer {
  width: 100%;
}

.block01,
.block02,
.block03 {
  width: 100%;
  margin-bottom: 30px;
}

.outer .block01 ul {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: stretch;
  align-items: stretch;
}

.outer .block01 li {
  width: 100%;
  margin: 0 auto 10px;
}

.outer .block01 em {
  font-weight: bold;
  color: #f39700;
}

.sec01 .block01 .photo {
  width: 100%;
  margin: 0 auto;
}

.sec01 .block02 {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  background: #00a0e9;
  border-radius: 20px;
  color: #fff;
}

.sec01 .block03 .description {
  width: 90%;
  margin: 0 auto;
}

.sec02 .outer {
  width: 99%;
  margin-bottom: 30px;
  padding: 20px;
  box-sizing: border-box;
  background: -webkit-gradient(linear, left top, left bottom, from(#fffdd5), to(#fff));
  background: -moz-linear-gradient(top, #fffdd5, #fff);
  background: -ms-linear-gradient(top, #fffdd5, #fff);
  box-shadow: 2px 2px 4px #ccc;
  border-radius: 15px;
}

.sec02 .photo {
  width: 70%;
  margin: 0 auto 10px;
}

.sec02 .woman strong {
  font-weight: bold;
  color: #e71a85;
}

.sec02 .man strong {
  font-weight: bold;
  color: #00b2dc;
}

.sec03 h4 {
  font-weight: normal;
  font-size: 2rem;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  border-bottom: 2px #999 dotted;
  text-align: center;
}

.sec03 .photo {
  width: 70%;
  margin: 0 auto 5px;
}

.sec03 .cell {
  margin-bottom: 20px;
}

@media screen and (min-width: 768px) {
  .sec-wrapper {
    margin: 0 auto 80px;
    font-size: 1rem;
  }

  .sec-wrapper h3 {
    margin-bottom: 20px;
  }

  .description {
    font-size: 1.25rem;
  }

  .sec01 .outer .block01 ul,
  .sec01 .outer .block02 ul {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: stretch;
    align-items: stretch;
  }

  .sec01 .outer .block01 li,
  .sec01 .outer .block02 li {
    width: 32%;
    margin: 0;
  }

  .sec01 .block01 .photo {
    width: 100%;
  }

  .sec01 .block03 .description {
    width: 100%;
  }

  .sec02 .outer {
    padding: 30px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: stretch;
    align-items: stretch;
  }

  .sec02 .photo {
    width: 25%;
    margin: 0;
  }

  .sec02 .description {
    width: 72%;
    margin: 0;
  }

  .sec03 .outer {
    width: 100%;
    margin-bottom: 30px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: stretch;
    align-items: stretch;
  }

  .sec03 .outer.item02 {
    display: block;
  }

  .sec03 h4 {
    width: 100%;
  }

  .sec03 .photo {
    width: 38%;
    margin: 0;
  }

  .sec03 .description {
    width: 59%;
    margin: 0;
  }

  .sec03 .item02 .block {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: stretch;
    align-items: stretch;
  }

  .sec03 .item02 .cell {
    width: 32%;
  }

  .sec03 .item02 .photo,
  .sec03 .item02 .description {
    width: 100%;
  }

}

@media screen and (min-width: 1024px) {
  .mainVisual {
    width: 100%;
    margin: 0 auto;
  }

  .sec-wrapper {
    font-size: 1.125rem;
  }

  .description {
    font-size: 1.5rem;
  }

  .sec01 .block01,
  .sec01 .block02,
  .sec01 .block03 {
    margin-bottom: 50px;
  }

  .sec01 .outer .block01 li,
  .sec01 .outer .block02 li {
    width: 31%;
  }

  .sec01 .block02 {
    padding: 30px;
  }

  .sec02 .outer {
    padding: 40px;
  }

  .sec02 .description {
    font-size: 1.5rem;
  }

  .sec03 h4 {
    margin-bottom: 15px;
    font-size: 2.25rem;
  }

  .sec03 .outer {
    margin-bottom: 50px;
  }
}