@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: black;
}

.sp_br {
  display: none;
}

/* メインビジュアル */
.main-visual {
  width: 100%;
}
.main-visual-contents {
  margin: 0 auto;
  background-image: url("../images/lp/manga2/back3.png"), url("../images/lp/manga2/back2.png"), url("../images/lp/manga2/back1.jpg");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100%, 325px auto, 100%;
  background-position: center 320px, 75% 40px, center -41px;
}
.main-visual-text {
  width: 1100px;
  height: 600px;
  margin: 0 auto;
}

.main-visual-text img {
  width: 100%;
  max-width: 630px;
  height: auto;
  line-height: 100px;
  padding-top: 95px;
  padding-left: 50px;
}

/* メイン */
main {
  width: 100%;
}

/* マンガパート１ */
.comic-part1 {
  width: 960px;
  margin: 0 auto;
  position: relative;
  margin-top: -220px;
  padding-bottom: 64px;
}
.comic img {
  width: 100%;
  height: auto;
  text-align: center;
}

/* 機能解説 */
.function {
  width: 100%;
  margin: 0 auto;
}

.function p {
  line-height: 1.4em;
}

.function-title {
  background-color: #00488a;
  font-size: 30px;
  font-weight: bold;
}
.function h2 {
  color: #ffffff;
  text-align: center;
  line-height: 80px;
}
.function-contents {
  background-color: #e9e9f4;
  padding-bottom: 30px;
}
.function-text-area {
  padding: 40px 0;
}
.function-text {
  text-align: center;
  font-weight: 700;
  font-size: 20px;
  color: #00488a;
}
.function-text-main {
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  color: #000;
  padding-top: 20px;
}
.function-box-area {
  width: 880px;
  margin: 0 auto;
}
.assignment {
  width: 880px;
  margin: 0 auto;
  padding: 22px;
  background-color: #ffffff;
}
.assignment img {
  width: 100%;
  padding: 22px;
}
.triangle-area {
  width: 880px;
  margin: 0 auto;
  padding: 22px;
}
.triangle {
  width: 180px;
  height: 80px;
  margin: 0 auto;
  aspect-ratio: 1 / cos(30deg);
  clip-path: polygon(50% 100%, 100% 0, 0 0);
  background-color: #00488a;
}
.function-contents-box {
  width: 880px;
  margin: 0 auto;
  padding: 22px;
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
}
.function-box-text {
  width: 330px;
}
.box-number {
  background-color: #f2971b;
  color: #ffffff;
  padding: 7px 0 7px 11px;
  width: 95px;
  position: relative;
}
.box-number p {
  font-weight: 700;
}
.box-number:after {
  position: absolute;
  content: "";
  left: 95px;
  top: 0px;
  border: none;
  border-left: solid 15px #f2971b;
  border-top: solid 18px transparent;
  border-bottom: solid 19px transparent;
}
.box-title {
  padding: 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: #00488a;
}
.box-text {
  padding: 0;
}

.function-box-img {
  max-width: 470px;
}

.function-box-img img {
  width: 470px;
  padding-left: 10px;
}
.box-space {
  margin-bottom: 20px;
}
.function-box-batch img {
  width: 330px;
  padding-left: 10px;
}
.function-box-batchtext {
  width: 470px;
  padding: 65px 0;
  font-size: 11px;
}
.function-contents-button {
  text-align: center;
  padding: 40px 0;
}
.function-contents-button a {
  text-decoration: none;
  color: #00488a;
  background-color: #fff;
  padding: 10px 210px;
  border-radius: 30px;
  transition: 1s;
  border: solid 2px #00488a;
  font-size: 20px;
  font-weight: 700;
}
.function-contents-button a:hover {
  opacity: 0.5;
}
/* マンガパート２ */
.comic-part2 {
  width: 960px;
  margin: 0 auto;
  padding-top: 64px;
  padding-bottom: 64px;
}

/* フッター */

/* =========================
 スマホ用（width 599px）
=========================== */

@media screen and (max-width: 599px) {
  html,
  body,
  header,
  nav,
  main,
  .main-visual,
  .main-visual-text,
  .main-contents,
  .works,
  .profile,
  .blogs,
  .blogs-contents,
  footer {
    width: 100%;
  }
  .none {
    display: none !important;
  }
  .sp_br {
    display: block;
  }

  /* =========================
          main-visual
  =========================== */
  .main-visual-text img {
    width: 100%;
    max-width: 100%;
    padding: 9% 3%;
  }
  .main-visual-contents {
    height: 650px;
    background-size: 580px, 63% auto, 1100px auto;
    background-position: center 77%, 47% 160px, 0px 0px;
  }

  .main-visual-text {
    height: 650px;
  }

  /* =========================
          マンガパート１
  =========================== */
  .comic-part1 {
    width: 100%;
    margin-top: -205px;
  }
  /* =========================
        　ポイント解説
  =========================== */
  .function {
    width: 100%;
  }
  .function-text-area {
    padding: 40px 12px;
  }
  .function h2 {
    font-size: 30px;
  }
  .function-text {
    width: 90%;
    font-size: 100%;
    margin: 0 auto;
  }
  .assignment {
    width: 100%;
    padding: 5px;
  }
  .triangle-area {
    width: 100%;
  }
  .triangle {
    width: 40%;
    height: 50px;
    clip-path: polygon(50% 100%, 100% 0, 0 0);
  }
  .function-box-text {
    width: 100%;
  }
  .function-box-area {
    width: 90%;
    margin: 0 auto;
  }
  .function-contents-box {
    width: 100%;
    display: block;
  }
  .box-title {
    font-size: 125%;
  }
  .box-text {
    padding-bottom: 20px;
  }
  .function-box-img img {
    width: 90%;
  }
  .function-contents-button a {
    padding: 2% 10%;
    font-size: 130%;
  }
  .function-box-batch {
    text-align: center;
  }
  .function-box-batch img {
    width: 80%;
    padding-left: 0px;
  }
  .function-box-batchtext {
    width: 100%;
    padding: 10px 0;
    font-size: 11px;
  }

  /* =========================
          マンガパート２
  =========================== */
  .comic-part2 {
    width: 100%;
  }
}