@charset "UTF-8";
body {
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
}

.header {
  padding-top: 40px;
}
@media screen and (max-width: 767px) {
  .header {
    padding-top: 15px;
  }
}
.header .container-fluid {
  padding-bottom: 1em;
}
.header .row {
  justify-content: space-between;
}
.header h1 {
  font-size: 3em;
  font-weight: bold;
}
.header h1 a:hover {
  color: #4fd1fc;
}
@media screen and (max-width: 767px) {
  .header h1 {
    font-size: 2em;
  }
}
.header h1 a {
  text-decoration: none;
  color: #008fd9;
}

a.btn_04 {
  display: block;
  text-align: center;
  text-decoration: none;
  width: 100%;
  margin: auto;
  padding: 1rem 2rem;
  font-weight: bold;
  border: 2px solid orange;
  background: orange;
  color: #fff;
  border-radius: 100vh;
  transition: 0.5s;
}
@media screen and (min-width: 1440px) {
  a.btn_04 {
    width: 60%;
  }
}

a.btn_04:hover {
  color: orange;
  background: #fff;
}

a.btn_04-1 {
  display: block;
  text-align: center;
  text-decoration: none;
  width: 100%;
  margin: auto;
  padding: 1rem 2rem;
  font-weight: bold;
  border: 2px solid rgb(84, 192, 104);
  background: rgb(84, 192, 104);
  color: #fff;
  border-radius: 100vh;
  transition: 0.5s;
}
@media screen and (min-width: 1440px) {
  a.btn_04-1 {
    width: 60%;
  }
}

a.btn_04-1:hover {
  color: rgb(84, 192, 104);
  background: #fff;
}

@media screen and (max-width: 767px) {
  .spb {
    display: none;
  }
}

@media screen and (max-width: 790px) {
  .pcnav {
    display: none;
  }
}
.pcnav ul {
  list-style: none;
}
.pcnav ul li {
  display: inline-block;
  width: 140px;
  padding-bottom: 20px;
  padding-top: 20px;
}
.pcnav ul li a {
  text-decoration: none;
  color: black;
}
.pcnav ul li a:hover {
  color: #4fd1fc;
}

/*　ハンバーガーボタン　*/
.hamburger {
  display: block;
  position: fixed;
  z-index: 3;
  right: 13px;
  top: 12px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
@media screen and (min-width: 791px) {
  .hamburger {
    display: none;
  }
}

.hamburger span {
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 6px;
  background: #555;
  transition: 0.3s ease-in-out;
}

.hamburger span:nth-child(1) {
  top: 10px;
}

.hamburger span:nth-child(2) {
  top: 20px;
}

.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top: 16px;
  left: 6px;
  transform: rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  transform: rotate(45deg);
}

nav.globalMenuSp {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  color: #000;
  background: #fff;
  text-align: center;
  transform: translateX(100%);
  transition: all 0.6s;
  width: 100%;
}

nav.globalMenuSp ul {
  background: rgb(221, 255, 253);
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

nav.globalMenuSp ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  border-bottom: 1px solid #fff;
}

nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

nav.globalMenuSp ul li:hover {
  background: #ddd;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #000;
  padding: 1em 0;
  text-decoration: none;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  transform: translateX(0%);
}

.top img {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .top img {
    display: none;
  }
}

.topsp img {
  width: 100%;
}
@media screen and (min-width: 767px) {
  .topsp img {
    display: none;
  }
}

.balloon2 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #008fd9;
  box-sizing: border-box;
  border-radius: 15px;
}

.balloon2:before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

.balloon2:after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #008fd9;
  z-index: 1;
}

.balloon2 p {
  margin: 0;
  padding: 0;
}

.problem {
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: #dbeffa;
}
@media screen and (max-width: 767px) {
  .problem {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
.problem h2 {
  font-weight: bold;
  font-size: 3em;
}
@media screen and (max-width: 767px) {
  .problem h2 {
    font-size: 1.5em;
  }
}
.problem p {
  font-size: 1.5em;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .problem p {
    font-size: 1em;
  }
}
.problem img {
  width: 50%;
  border-radius: 50%;
}
.problem .container-fluid {
  max-width: 900px;
}
.problem .red {
  font-weight: bold;
  color: salmon;
}
.problem .arrow {
  width: 20%;
  padding-top: 1em;
  padding-bottom: 1em;
  border-radius: 0;
}
.problem .pr p {
  font-size: 3em;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .problem .pr p {
    font-size: 1.5em;
  }
}

.service {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media screen and (max-width: 767px) {
  .service {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
.service h2 {
  font-size: 3em;
  font-weight: bold;
  padding-bottom: 0.5em;
}
@media screen and (max-width: 767px) {
  .service h2 {
    font-size: 1.5em;
  }
}
.service h3 {
  font-weight: bold;
  color: white;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  font-size: 1.5em;
}
@media screen and (max-width: 425px) {
  .service h3 {
    font-size: 1.1em;
  }
}
.service img {
  height: 150px;
  width: 100%;
}
@media screen and (max-width: 900px) {
  .service img {
    height: 100px;
  }
}
.service .container-fluid {
  max-width: 1500px;
  margin: 0 auto;
}
.service .col-md-2 {
  margin-left: 1em;
  margin-right: 1em;
}
@media screen and (max-width: 767px) {
  .service .col-md-2 {
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em;
  }
}
.service .gomi {
  background-color: salmon;
}
.service .ihin {
  background-color: skyblue;
}
.service .niwa {
  background-color: mediumseagreen;
}
.service .kata {
  background-color: orange;
}

.feature {
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: #dbeffa;
}
@media screen and (max-width: 767px) {
  .feature {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
.feature .container-fluid {
  max-width: 900px;
  padding-top: 1em;
  overflow-x: hidden;
}
.feature h2 {
  font-size: 3em;
  font-weight: bold;
  padding-bottom: 1em;
}
@media screen and (max-width: 767px) {
  .feature h2 {
    font-size: 1.5em;
  }
}
.feature h3 {
  font-size: 2.5em;
  font-weight: bold;
  color: salmon;
  text-shadow: 4px 4px 4px white, -4px -4px 4px white, -4px 4px 4px white, -4px 0 4px white, 0 4px 4px white, 0 -4px 4px white;
}
@media screen and (max-width: 767px) {
  .feature h3 {
    font-size: 1.2em;
  }
}
.feature p {
  font-size: 1.5em;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .feature p {
    font-size: 1em;
  }
}
.feature .number {
  font-size: 4em;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  text-shadow: 4px 4px 4px salmon, -4px -4px 4px salmon, -4px 4px 4px salmon, 4px -4px 4px salmon, 4px 0 4px salmon, -4px 0 4px salmon, 0 4px 4px salmon, 0 -4px 4px salmon;
}
@media screen and (max-width: 767px) {
  .feature .number {
    font-size: 3em;
  }
}
.feature .plus {
  font-size: 1.5em;
}

.review {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media screen and (max-width: 767px) {
  .review {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
.review img {
  width: 100%;
}
.review .arrow {
  width: 10%;
  padding-top: 1em;
  padding-bottom: 1em;
}
.review h2 {
  font-size: 3em;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .review h2 {
    font-size: 1.5em;
  }
}
.review h3 {
  font-size: 1.5em;
  font-weight: bold;
  color: #008fd9;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .review h3 {
    padding-top: 1em;
  }
}
.review p {
  font-size: 1.2em;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .review p {
    font-size: 1em;
  }
}
.review .container-fluid {
  padding-top: 2em;
}

.fadeIn {
  transform: translate3d(40px, 0px, 0);
  transition: 1s;
  opacity: 0;
}

.fadeIn.animated {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.contact {
  background-image: linear-gradient(90deg, rgb(251, 241, 107), rgb(236, 248, 129) 98%);
  padding-top: 80px;
  padding-bottom: 80px;
}
@media screen and (max-width: 767px) {
  .contact {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
.contact a {
  font-size: 1.5em;
}
.contact h2 {
  font-weight: bold;
  font-size: 2em;
  padding-bottom: 0.5em;
  color: #000000;
  text-shadow: 4px 4px 4px rgb(255, 255, 255), -4px -4px 4px rgb(255, 255, 255), -4px 4px 4px rgb(255, 255, 255), 4px -4px 4px rgb(255, 255, 255), 4px 0 4px rgb(255, 255, 255), -4px 0 4px rgb(255, 255, 255), 0 4px 4px rgb(255, 255, 255), 0 -4px 4px rgb(255, 255, 255);
}
@media screen and (max-width: 1025px) {
  .contact h2 {
    font-size: 1.4em;
  }
}
@media screen and (max-width: 767px) {
  .contact .spbr {
    padding-top: 2em;
  }
}

.member {
  padding-top: 80px;
  padding-bottom: 80px;
  background-image: url(images/bg_dlineblue.png);
}
@media screen and (max-width: 767px) {
  .member {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
.member .container-fluid {
  padding-top: 2em;
  padding-bottom: 2em;
  background-color: white;
  width: 80%;
}
.member h2 {
  font-size: 3em;
  font-weight: bold;
  padding-bottom: 1em;
  color: white;
}
@media screen and (max-width: 767px) {
  .member h2 {
    font-size: 1.5em;
  }
}
.member img {
  width: 100%;
}
.member p {
  font-size: 1.3em;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .member p {
    font-size: 1em;
  }
}
.member h3 {
  font-size: 2em;
  padding-top: 1em;
}
@media screen and (max-width: 767px) {
  .member h3 {
    font-size: 1.5em;
  }
}

.footer {
  padding-top: 80px;
}
@media screen and (max-width: 767px) {
  .footer {
    padding-top: 20px;
  }
}
.footer h2 {
  font-size: 3em;
  font-weight: bold;
  color: #008fd9;
  padding-bottom: 1em;
}
@media screen and (max-width: 767px) {
  .footer h2 {
    font-size: 1.5em;
  }
}
.footer .samurai {
  padding-top: 80px;
  padding-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .footer .samurai {
    padding-top: 20px;
    font-size: 1em;
  }
}
.footer a {
  text-decoration: none;
  color: black;
}
.footer a:hover {
  color: #4fd1fc;
}
.footer h2 a {
  color: #008fd9;
}

.sns {
  padding-bottom: 4em;
}

.btn-social-icon-facebook {
  text-decoration: none;
  display: inline-block;
  text-align: center;
  color: #4966a0;
  font-size: 25px;
  text-decoration: none;
}

.btn-social-icon-facebook:hover {
  color: #668ad8;
  transition: 0.5s;
}

.btn-social-icon-facebook__square {
  border-radius: 10px;
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  font-size: 35px;
  line-height: 50px;
  color: #FFF;
  background: #4966a0;
}

.btn-social-icon-facebook__square .fa-facebook {
  position: absolute;
  bottom: -3px;
  right: 6px;
  font-size: 42px;
}

.insta_btn {
  display: inline-block;
  text-align: center; /*中央揃え*/
  color: #2e6ca5; /*文字色*/
  font-size: 20px; /*文字サイズ*/
  text-decoration: none; /*下線消す*/
}

.insta_btn:hover { /*ホバー時*/
  color: #668ad8; /*文字色*/
  transition: 0.5s; /*ゆっくり変化*/
}

.insta_btn .insta { /*アイコンの背景*/
  position: relative; /*相対配置*/
  display: inline-block;
  width: 50px; /*幅*/
  height: 50px; /*高さ*/
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; /*グラデーション①*/
  overflow: hidden; /*はみ出た部分を隠す*/
  border-radius: 13px; /*角丸に*/
}

.insta_btn .insta:before { /*グラデーションを重ねるため*/
  content: "";
  position: absolute; /*絶対配置*/
  top: 23px; /*ずらす*/
  left: -18px; /*ずらす*/
  width: 60px; /*グラデーションカバーの幅*/
  height: 60px; /*グラデーションカバーの高さ*/
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); /*グラデーション②*/
}

.insta_btn .fa-instagram { /*アイコン*/
  color: #FFF; /*白に*/
  position: relative; /*z-indexを使うため*/
  z-index: 2; /*グラデーションより前に*/
  font-size: 35px; /*アイコンサイズ*/
  line-height: 50px; /*高さと合わせる*/
}

.btn-social-icon-line {
  text-decoration: none;
  display: inline-block;
  text-align: center;
  color: #4966a0;
  font-size: 25px;
  text-decoration: none;
}

.btn-social-icon-line:hover {
  color: #00b900;
  transition: 0.5s;
}

.btn-social-icon-line__square {
  border-radius: 10px;
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  font-size: 35px;
  line-height: 10px;
  color: #FFF;
  background: #00b900;
}

.btn-social-icon-line__square .fa-line {
  position: absolute;
  bottom: 3px;
  right: 7px;
  font-size: 42px;
}/*# sourceMappingURL=style.css.map */