@charset "UTF-8";

/* ===================================================================== */
/* key-visual */
/* ===================================================================== */
#key-visual {
  background: url(../images/index_kv_bg.jpg) no-repeat right center;
  background-size: cover;
  background-color: aliceblue;
  height: auto;
  top: 0;
}

#key-visual .main-catch {
  align-items: flex-start;
  margin-top: 6rem;
}

#key-visual .h1,
#key-visual .p {
  margin-bottom: 3rem;
}

#key-visual .h1_small {
  display: block;
  font-size: 2rem;
}

#key-visual .h1 img {
  margin-top: 1rem;
}

@media only screen and (max-width: 1024px) {
  #key-visual .main-catch {
    align-items: center;
  }
  #key-visual .main-catch .h1 {
    font-size: 4.4rem;
  }
  #key-visual .main-catch .h1_small {
    font-size: 1.6rem;
  }
  #key-visual .main-catch .p {
    font-size: 1.6rem;
    text-align: center;
  }
  #key-visual .main-catch .button {
    margin: 0 auto;
  }
}

@media only screen and (max-width: 430px) {
  #key-visual .main-catch {
    top: 0;
  }
}

/* ===================================================================== */
/* introduction */
/* ===================================================================== */
@media only screen and (max-width: 1024px) {
  #introduction .left-text-side_figure {
    margin: 2rem 1rem 0;
  }
  #introduction .left-text-side_figure img {
    margin: 0 auto;
    max-height: 254px;
    width: auto;
  }
}

/* ===================================================================== */
/* features */
/* ===================================================================== */
#features .left-text-side_figure {
  margin-left: 5rem;
}
#features .right-text-side_figure {
  margin-right: 5rem;
}

#features .h3 {
  margin-bottom: 2rem;
}

@media only screen and (max-width: 1024px) {
  #features .left-text-side_figure,
  #features .right-text-side_figure {
    margin: 2rem 1rem 0;
  }
}

/* ===================================================================== */
/* functions */
/* ===================================================================== */
#functions ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style-type: none;
}
#functions ul li {
  background: #fff;
  border-radius: 10rem;
  font-weight: bold;
  margin: .5rem;
  padding: 1rem 2rem;
  text-align: center;
  width: 310px;
}

#functions h3 {
  margin-bottom: 2rem;
}

/* ===================================================================== */
/* flow */
/* ===================================================================== */
#flow h3 {
  font-size: 2.6rem;
  margin-bottom: 1rem;
}
#flow p {
  font-size: 1.6rem;
}

/* ===================================================================== */
/* common */
/* ===================================================================== */
.button,
.button a {
  border-radius: 10rem;
}
.button .small-text {
  display: block;
  font-size: 2rem;
  margin-top: 1.5rem;
}