@charset "UTF-8";

@media only screen and (max-width: 779px) {
  img {
    max-width: 100%;
    height: auto;
  }

  body {
    width: auto;
    background-image: url(../img/bg.png);
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 1.6rem;
    color: #333;
    text-align: center;
    margin: 0 auto;
  }

  section {
    margin: 0 auto;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.8rem;
  }

  p,
  b {
    font-size: 1.4rem;
    line-height: 2em;
  }

  span {
    display: inline-block;
    font-size: 1.4rem;
  }

  /*--TOP--*/
  .logo {
    width: 60%;
    margin-top: 10%;
    margin-bottom: 5%;
  }

  .mv {
    width: 80%;
  }

  /*--前置き--*/
  .intro {
    width: 80%;
    background-color: #ffffff;
    border-radius: 5%;
    padding: 5%;
    margin-bottom: 10%;
  }

  .intro h1 {
    color: #ffb13b;
    margin-top: 3%;
    margin-bottom: 7%;
  }

  .intro .illust {
    width: 50%;
    margin: 2%;
  }

  .intro p,
  b {
    margin-bottom: 5%;
  }

  /*--アプリの特徴--*/
  .outline {
    background-image: url(../img/液体シェイプ02.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 15% 10%;
    margin-bottom: 10%;
  }

  .ol {
    padding: 0 5%;
  }

  .outline h1 {
    margin-top: 5%;
    margin-bottom: 10%;
  }

  .ol img {
    width: 50%;
    margin-top: 3%;
    margin-bottom: 5%;
  }

  .ol h2 {
    margin-bottom: 5%;
  }

  .ol p {
    text-align: left;
    margin-bottom: 5%;
  }

  /*--4つの機能--*/
  .func-1 {
    background-image: url(../img/液体シェイプ03.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 10% 10%;
    padding-bottom: 10%;
  }

  .func-2 {
    background-image: url(../img/液体シェイプ04.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 10% 10%;
    padding-bottom: 15%;
    margin-top: -20%;
  }

  .func-3 {
    background-image: url(../img/液体シェイプ03.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 10% 10%;
    padding-bottom: 13%;
    margin-top: -10%;
  }

  .func-4 {
    background-image: url(../img/液体シェイプ05.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 10% 10%;
    padding-bottom: 13%;
    margin-top: -10%;
  }
  /* .func:nth-of-type(odd) {
    background-color: #fffcf5;
  }

  .func:nth-of-type(even) {
    background-color: #fff8e7;
  } */

  .mockup img {
    width: 50%;
    margin-top: 10%;
    margin-bottom: 5%;
  }

  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2%;
    margin-left: -8%;
  }

  .title .icon {
    width: 24px;
    margin-top: -5%;
    margin-right: 2%;
  }

  .func h1 {
    margin-top: 5%;
    margin-bottom: 10%;
  }

  .func-item {
    display: block;
    margin-left: 5%;
  }

  .func-item h2 {
    margin-bottom: 5%;
  }

  .func-item p {
    text-align: left;
    margin-bottom: 10%;
  }

  footer {
    background-color: #ffd089;
    color: #ffffff;
    padding: 3%;
    margin-top: 10%;
  }
}