@charset "UTF-8";

* {
  font-size: 62.5%;
  margin: 0;
  padding: 0;
}

@media print, screen and (min-width: 780px) {
  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.8rem;
    color: #333;
    letter-spacing: 0.05em;
    text-align: center;
    margin: 0 auto;
  }

  section {
    /* width: 100%; */
    margin: 0 auto;
  }

  h1 {
    font-size: 3.6rem;
  }

  h2 {
    font-size: 2.8rem;
  }

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

  .br {
    display: block;
  }

  span {
    font-size: 1.8rem;
  }

  /*--TOP--*/
  .top {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .logo {
    width: 40%;
    margin-right: 5%;
  }

  .mv {
    width: 40%;
  }

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

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

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

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

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

  .outline .flex {
    display: flex;
    justify-content: space-between;
  }

  .ol {
    width: 40%;
    display: block;
    padding: 0 5%;
  }

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

  .ol img {
    width: 70%;
    margin-bottom: 5%;
  }

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

  .ol p {
    text-align: left;
  }

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

  .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: -10%;
  }

  .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;
    padding: 7%;
  } */

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

  .func .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mockup img {
    width: 60%;
    margin-left: -5%;
  }

  .func h1 {
    margin-bottom: 7%;
  }

  .func-item {
    width: 40%;
    display: block;
  }

  .title .icon {
    width: 20%;
    margin-bottom: 5%;
  }

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

  .func-item p {
    text-align: left;
    margin: 0 auto;
  }

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