@charset "UTF-8";
#topic {
  margin-top: 100px;
  background: url("images/topic.png") no-repeat center center / cover;
}
#topic .left {
  margin-left: 200px;
}
#topic .left .pin-blue {
  display: inline-block;
  background: #7FCDD7;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: relative;
  top: 20px;
}
#topic .left .pin-green {
  display: inline-block;
  background: #328e29;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: relative;
  top: 20px;
}
#topic .left .english {
  display: inline-block;
  margin-left: 10px;
}
#topic .right {
  margin-right: 200px;
}
#topic .right {
  display: flex; /* 横並びに配置 */
  justify-content: flex-end; /* 左端に揃える */
}
#topic .right img {
  width: 300px;
  height: auto;
  margin-top: -100px;
}
/* ---------------------footer*/
footer {
  margin-top: 200px;
}
/* ---------------------main*/
#comment {
  margin-bottom: -100px;
}
#comment .inner {
  width: 80%;
}
#recruit .inner {
  width: 70%;
  background: #7FCDD7;
  padding: 50px;
  border-top-left-radius: 45px;
  border-top-right-radius: 45px;
  border-bottom-right-radius: 45px;
  border-bottom-left-radius: 45px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#recruit hr {
  border: 0.1px solid #222;
  margin: 30px auto;
}
#recruit .button-container {
  display: flex;
  justify-content: center !important;
  margin-top: 50px;
}
#recruit .btn {
  width: 200px;
  background: #7FCDD7;
  font-weight: 500;
  display: flex;
  justify-content: center !important;
  border-radius: 50px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  font-size: 2.5rem;
}
/*-----------------------------------
タブレット
-----------------------------------*/
@media screen and (max-width: 768px) {
  #topic {
    margin-top: 80px;
  }
  #topic .left {
    margin-left: 100px;
  }
  #topic .right {
    margin-right: 100px;
  }
  #topic .right img {
    width: 200px;
    margin-top: -100px;
  }
  /* ---------------------main*/
  #comment .inner {
    margin-top: -50px;
  }
  /*-----------------------------------
スマホ
-----------------------------------*/
  @media screen and (max-width: 414px) {
    #topic {
      margin-top: 60px;
    }
    #topic .left {
      margin-left: 50px;
    }
    #topic .left .pin-blue {
      width: 10px;
      height: 10px;
      top: 15px;
    }
    #topic .left .pin-green {
      width: 10px;
      height: 10px;
      top: 15px;
    }
    #topic .left .english {
      margin-left: 10px;
    }
    #topic .right {
      margin-right: 50px;
    }
    #topic .right img {
      width: 150px;
      margin-top: -60px;
    }
    /* ---------------------footer*/
    footer {
      margin-top: 100px;
    }
    /* ---------------------main*/
    #comment .inner {
      margin-top: -20px;
    }
    #recruit .inner {
      padding: 30px;
      border-top-left-radius: 30px;
      border-top-right-radius: 30px;
      border-bottom-right-radius: 30px;
      border-bottom-left-radius: 30px;
    }
    #recruit .button-container {
      margin-top: 30px;
    }
    #recruit .btn {
      width: 100px;
      padding: 15px 20px;
      font-size: 4vw;
    }