@charset "UTF-8";
/* CSS Document */
/*----------purposeヒーローセクション----------*/
.section-purpose_top {
  margin: 120px 0 150px 0;
}
.section-purpose_top h2 {
  display: flex;
  justify-content: center;
  color: #509c9e;
  font-size: 6.5rem;
  font-weight: 500;
}
.colorful-tree {
  width: 110px;
  height: 130px;
  margin-left: 30px;
}
/*----------mobile版トップセクション----------*/
@media (max-width:960px) {
  .section-purpose_top {
    margin: 40px auto 0;
  }
  .section-purpose_top_title {}
  .section-purpose_top h2 {
    font-size: 3.0rem;
    writing-mode: vertical-rl;
    margin: 0 auto;
    width: 170px;
  }
  .colorful-tree {
    width: 100px;
    height: 120px;
    margin: 60px 40px 0 20px;
    text-align: center;
  }
}
/*----------purposeセクション----------*/
.purpose {
  background-color: #cae9e0;
  text-align: center;
  padding: 80px 0;
  letter-spacing: 0.12em;
  color: #666666;
  margin: 0 80px 20px 80px;
  border-radius: 80px 80px 0 0;
}
.pupose-message {
  font-size: 1.7rem;
  line-height: 2.5;
  width: 70vw;
  margin: 0 auto;
}
.pupose-message li {
  margin-bottom: 50px;
}
.message1 {
  font-size: 2.0rem;
  font-weight: 500;
}
.message2 {
  font-size: 2.0rem;
  font-weight: 500;
  line-height: 1.5;
  padding-top: 20px;
}
.dots {
  width: 7px;
  height: 70px;
  position: absolute;
  left: 50vw;
}
.last-message {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  margin-top: 120px;
}
.last-message1 {
  writing-mode: vertical-rl;
  font-size: 3.6rem;
  color: #e79f95;
}
.last-message2 {
  writing-mode: vertical-rl;
  font-size: 3.6rem;
  color: #e79f95;
  padding-top: 60px;
}
.mobile_top-button {
  display: none;
}
/*topへ戻るボタン*/
.top-button {
  margin: 80px 0 120px 0;
}
.top-button_description {
  color: #186d6f;
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 10px;
}
.buttun_top {
  text-align: center;
}
.btn04 {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 240px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-family: Quicksand;
  letter-spacing: 0.13em;
  outline: none;
  margin: 0 auto;
}
.btn04 span {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #186d6f;
  border-radius: 30px;
  background-color: #186d6f;
  transform-style: preserve-3d;
  transition: 0.5s;
}
.rotatefront04 span:nth-child(1) {
  background: #186d6f;
  color: #faf8f4;
  font-size: 1.8rem;
  font-weight: 500;
  transform: rotateX(0deg);
  transform-origin: 0 50% -25px;
}
.rotatefront04:hover span:nth-child(1) {
  transform: rotateX(-90deg);
}
.rotatefront04 span:nth-child(2) {
  background: #cae9e0;
  color: #186d6f;
  transform: rotateX(90deg);
  transform-origin: 0 50% -25px;
}
.rotatefront04:hover span:nth-child(2) {
  transform: rotateX(0deg);
}
/*----------mobile版purposeセクション----------*/
@media (max-width:960px) {
  .purpose {
    margin: 0 0 20px 0;
    border-radius: 60px 60px 0 0;
    padding-bottom: 40px;
    letter-spacing: 0.11em;
    text-align: left;
  }
  .pupose-message {
    font-size: 1.6rem;
    line-height: 2.4;
    width: 85vw;
    margin: 0 auto;
  }
  .pupose-message li {
    border-left: solid 2px #509c9e;
    padding-left: 15px;
  }
  .message2 {
    padding-top: 0;
  }
  .tulip {
    width: 58px;
    height: 58px;
    margin-left: 43vw;
  }
  .dots {
    width: 5px;
    height: 55px;
    position: absolute;
    left: 50vw;
  }
  .last-message {
    margin-top: 100px;
  }
  .last-message1, .last-message2 {
    font-size: 2.4rem;
  }
  .top-button {
    display: none;
  }
  /*TOPへ戻るボタン*/
  .mobile_top-button {
    display: block;
    margin: 80px 0 120px 0;
  }
  .mobile_top-button_description {
    color: #186d6f;
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 10px;
  }
  .mobile_buttun_top {
    text-align: center;
    margin: 0 auto;
  }
  .btn05 {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 240px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-family: Quicksand;
    letter-spacing: 0.13em;
    outline: none;
    margin: 0 auto;
  }
  .btn05 span {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #186d6f;
    border-radius: 30px;
    background-color: #186d6f;
    transform-style: preserve-3d;
    transition: 0.5s;
  }
  .rotatefront05 span:nth-child(1) {
    background: #186d6f;
    color: #faf8f4;
    font-size: 1.8rem;
    font-weight: 500;
    transform: rotateX(0deg);
    transform-origin: 0 50% -25px;
  }
  .rotatefront05:hover span:nth-child(1) {
    transform: rotateX(-90deg);
  }
  .rotatefront05 span:nth-child(2) {
    background: #cae9e0;
    color: #186d6f;
    transform: rotateX(90deg);
    transform-origin: 0 50% -25px;
  }
  .rotatefront05:hover span:nth-child(2) {
    transform: rotateX(0deg);
  }
}