body {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 500;
  font-style: normal;
  color: #373737;
  position: relative;
}

body p {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  font-style: normal;
  color: #373737;
  text-align: justify;
  line-height: 1.8;
}

.font-noto {
  font-family: "Noto Sans JP", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.font-zenkaku {
  font-family: "Zen Kaku Gothic New", serif;
  font-weight: 500;
  font-style: normal;
}

.font-mplus {
  font-family: "M PLUS 1p", serif;
  font-weight: 500;
  font-style: normal;
}

a {
  text-decoration: none !important;
}

a:hover {
  opacity: 0.8;
  transition-duration: 0.5s;
}

/*フォントサイズ*/
.fz-12 {
  font-size: 12px;
}
.fz-14 {
  font-size: 14px;
}
.fz-15 {
  font-size: 15px;
}
.fz-16 {
  font-size: 16px;
}
.fz-18 {
  font-size: 18px;
}
.fz-20 {
  font-size: 20px;
}
.fz-24 {
  font-size: 24px;
}
.fz-28 {
  font-size: 28px;
}
.fz-32 {
  font-size: 32px;
}

@media screen and (min-width: 768px) {
  .fz-md-14 {
    font-size: 14px;
  }
  .fz-md-16 {
    font-size: 16px;
  }
  .fz-md-18 {
    font-size: 18px;
  }
  .fz-md-20 {
    font-size: 20px;
  }
  .fz-md-24 {
    font-size: 24px;
  }
  .fz-md-28 {
    font-size: 28px;
  }
  .fz-md-32 {
    font-size: 32px;
  }
  .fz-md-40 {
    font-size: 40px;
  }
  .fz-md-48 {
    font-size: 48px;
  }
  .fz-md-56 {
    font-size: 56px;
  }
}

/*color*/
.text-blue {
  color: #065ca7;
}

.text-green {
  color: #009a84;
}

.text-pink {
  color: #ca5476;
}

.text-yellow {
  color: #dc950f;
}

.text-orange {
  color: #d2643c;
}

/*background-color*/
.bg-blue {
  background-color: #065ca7;
}

.bg-green {
  background-color: #009a84;
}

.bg-pink {
  background-color: #ca5476;
}

.bg-yellow {
  background-color: #dc950f;
}

.bg-beige {
  background-color: #f7f5de;
}

/*文字間*/
.ls-01 {
  letter-spacing: 0.1em;
}

/*コンテナ*/
@media (min-width: 1200px) {
  .container-2 {
    max-width: 1000px !important;
    margin: 0 auto;
  }
}

.w-90 {
  width: 90%;
  margin: 0 auto;
}

/*メインイメージ*/
#main-img .logo {
  width: 15%;
  left: 3%;
  top: 3%;
}

#main-img .main-title {
  width: 40%;
  left: 50%;
  transform: translateX(-50%);
  top: 10%;
}

#main-img .main-boy {
  width: 21%;
  bottom: -14%;
  left: 13%;
}

#main-img .main-girl {
  width: 19%;
  bottom: -14%;
  right: 13%;
}

@media (max-width: 768px) {
  #main-img .logo {
    width: 18%;
    left: 3%;
    top: 3%;
  }

  #main-img .main-title {
    width: 58%;
    left: 50%;
    transform: translateX(-50%);
    top: 10%;
  }

  #main-img .main-boy {
    width: 21%;
    bottom: -16%;
    left: 14%;
  }

  #main-img .main-girl {
    width: 19%;
    bottom: -16%;
    right: 13%;
  }
}

/*前書き*/
#preface {
  padding-top: 15%;
}

@media (min-width: 768px) {
  #preface .preface-title {
    width: 54%;
    max-width: 520px;
    margin-bottom: 5%;
  }
}

#preface .preface-menu {
  margin-top: 7%;
}

#preface .preface-menu .preface-menu-btn {
  width: 30%;
}

@media (max-width: 768px) {
  #preface {
    padding-top: 20%;
  }

  #preface .container-2 {
    width: 90%;
    margin: 0 auto;
  }

  #preface .preface-title {
    width: 70%;
    max-width: 100%;
    min-width: 270px;
    margin-bottom: 6%;
  }

  #preface .preface-menu .preface-menu-btn {
    width: 100%;
    margin-top: 16px;
  }
}

/*知る*/
#shiru {
  margin-top: 10%;
  overflow: hidden;
}

#shiru-title-area .shiru-title img {
  width: 31%;
  margin: 0 auto;
}

#shiru-title-area .shiru-title p {
  margin-top: 1%;
  margin-bottom: 0;
  font-size: 36px;
  text-align: center;
  color: #d2643c;
}

#shiru-title-area .shiru-title-content {
  width: 80%;
  margin: 3% auto;
}

#shiru-title-area .shiru-title-content .contents {
  width: 28.5%;
}

@media (max-width: 768px) {
  #shiru-title-area .shiru-title img {
    width: 50%;
    margin: 0 auto;
  }

  #shiru-title-area .shiru-title p {
    margin-top: 1%;
    margin-bottom: 0;
    font-size: 26px;
    text-align: center;
    color: #d2643c;
  }

  #shiru-title-area .shiru-title-content {
    width: 95%;
    margin: 3% auto;
  }

  #shiru-title-area .shiru-title-content .contents {
    width: 32.5%;
  }

  #shiru .w-90-sp {
    width: 90%;
    margin: 0 auto;
  }
}

#shiru #shiru-content-area {
  background-color: #faefe1;
  margin-top: 5%;
  padding-top: 3%;
}

#shiru-content-1 .content-area {
  padding-bottom: 8%;
}

@media (max-width: 768px) {
  #shiru-content-1 .content-area {
    padding-bottom: 3%;
  }
}

#shiru #shiru-content-area .content-area {
  background: url(../image/jyuzi.svg);
  background-size: 32px;
  background-position: top;
  background-repeat: repeat;
  border-top: solid 3.6px rgba(255, 255, 255, 0.6);
  border-bottom: solid 3.6px rgba(255, 255, 255, 0.6);
}

#shiru #shiru-content-area .content-title {
  padding: 2% 0 2.5%;
  border-top: solid 3.6px rgba(255, 255, 255, 0.6);
  text-align: center;
}

#shiru #shiru-content-area .content-title .content-title-area {
  width: 65%;
  margin: 0 auto;
}

@media (max-width: 768px) {
  #shiru #shiru-content-area .content-title .content-title-area {
    width: 96%;
    margin: 0 auto;
  }
}

#shiru #shiru-content-area .content-1-qa {
  margin-top: 5%;
}

#shiru #shiru-content-area .content-1-qa .question {
  width: 32%;
}

#shiru #shiru-content-area .content-1-qa .answer {
  width: 65%;
}

@media (max-width: 768px) {
  #shiru #shiru-content-area .content-1-qa .question {
    width: 85%;
    margin: 8% auto 5%;
  }

  #shiru #shiru-content-area .content-1-qa .answer {
    width: 90%;
    margin: 0 auto;
  }
}

#shiru #shiru-content-area .content-1-qa .shiru-content-1-q {
  width: 20%;
  top: -4vh;
  left: 54%;
}

#shiru #shiru-content-area .content-1-qa .shiru-content-1-a {
  width: 10%;
  left: -3%;
  top: -3.5vh;
}

#shiru #shiru-content-area .content-1-qa .shiru-content-1-a-3-2 {
  width: 27%;
  right: -12%;
  bottom: -7%;
}

@media (max-width: 768px) {
  #shiru #shiru-content-area .content-1-qa .shiru-content-1-q {
    width: 18%;
    top: -3.5vh;
  }

  #shiru #shiru-content-area .content-1-qa .shiru-content-1-a {
    width: 17%;
    left: -4%;
    top: -1.5vh;
  }
}

/*content-2*/
.content-title .content-title-area .shiru-content-2-title-img {
  width: 16.5%;
  bottom: 0%;
  right: -10%;
}

@media (max-width: 768px) {
  .content-title .content-title-area .shiru-content-2-title-img {
    width: 18.5%;
    bottom: -7%;
    right: -5%;
  }
}

#shiru-content-2 .content-area {
  padding-top: 3%;
}

#shiru-content-2 .content-area .shiru-content-2-1-title {
  width: 53%;
  margin: 3% auto 2%;
}

#shiru-content-2 .content-area .shiru-content-2-1-img-2 {
  width: 23%;
  right: -6%;
  top: -24%;
}

@media (max-width: 768px) {
  #shiru-content-2 .content-area .shiru-content-2-1-title {
    width: 100%;
    margin: 4% auto 3%;
  }
}

#shiru-content-2 .content-area .shiru-content-2-2-title {
  margin: 8% auto 0;
}

@media (min-width: 768px) {
  #shiru-content-2 .content-area .shiru-content-2-2-title {
    width: 50%;
    margin: 5% auto 0;
  }
}

#shiru-content-2 .content-area .shiru-content-2-2-img-1 {
  padding-top: 10%;
  margin-bottom: 10%;
}

@media (max-width: 768px) {
  #shiru-content-2 .content-area .shiru-content-2-2-img-1 {
    padding-top: 5%;
    margin-bottom: 5%;
  }
}

#shiru-content-2 .content-area .shiru-content-2-2-img-2 {
  width: 34%;
  left: -7%;
  top: 8%;
}

#shiru-content-2 .content-area .shiru-content-2-2-img-3 {
  width: 20%;
  bottom: -3%;
  left: -5%;
}

#shiru-content-2 .content-area .shiru-content-2-2-img-4 {
  width: 41%;
  right: -3%;
  bottom: -7%;
}

#shiru-content-2 .content-area .shiru-content-2-2-img-5 {
  width: 33%;
  left: 35%;
  top: 2%;
}

.num-contents {
  margin-bottom: 5%;
}

.num-contents .num-content {
  width: 25%;
}

.num-contents .num-content .title {
  margin-bottom: 3%;
}

@media (min-width: 768px) {
  .num-contents .num-content .num-text {
    padding: 0 6%;
  }
  .num-contents .num-content:not(:nth-child(4)) {
    border-right: solid 0.8px #a9a9a9;
  }
}

.num-contents .num-content .num-title .num {
  width: 13%;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .num-contents .num-content {
    width: 75%;
    margin: 0 auto 3%;
  }

  .num-contents .num-content .num-title {
    display: flex;
    align-items: top;
  }

  .num-contents .num-content .num-title .title {
    margin-bottom: 0px;
  }

  .num-contents .num-content .num-title .num {
    width: 7%;
    margin: 0;
    padding-top: 2px;
  }

  .num-contents .num-content .num-title .title {
    width: 93%;
    padding-left: 2%;
    font-size: 18px;
    flex: 1;
  }
}

.num-contents .num-content:nth-child(1) .title {
  color: #065ca7;
}

.num-contents .num-content:nth-child(2) .title {
  color: #ca5476;
}

.num-contents .num-content:nth-child(3) .title {
  color: #dc870f;
}

.num-contents .num-content:nth-child(4) .title {
  color: #009a84;
}

.shiru-content-2-2-img-5-sp {
  width: 80%;
  margin: 0% auto 3%;
}

@media (min-width: 768px) {
  #shiru-content-3 .content-area .carbon-1 {
    width: 75%;
    display: flex;
    margin-top: 5%;
  }

  #shiru-content-3 .content-area .carbon-1 .left-content {
    width: 24%;
  }

  #shiru-content-3 .content-area .carbon-1 .right-content {
    width: 76%;
  }

  #shiru-content-3 .content-area .carbon-1 .shiru-content-3-1-img {
    width: 49%;
    right: -45%;
    bottom: -1%;
  }

  #shiru-content-3 .content-area .carbon-1 .right-content .text-area {
    background-color: #fff;
    padding: 5% 7%;
    border-radius: 20px;
    margin-left: 2%;
    margin-top: 2%;
  }
}

#shiru-content-3 .content-area .carbon-1 {
  margin-top: 5%;
}

#shiru-content-3 .content-area .carbon-1 .right-content .text-area {
  background-color: #fff;
  padding: 7%;
  border-radius: 20px;
}

#shiru-content-3 .content-area .carbon-2,
#shiru-content-3 .content-area .carbon-3 {
  margin: 5% auto 3%;
}

#shiru-content-3 .content-area .carbon-2 .title,
#shiru-content-3 .content-area .carbon-3 .title {
  margin-bottom: 2%;
}

#shiru-content-3 .content-area .carbon-2 .title .right,
#shiru-content-3 .content-area .carbon-3 .title .right {
  width: 90%;
}

@media (max-width: 768px) {
  #shiru-content-3 .content-area .carbon-3 .title .right {
    margin: 2% auto 0;
  }
}

#shiru-content-3 .arrow {
  width: 22%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  #shiru-content-3 .content-area .carbon-2,
  #shiru-content-3 .content-area .carbon-3 {
    width: 95%;
    margin: 5% auto 3%;
  }

  #shiru-content-3 .content-area .carbon-2 .title,
  #shiru-content-3 .content-area .carbon-3 .title {
    display: flex;
    margin-bottom: 2%;
  }

  #shiru-content-3 .content-area .carbon-2 .title .left,
  #shiru-content-3 .content-area .carbon-3 .title .left {
    width: 16%;
    position: relative;
  }

  #shiru-content-3
    .content-area
    .carbon-2
    .title
    .left
    .shiru-content-3-2-title {
    position: absolute;
    top: 50%;
    left: -15%;
    transform: translateY(-50%);
    width: 100%;
    z-index: 2;
  }
  #shiru-content-3
    .content-area
    .carbon-3
    .title
    .left
    .shiru-content-3-3-title {
    position: absolute;
    top: 50%;
    left: -32%;
    transform: translateY(-50%);
    width: 150px;
    z-index: 2;
  }



  #shiru-content-3 .content-area .carbon-2 .title .right,
  #shiru-content-3 .content-area .carbon-3 .title .right {
    width: 84%;
    flex: 1;
  }

  #shiru-content-3 .content-area .carbon-3 .shiru-content-3-3-img-2 {
    width: 24%;
    right: -7%;
    bottom: 9%;
  }

  #shiru-content-3 .arrow {
    width: 15%;
    margin: 0 auto;
  }
}

/*学ぶ*/
#manabu {
  margin-top: 10%;
  overflow: hidden;
}

#manabu-title-area .manabu-title img {
  width: 31%;
  margin: 0 auto;
}

#manabu-title-area .manabu-title p {
  margin-top: 1%;
  margin-bottom: 0;
  font-size: 36px;
  text-align: center;
  color: #41a541;
}

#manabu-title-area .manabu-title-content {
  width: 53.3%;
  margin: 3% auto;
}

#manabu-title-area .manabu-title-content .contents {
  width: 42.2%;
}

@media (max-width: 768px) {
  #manabu-title-area .manabu-title img {
    width: 50%;
    margin: 0 auto;
  }

  #manabu-title-area .manabu-title p {
    margin-top: 1%;
    margin-bottom: 0;
    font-size: 26px;
    text-align: center;
    color: #41a541;
  }

  #manabu-title-area .manabu-title-content {
    width: 63%;
    margin: 3% auto;
  }

  #manabu-title-area .manabu-title-content .contents {
    width: 48.75%;
  }

  #manabu .w-90-sp {
    width: 90%;
    margin: 0 auto;
  }
}

#manabu #manabu-content-area {
  background-color: #e9f6e9;
  margin-top: 5%;
  padding-top: 3%;
}

@media (max-width: 768px) {
  #manabu-content-1 .content-area {
    padding-bottom: 3%;
  }
}

#manabu #manabu-content-area .content-area {
  background: url(../image/jyuzi.svg);
  background-size: 32px;
  background-position: top;
  background-repeat: repeat;
  border-top: solid 3.6px rgba(255, 255, 255, 0.6);
  border-bottom: solid 3.6px rgba(255, 255, 255, 0.6);
}

#manabu #manabu-content-area .content-title {
  padding: 2% 0 2.5%;
  border-top: solid 3.6px rgba(255, 255, 255, 0.6);
  text-align: center;
}

#manabu #manabu-content-area .content-title .content-title-area {
  width: 65%;
  margin: 0 auto;
}

@media (max-width: 768px) {
  #manabu #manabu-content-area .content-title .content-title-area {
    width: 96%;
    margin: 0 auto;
  }
}

#manabu-content-1 .manabu-content-1-title-img {
  top: -5%;
  width: 14%;
  right: -3%;
}

#manabu-content-1 .content-1-flex-area {
  background-color: #fff;
  border-radius: 20px;
  padding: 3%;
  margin-top: 10%;
}

#manabu-content-1 .content-1-flex-area .left {
  width: 50%;
}

#manabu-content-1 .content-1-flex-area .right {
  width: 48%;
  margin-top: 3%;
}

#manabu-content-1 .content-1-flex-area .manabu-content-1-title {
  width: 61%;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
}

#manabu-content-1 .content-1-flex-area .manabu-content-1-1-img-2 {
  width: 19.5%;
  bottom: -12%;
  right: -10%;
}

@media (max-width: 768px) {
  #manabu-content-1 .content-1 {
    width: 90%;
    margin: 0 auto;
  }

  #manabu-content-1 .content-1-flex-area {
    background-color: #fff;
    border-radius: 20px;
    padding: 5%;
    margin-top: 20%;
  }

  #manabu-content-1 .content-1-flex-area .left {
    width: 100%;
  }

  #manabu-content-1 .content-1-flex-area .right {
    width: 100%;
    margin-top: 3%;
    padding-bottom: 7%;
  }

  #manabu-content-1 .content-1-flex-area .manabu-content-1-title {
    width: 102%;
    top: -12%;
    left: 50%;
    transform: translateX(-50%);
  }

  #manabu-content-1 .content-1-flex-area .manabu-content-1-1-img-2 {
    width: 31.5%;
    bottom: -6%;
    right: -1%;
  }
}

#manabu-content-1 .manabu-content-1-2-img-1 {
  width: 67%;
  margin: 3% auto;
}

#manabu-content-1 .manabu-content-1-2-img-2 {
  width: 74%;
  margin: 3% auto;
}

#manabu-content-1 .manabu-content-1-3-img-3 {
  width: 55%;
  margin: 8% auto 5%;
}

#manabu-content-1 .manabu-content-1-3-img-2 {
  width: 16%;
  right: -12%;
  bottom: 30%;
}

@media (max-width: 768px) {
  #manabu-content-1 .manabu-content-1-2-img-1 {
    width: 100%;
    margin: 5% auto;
  }

  #manabu-content-1 .manabu-content-1-2-img-2 {
    width: 100%;
    margin: 5% auto;
  }

  #manabu-content-1 .manabu-content-1-3-img-3 {
    width: 79%;
    margin: 10% auto 3%;
  }

  #manabu-content-1 .manabu-content-1-3-img-2 {
    width: 36%;
    right: -3%;
    bottom: -3%;
  }
}

#manabu-content-2 .manabu-content-2-title-img {
  top: -5%;
  width: 14%;
  right: -4%;
}

#manabu-content-2 .manabu-content-2-1-img-1 {
  width: 54%;
  margin: 3% auto;
}

@media (max-width: 768px) {
  #manabu-content-2 .manabu-content-2-1-img-1 {
    width: 90%;
    margin: 3% auto;
  }
}

@media (min-width: 768px) {
  #manabu-content-2 .content-1 .flex-contents {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
    position: relative;
  }
}

@media (min-width: 768px) {
  #manabu-content-2 .content-1 .flex-contents .content {
    width: 30.5%;
    position: relative;
  }

  #manabu-content-2 .content-1 .manabu-content-2-1-img-2-1-2 {
    width: 44%;
    left: -10%;
    top: 24%;
  }

  #manabu-content-2 .content-1 .manabu-content-2-1-img-2-2-2 {
    width: 48%;
    left: -10%;
    top: 25%;
  }

  #manabu-content-2 .content-1 .manabu-content-2-1-img-2-3-2 {
    width: 48%;
    left: -13%;
    top: 21%;
  }
}

.manabu-content-2-1-img-2-3-3 {
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5%;
}

@media (min-width: 768px) {
  .manabu-content-2-1-img-2-4 {
    position: absolute;
    width: 63%;
    left: 1%;
    bottom: 0;
  }
}

@media (max-width: 768px) {
  #manabu-content-2 .content-1 .flex-contents .content {
    position: relative;
    width: 100%;
    padding: 3% 0;
  }

  .manabu-content-2-1-img-2-1-2 {
    width: 44%;
    left: -10%;
    top: 29%;
  }

  .manabu-content-2-1-img-2-2-2 {
    width: 48%;
    left: -10%;
    top: 30%;
  }

  .manabu-content-2-1-img-2-3-2 {
    width: 48%;
    left: -13%;
    top: 22%;
  }

  .manabu-content-2-1-img-2-4 {
    width: 100%;
  }
}

@media (min-width: 768px) {
  #manabu-content-2 .content-2 .title-area {
    width: 90%;
    margin: 3% auto 0;
  }
}

.manabu-content-2-2-title {
  width: 68%;
  margin: 3% auto;
}

.manabu-content-2-2-title-img {
  width: 18%;
  top: 50%;
  left: -15%;
}

#manabu-content-2 .title-area .text-green {
  color: #41a541;
}

@media (max-width: 768px) {
  .manabu-content-2-2-title {
    width: 92%;
    margin: 10% auto 3%;
  }
}

@media (min-width: 768px) {
  .manabu-content-2-2-img-2 {
    width: 74%;
    margin: 3% auto;
  }
}

.manabu-content-2-2-img-2 {
  margin: 3% auto;
}

.manabu-content-2-2-img-3 {
  width: 36%;
  bottom: -6%;
  right: -17%;
}

.manabu-content-2-3-title {
  width: 78%;
  margin: 5% auto 3%;
}

@media (max-width: 768px) {
  .manabu-content-2-3-title {
    width: 95%;
    margin: 10% auto 3%;
  }
}

.manabu-content-2-3-title-img {
  width: 18%;
  top: 50%;
  transform: translateY(-50%);
  left: -17%;
}

.content-3 .w-90-pc {
  width: 90%;
  margin: 0 auto;
}

.content-3 {
  padding-bottom: 5%;
}

#tsukuru {
  margin-top: 10%;
  overflow: hidden;
}

#tsukuru-title-area .tsukuru-title img {
  width: 31%;
  margin: 0 auto;
}

#tsukuru-title-area .tsukuru-title p {
  margin-top: 1%;
  margin-bottom: 0;
  font-size: 36px;
  text-align: center;
  color: #dc78aa;
}

#tsukuru-title-area .tsukuru-title-content {
  width: 80%;
  margin: 3% auto;
}

#tsukuru-title-area .tsukuru-title-content .contents {
  width: 28.5%;
}

@media (max-width: 768px) {
  #tsukuru-title-area .tsukuru-title img {
    width: 50%;
    margin: 0 auto;
  }

  #tsukuru-title-area .tsukuru-title p {
    margin-top: 1%;
    margin-bottom: 0;
    font-size: 26px;
    text-align: center;
    color: #dc78aa;
  }

  #tsukuru-title-area .tsukuru-title-content {
    width: 95%;
    margin: 3% auto;
  }

  #tsukuru-title-area .tsukuru-title-content .contents {
    width: 32.5%;
  }

  #tsukuru .w-90-sp {
    width: 90%;
    margin: 0 auto;
  }
}

#tsukuru #tsukuru-content-area {
  background-color: #fff0f5;
  margin-top: 5%;
  padding-top: 3%;
}

#tsukuru-content-1 .content-area {
  padding-bottom: 3%;
}

@media (max-width: 768px) {
  #tsukuru-content-1 .content-area {
    padding-bottom: 3%;
  }
}

#tsukuru #tsukuru-content-area .content-area {
  background: url(../image/jyuzi.svg);
  background-size: 32px;
  background-position: top;
  background-repeat: repeat;
  border-top: solid 3.6px rgba(255, 255, 255, 0.6);
  border-bottom: solid 3.6px rgba(255, 255, 255, 0.6);
}

#tsukuru #tsukuru-content-area .content-title {
  padding: 2% 0 2.5%;
  border-top: solid 3.6px rgba(255, 255, 255, 0.6);
  text-align: center;
}

#tsukuru #tsukuru-content-area .content-title .content-title-area {
  width: 65%;
  margin: 0 auto;
}

@media (max-width: 768px) {
  #tsukuru #tsukuru-content-area .content-title .content-title-area {
    width: 96%;
    margin: 0 auto;
  }
}

#tsukuru
  #tsukuru-content-area
  .content-title
  .content-title-area
  .tsukuru-content-1-title-img {
  width: 27%;
  top: 15%;
  right: -15%;
}

@media (max-width: 768px) {
  #tsukuru
    #tsukuru-content-area
    .content-title
    .content-title-area
    .tsukuru-content-1-title-img {
    width: 27%;
    top: 18%;
    right: -12%;
  }
}

.tsukuru-content-1-img-1-2 {
  width: 30%;
  top: 48%;
  left: -10%;
}

.my-5per {
  margin: 5% auto;
}

@media (max-width: 768px) {
  .tsukuru-content-1-img-1-2 {
    width: 37%;
    top: 54%;
    left: -13%;
  }
}

.tsukuru-content-1-img-3-2 {
  width: 22%;
  left: -14%;
  bottom: -10%;
}

#about {
  padding: 10% 0 0;
}

.about-img-1 {
  width: 90%;
  margin: 5% auto 8%;
}

.about-img-2-1 {
  width: 90%;
  margin: 5% auto 0;
}

#about .text-darkblue {
  color: #065ca7;
}

#about .title-area {
  margin-top: 5%;
  margin-bottom: 5%;
}

.about-img-3 {
  width: 36%;
  margin: 5% auto 3%;
}

.about-img-2-2 {
  width: 13%;
  right: -3%;
  bottom: 20%;
}

.about-img-2-3 p {
  margin-top: 2%;
  margin-bottom: 5%;
}

@media (max-width: 768px) {
  .about-img-2-1 {
    width: 100%;
    margin: 5% auto 0;
  }

  .about-img-2-2 {
    width: 15%;
    right: -5%;
    bottom: 5%;
  }

  .about-img-3 {
    width: 100%;
    margin: 5% auto 3%;
  }
}

.about-3-flex-content .content {
  width: 95%;
  margin: 2% auto 3%;
  display: flex;
  flex-wrap: wrap;
}

.about-3-flex-content .content .flex-area {
  width: 50%;
  padding-right: 15px;
}

@media (max-width: 768px) {
  .about-3-flex-content .content .flex-area {
    width: 90%;
    margin: 0 auto;
    padding-right: 0px;
  }
}

.about-3-flex-content .content .flex-area-title {
  display: flex;
}

.about-3-flex-content .content .flex-area .num {
  width: 24px;
  padding-top: 3px;
}

.about-3-flex-content .content .flex-area .title {
  flex: 1;
  padding-left: 3px;
}

.about-3-flex-content .content .flex-area .flex-area-sdgs {
  margin-left: 27px;
  display: flex;
  flex-wrap: wrap;
}

.about-3-flex-content .content .flex-area .flex-area-sdgs .sdgs {
  width: 45px;
  margin-left: 2px;
}

.about-3-flex-content .content .flex-area ul {
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 24px;
}

.about-3-flex-content .content .flex-area ul li {
  list-style-type: none;
  position: relative;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 500;
  font-style: normal;
  color: #373737;
  font-size: 14px;
}

.about-3-flex-content .content-1 .content .flex-area ul li::before {
  content: "●";
  color: #0068b2;
  position: absolute;
  font-family: Arial, sans-serif;
  left: -16px;
  top: 6px;
}

.about-3-flex-content .content-1 .content .flex-area .title {
  color: #0068b2;
}

.about-3-flex-content .content-2 .content .flex-area ul li::before {
  content: "●";
  color: #dc950f;
  position: absolute;
  font-family: Arial, sans-serif;
  left: -16px;
  top: 6px;
}

.about-3-flex-content .content-2 .content .flex-area .title {
  color: #dc950f;
}

.about-3-flex-content .content-3 .content .flex-area ul li::before {
  content: "●";
  color: #87b73e;
  position: absolute;
  font-family: Arial, sans-serif;
  left: -16px;
  top: 6px;
}

.about-3-flex-content .content-3 .content .flex-area .title {
  color: #87b73e;
}

#footer .title {
  background-color: #da8f10;
}

#footer .content {
  background-color: #fffac8;
}

#footer .content .text-area {
  width: 90%;
  margin: 0 auto 3%;
}

#footer .content .link-area {
  width: 85%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#footer .content .link-area a {
  width: 30%;
  margin-bottom: 3%;
}

@media (min-width: 768px) {
  #footer .content .footer-company-container {
    width: 90%;
    margin: 10% auto;
    display: flex;
  }

  #footer .content .footer-company-container .left {
    width: 37%;
  }

  #footer .content .footer-company-container .right {
    width: 63%;
  }

  .footer-btn {
    margin-top: 3%;
  }

  #footer .content {
    padding: 3% 0 5%;
  }
}

#footer .title {
  padding: 0.5% 0;
}

@media (max-width: 768px) {
  #footer .content {
    padding: 3% 0 5%;
  }

  #footer .content .footer-company-container .left {
    width: 74%;
    margin: 3% auto;
  }

  #footer .content .footer-btn {
    width: 69%;
    margin: 3% auto;
  }

  #footer .content .footer-company {
    width: 51%;
    margin: 5% auto;
  }

  #footer .content .text-area {
    margin: 0 auto 5%;
  }
}

@media (max-width: 768px) {
  #footer .content .link-area a {
    width: 45%;
    margin-bottom: 3%;
  }
}

.footer-img-1 {
  width: 118%;
  top: -45%;
  right: 5%;
}

/*サイドボタン*/
@media (min-width: 768px) {
  .side-btn {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
  }

  .side-btn .side-btn-shiru {
    width: 85px;
    height: 160px;
    background-color: #d2643c;
    z-index: 999;
    border-radius: 20px 0px 0px 20px;
    display: block;
    margin-bottom: 10px;
  }

  .shiru-side-link {
    position: absolute;
    width: 50px;
    right: 20%;
    top: 50%;
    transform: translateY(-50%);
  }

  .side-btn .side-btn-manabu {
    width: 85px;
    height: 160px;
    background-color: #41a541;
    z-index: 999;
    border-radius: 20px 0px 0px 20px;
    display: block;
    margin-bottom: 10px;
  }

  .manabu-side-link {
    position: absolute;
    width: 50px;
    right: 20%;
    top: 50%;
    transform: translateY(-50%);
  }

  .side-btn .side-btn-tsukuru {
    width: 85px;
    height: 160px;
    background-color: #dc78aa;
    z-index: 999;
    border-radius: 20px 0px 0px 20px;
    display: block;
  }

  .tsukuru-side-link {
    position: absolute;
    width: 50px;
    right: 20%;
    top: 50%;
    transform: translateY(-50%);
  }
}

@media (max-width: 768px) {
  .side-btn {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    width: 90%;
    display: flex;
    justify-content: space-between;
  }

  .side-btn .side-btn-shiru {
    width: 30%;
    height: 48px;
    background-color: #d2643c;
    z-index: 999;
    border-radius: 20px 20px 0px 0px;
    display: block;
  }

  .shiru-side-link {
    width: 50px;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
  }

  .side-btn .side-btn-manabu {
    width: 30%;
    height: 48px;
    background-color: #41a541;
    z-index: 999;
    border-radius: 20px 20px 0px 0px;
    display: block;
  }

  .manabu-side-link {
    width: 50px;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
  }

  .side-btn .side-btn-tsukuru {
    width: 30%;
    height: 48px;
    background-color: #dc78aa;
    z-index: 999;
    border-radius: 20px 20px 0px 0px;
    display: block;
  }

  .tsukuru-side-link {
    width: 50px;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
  }
}

#shiru-content-3 .content-area {
  padding-bottom: 3%;
}

@media (max-width: 768px) {
  .shiru-content-3-2-title {
    margin: 2% auto;
    width: 90%;
  }
}

@supports (-webkit-touch-callout: none) {
  rt {
    margin-bottom: -5px;
  }
}