/* ----------------------------
    共通
----------------------------*/
body {
  font-family: hiragino kaku gothic pron, Meiryo, sans-serif;
  background: #fff;
  margin: 0;
}
.grecaptcha-badge {
  visibility: hidden;
}
/* @font-faceのfont-familyでつけた名前を指定 */
.contentBox {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
  font-size: 1rem;
}
input {
  border: 1px solid #dbdbdb;
  margin: 10px 0px;
}
.footer {
  background-color: #FFFFFF;
  padding: 10px 5%;
  color: #000;
  text-align: center;
}
h2 {
  font-size: 1.8rem;
  line-height: 1.2;
  display: block;
  color: #5ac971;
  width: auto;
  text-align: center;
  margin: 1rem auto;
}
p {
  margin: 0.5rem auto !important;
}
.fadeUp {
  opacity: 0;
  opacity: 0;
}
.fadeUp.is-active {
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 1;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(500px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media screen and (min-width: 768px) {
  h2 {
    font-size: 3rem;
    line-height: 1.5;
  }
  .contentBox {
    font-size: 1.5rem;
  }
  .footer {}
}
/* ----------------------------
ファーストビュー
----------------------------*/
.firstView {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 65vh;
  background-image: url(../images/title_bg_element.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  z-index: 1;
}
.firstView__container {
  border: #5ac971 solid 1px;
  width: 100%;
  height: 65vh;
  z-index: 10;
  position: absolute;
}
.firstView__logo {
  /* 大きな看板-------------*/
  width: 100%;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  position: absolute;
  z-index: 10000;
}
.firstView__headLogo {
  width: 20%;
  position: absolute;
  max-width: 100px;
  top: 0;
  z-index: 100000;
}
.firstView__circle--left {
  position: absolute;
  width: 40%;
  top: 0;
}
.firstView__circle--right {
  position: absolute;
  width: 40%;
  bottom: 0;
  right: 0;
}
.firstView__images--left {
  position: absolute;
  width: 50%;
  bottom: 0px;
}
.firstView__images--right {
  position: absolute;
  width: 50%;
  top: 0px;
  right: 0px;
}
@media screen and (min-width: 768px) {
  .firstView {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 85vh;
    background-image: url(../images/title_bg_element.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    z-index: 1;
  }
  .firstView__logo {
    /* 大きな看板-------------*/
    width: 100vh;
    height: 100vh;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    position: absolute;
    z-index: 10000;
  }
  .firstView__headLogo {
    position: absolute;
    width: 10%;
    max-width: 100px;
    top: 0;
    z-index: 100000;
  }
  .firstView__container {
    border: #5ac971 solid 1px;
    width: 100%;
    height: 85vh;
    z-index: 10;
    position: absolute;
  }
  .firstView__circle--left {
    position: absolute;
    width: 20%;
    top: 0;
    z-index: 10;
  }
  .firstView__circle--right {
    position: absolute;
    width: 18%;
    bottom: 0;
    right: 0;
    z-index: 10;
  }
  .firstView__images--left {
    position: absolute;
    width: 28%;
    bottom: 0px;
    z-index: 10;
  }
  .firstView__images--right {
    position: absolute;
    width: 28%;
    top: 0px;
    right: 0px;
    z-index: 10;
  }
}
/* ---------------------------
メールフォーム
----------------------------*/
.wpmem_msg {
  width: 100% !important;
}
button.btn--yellow {
  width: 90%;
  height: 70px;
}
legend, label, .req-text {
  display: none !important;
}
.mailForm {
  background-color: #5ac971;
  padding: 10px;
  position: relative;
  background-image: url(../images/mialForm_coin.webp);
  background-repeat: no-repeat;
  background-position: left;
  background-position: bottom;
  background-size: contain;
  font-family: 'myfont';
  z-index: 10000;
  padding-top: 10px;
}
.mailForm__box {
  background-color: #FFFFFF;
  border-radius: 20px;
  width: 100%;
  height: auto;
  padding: 10px;
}
.mailForm__textArea {
  background-color: #fcf4da;
  width: 100%;
  margin: 0px auto 0px auto;
  border-radius: 20px;
  padding: 0px 4% 2% 4%;
}
.mailForm__textArea2 {
  font-size: 0.7rem;
}
.mailForm__form {
  margin: 10px auto 0 auto;
}
.mailForm__text {
  margin: 10px auto 0 auto;
  font-size: 1rem !important;
}
.mailForm__pr {
  margin-top: 20px;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #E85641;
}
#wpmem_login .button_div, #wpmem_reg .button_div {
  text-align: center !important;
}
#wpmem_reg fieldset {
  margin: 20px 0 !important;
}
#wpmem_reg .textbox {
  padding: 10px !important;
  font-size: 1rem !important;
  width: 100%;
}
#wpmem_reg input.buttons {
  display: inline-block;
  position: relative;
  padding: 10px 30px;
  border-radius: 0.5rem;
  max-width: 320px;
  color: #FFF;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: .1em;
  vertical-align: middle;
  cursor: pointer;
  transition: all .3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all .3s;
  border-bottom: 5px solid #a65d00;
  background-color: #ff7f00;
  text-align: center !important;
}
form#wpmem_login_form {
  display: none;
}
div#wpmem_reg {
  width: 90%;
  /* height: 50px; */
  margin: 0 auto 0px auto;
}
label[for="display_name"], label[for="display_name"] + div {
  display: none !important;
}
@media screen and (min-width: 768px) {
  #wpmem_reg .textbox {
    font-size: 1.5rem !important;
    padding: 20px !important;
  }
  #wpmem_reg input.buttons {
    padding: 20px 60px;
    border-radius: 0.5rem;
  }
  .mailForm {
    background-color: #5ac971;
    padding: 30px;
    position: relative;
    background-image: url(../images/mialForm_coin.webp);
    background-repeat: no-repeat;
    background-position: left;
    background-position: bottom;
    background-size: contain;
    font-family: 'myfont';
    z-index: 10000;
    padding-top: 10px;
  }
  .mailForm__box {
    padding: 10px 0;
  }
  .mailForm__textArea {
    background-color: #fcf4da;
    width: 98%;
    margin: 0px auto 0px auto;
    border-radius: 20px;
    padding: 0px 4% 2% 4%;
  }
  .mailForm__textArea2 {
    font-size: 1rem;
  }
  .mailForm__textArea img {
    margin-top: -30px;
  }
  .mailForm__text {
    margin: 10px auto 0 auto;
    font-size: 1rem;
  }
  .mailForm__pr {
    margin-top: 20px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
  }
}
/* ----------------------------
「アンケ」が選ばれる理由
----------------------------*/
.explain {
  background-color: #fffbd6;
  width: 100%;
  padding: 10px 0;
  background-image: url(../images/explain_bg.webp);
  background-size: cover;
}
.explain__textArea {
  border-radius: 20px;
  background-color: #FFF;
  display: flex;
  flex-flow: column;
  text-align: center;
  padding: 20px 5%;
  width: 98%;
}
.explain__textArea ul {
  text-align: left;
  padding-left: 20px;
}
.explain__textArea li {
  font-weight: 400;
  position: relative;
  padding-left: 10px;
  list-style: none;
  vertical-align: top;
}
.explain__container {
  display: flex;
  flex-flow: row;
  justify-content: center;
}
.explain__containerBox {
  width: 40%;
}
.explain__containerBox p {
  font-weight: 900;
  margin: 20px 0;
}
.explain__containerBox--orange {
  color: #f0a000;
}
.explain__count {
  width: 40%;
}
.explain__textArea li:before {
  content: "";
  position: absolute;
  top: 3px;
  left: -10px;
  -webkit-transform: rotate(50deg);
  -ms-transform: rotate(50deg);
  transform: rotate(50deg);
  width: 8px;
  height: 15px;
  border-right: 3px solid #5ac971;
  border-bottom: 4px solid #5ac971;
}
@media screen and (min-width: 768px) {
  .explain {
    background-color: #fffbd6;
    width: 100%;
    padding: 30px 0;
    background-image: url(../images/explain_bg.webp);
    background-size: cover;
  }
  .explain__textArea {
    display: flex;
    flex-flow: column;
    text-align: center;
    padding: 30px 5%;
  }
  .explain__textArea li {
    font-weight: 400;
  }
  .explain__container {
    flex-flow: row;
    margin: 1rem;
  }
  .explain__containerBox {
    width: 30%;
  }
  .explain__count {
    width: 40%;
  }
}
/* ----------------------------
　3つのステップ
----------------------------*/
.step {
  padding: 30px 0;
}
.step__headImage {
  width: 95%;
  margin: 20px auto;
}
.step__container {
  display: flex;
  flex-flow: column-reverse;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.step__containerPhoto {
  width: 80%;
  margin: 20px auto;
}
.step__containerText {
  display: flex;
  flex-flow: column;
  width: 95%;
  justify-items: center;
  align-items: center;
}
.step__containerText img {
  width: 100px;
}
.step__container--reverse {
  display: flex;
  flex-flow: column-reverse;
  justify-content: space-between;
  align-items: center;
}
.step__headLine--sp {
  display: flex;
  font-size: 1.6rem;
  letter-spacing: 0.1rem;
  line-height: 2.8rem;
}
.step__headLine {
  display: none;
}
@media screen and (min-width: 768px) {
  .step__container {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
  }
  .step__containerPhoto {
    width: 40%;
  }
  .step__containerText {
    display: flex;
    flex-flow: column;
    width: 55%;
    justify-items: center;
  }
  .step__containerText p {
    margin-top: 20px;
  }
  .step__headLine {
    font-size: 3rem;
    letter-spacing: 0.1rem;
    line-height: 2.8rem;
  }
  .step__containerRight {
    text-align: right;
  }
  .step__container--reverse {
    display: flex;
    flex-flow: row-reverse;
    justify-content: space-between;
    align-items: center;
  }
  .step__container--reverse p {
    margin-top: 20px;
  }
  .step__headLine--sp {
    display: none;
  }
}
/* ----------------------------
　アンケートを作って小遣いゲット
----------------------------*/
.making {
  background-color: #5ac971;
  background-image: url(../images/making_bg.webp);
  background-size: cover;
  background-position: center;
}
.making__textWhite img {
  display: none;
}
.making__textWhite {
  display: flex;
  flex-flow: row;
  align-items: center;
  width: 100%;
}
.making__textWhite p {
  width: 100%;
  height: auto;
  margin: 10px 10px;
  padding: 5%;
  text-align: center;
}
.making__circle {
  display: none;
}
.making__interval img {
  display: none;
}
.making__interval p {}
.making__ai {
  flex-flow: column-reverse;
  align-items: center;
  width: 95%;
  margin-top: 0;
  margin-bottom: 0;
}
.making__aiRight {
  display: inline;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #FFFFFF;
  font-weight: 900;
  text-align: center;
}
.making__aiRight--big {
  color: #000;
  background: linear-gradient(transparent 60%, #f08278 0%);
  display: inline;
  padding: 0 1px 0px;
}
.making__aiWhite {
  background-color: #FFFFFF;
  border-radius: 20px;
  width: 100%;
  height: auto;
  padding: 5%;
  text-align: center;
}
.making__aiImg--green {
  display: none;
  width: 100%;
}
.making__aiImg--white {
  display: block;
  width: 60%;
  margin: 0 auto;
  margin-top: 20px;
}
@media screen and (min-width: 768px) {
  .making {
    background-color: #5ac971;
    background-image: url(../images/making_bg.webp);
    background-size: cover;
    background-position: center;
  }
  .making__textArea {
    display: flex;
    flex-flow: column;
    align-items: center;
  }
  .making__headLine {
    width: 60%;
  }
  .making__textWhite {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .making__textWhite p {
    background-color: #FFFFFF;
    border-radius: 20px;
    width: 100%;
    padding: 20px;
  }
  .making__textWhite img {
    width: 40%;
  }
  .making__textwhite--black {
    font-weight: 900;
    background: linear-gradient(transparent 60%, #ffff7f 0%);
  }
  .making__textWhite--orange {
    font-weight: 900;
    color: #f0a000;
    background: linear-gradient(transparent 60%, #ffff7f 0%);
  }
  .making__textWhite--green {
    font-weight: 900;
    color: #5ac971;
  }
  .making__circle {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-shrink: 0;
    justify-content: center;
    overflow-x: hidden;
  }
  .making__circleElement {
    width: 300px;
    height: 300px;
    border-radius: 150px;
    background-color: #FFFFFF;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    margin: 20px 40px;
  }
  .making__circleElement p {
    margin: 10px;
    font-weight: 900;
  }
  .making__interval {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .making__interval img {
    width: 200px;
  }
  .making__interval p {
    font-weight: 900;
    margin: 0 30px;
  }
  .making__ai {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .making__aiRight {
    display: inline;
    flex-flow: column;
    width: 55%;
    color: #FFFFFF;
    font-weight: 900;
  }
  .making__aiRight--big {
    color: #000;
    background: linear-gradient(transparent 60%, #f08278 0%);
    display: inline;
    padding: 0 1px 0px;
  }
  .making__aiWhite {
    background-color: #FFFFFF;
    width: 100%;
    padding: 30px;
    border-radius: 20px;
    color: #000;
    font-weight: 400;
    margin-top: 30px;
  }
  .making__aiImg--green {
    width: 40%;
    display: block;
  }
  .making__aiImg--white {
    display: none;
  }
}
/* ----------------------------
　スキマ時間が もったいない
----------------------------*/
.secondView {
  margin: 10px 0;
  background-image: none;
}
.secondView__four {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: flex-end;
}
.secondView__fourContainer {
  width: 23%;
  text-align: center;
  font-size: 0.7rem;
  margin: 0 1% 0 1%;
}
.secondView__four br {
  display: none;
}
.margin {
  padding-top: 50px;
}
@media screen and (min-width: 768px) {
  .secondView {
    display: flex;
    flex-flow: column;
    align-items: center;
    background-image: url(../images/secondview_bg.webp);
    background-size: cover;
    background-position: bottom;
  }
  .secondView__four {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: flex-end;
  }
  .secondView__fourContainer {
    width: 18%;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 300;
    margin: 0 1% 0 1%;
  }
  .secondView__fourContainer img {
    margin-top: 20px;
  }
}
/* ----------------------------
　3つの特徴
----------------------------*/
.character {
  background-size: cover;
  background-position: bottom;
}
.character__title {
  font-weight: 900;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: none;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0px auto 20px auto;
  width: 100%;
  height: auto;
  color: #5ac971;
}
.character__container {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  background-color: #FFFFFF;
  margin: 0 auto 20px auto;
  padding: 20px;
  border-right: solid 4px #5ac971;
  border-bottom: solid 4px #5ac971;
  border-left: solid 1px #5ac971;
  border-top: solid 1px #5ac971;
  border-radius: 10px;
}
.character__container img {
  width: 100%;
  margin-left: 2%;
}
.character__containerText--big {
  color: #2f8941;
  display: inline;
  padding: 0 1px 0px 0;
  font-weight: 900;
  margin-bottom: 200px;
  text-align: center;
  font-size: 1.2rem;
}
.character__containerText--small {
  margin-top: 10px;
  font-size: 1rem;
  margin-bottom: 20px;
}
.character__containerText--orange {
  color: #f0a000;
  display: inline;
  font-weight: 900;
}
@media screen and (min-width: 768px) {
  .character__title {
    font-size: 2rem;
    font-weight: 900;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../images/character_titlebg.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: 40px auto;
    width: 100%;
    height: 70px;
    color: #FFFFFF;
  }
  .character__container {
    flex-flow: row;
    width: 90%;
    padding: 30px;
  }
  .character__container img {
    width: 30%;
    height: 40%;
    margin-left: 2%;
  }
  .character__containerText--big {
    font-size: 2rem;
    display: inline;
    padding: 0 1px 0px 0;
    font-weight: 900;
    margin-bottom: 200px;
    color: #2f8941;
  }
  .character__containerText--orange {
    color: #f0a000;
    display: inline;
    font-weight: 900;
    font-size: 2rem;
  }
  .character__containerText--small {
    margin-top: 30px;
  }
}
/* ----------------------------
ユーザーの声
----------------------------*/
.voice {
  background-color: #5ac971;
  padding: 10px 0;
}
.voice__title {
  background-image: url(../images/voice_title.webp);
  margin: 20px auto;
  height: auto;
  font-weight: 900;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  color: #FFFFFF;
}
.voice__row {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  margin-bottom: 0;
}
.voice__article {
  width: 95%;
  margin: 0 auto;
  background-color: #FFFFFF;
  border: #f0a000 solid 2px;
  display: flex;
  flex-flow: column;
  margin-bottom: 20px;
}
.voice__articleTitle {
  background-color: #f0a000;
  position: relative;
}
.voice__articleTitle img {
  position: absolute;
  width: 100px;
  top: -20px;
}
.voice__articleTitle p {
  font-weight: 900;
  color: #FFFFFF;
  padding: 10px 0 10px 110px;
}
.voice__contents {
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 10px 0 0 0;
}
.voice__contents img {
  width: 30%;
}
.voice__name {
  display: inline-block;
  width: 90%;
  font-weight: 900;
}
.voice__word {
  margin-top: 10px;
  display: inline-block;
  width: 90%;
}
@media screen and (min-width: 768px) {
  .voice__title {
    font-size: 2rem;
    font-weight: 900;
    margin: 40px auto;
    width: 100%;
    height: 70px;
    color: #FFFFFF;
  }
  .voice__row {
    flex-flow: row;
    margin-bottom: 30px;
  }
  .voice__article {
    width: 48%;
  }
  .voice__contents img {
    width: 180px;
  }
}
/* ----------------------------
よくあるご質問
----------------------------*/
.question {
  background-color: #fffbd6;
  padding: 20px auto;
}
.question__title {
  background-image: none;
  margin: 20px auto;
  height: auto;
  font-weight: 900;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../images/question_title.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  color: #FFFFFF;
}
.question__container {
  background-color: #FFFFFF;
  padding: 5px 5px;
  border-radius: 10px;
  width: 95%;
  margin: 0 auto 10px;
}
.question__quesiton, .question__answer {
  background-color: #FFFFFF;
  padding: 10px 10px;
}
.question__answer {
  background-color: #f2eecb;
}
.question__img {
  display: none;
}
@media screen and (min-width: 768px) {
  .question {
    padding: 20px auto;
  }
  .question__title {
    font-size: 2rem;
    font-weight: 900;
    margin: 40px auto;
    width: 100%;
    height: 70px;
    color: #FFFFFF;
  }
  .question__container {
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 40px;
  }
  .question__quesiton, .question__answer {
    padding: 20px 60px;
  }
}
/* aa ID用のCSS */
#aa {
  padding: 500px;
}
sup {
  color: #FF0004;
  font-size: 10px;
  font-weight: 800;
  vertical-align: super;
}
  /* アニメーション */
  .cloud-wrap:hover, .cloud-wrap:active {
    animation: cloud_anim 1s ease-in-out infinite alternate;
  }
  @keyframes cloud_anim {
    0% {
      transform: translateX(-5%);
    }
    100% {
      transform: translateX(5%);
    }
  }
 .cloud-wrap {
    color: #F3F3F3;
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
  }
  .cloud-wrap:before, .cloud-wrap:after {
    position: absolute;
    top: 50%;
    left: 0%;
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: currentColor;
  }
  .cloud-wrap:before {
    transform: translate(-50%, -50%) rotate(65deg);
  }
  .cloud-wrap:after {
    transform: translate(-50%, -50%) rotate(-65deg);
  }
  .cloud-wrap .cloud {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: currentColor;
    transform: rotate(0);
  }
  .cloud-wrap .cloud:before, .cloud-wrap .cloud:after {
    position: absolute;
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: inherit;
  }
  .cloud-wrap .cloud:before {
    transform: rotate(15deg);
  }
  .cloud-wrap .cloud:after {
    transform: rotate(45deg);
  }
  /* テキスト */
  .cloud-wrap .text {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: #000;
  }
@media screen and (min-width: 768px) {
  .cloud-wrap {
    width: 50px;
    height: 50px;
  }
  .cloud-wrap:before, .cloud-wrap:after {
    position: absolute;
    top: 50%;
    left: 0%;
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: currentColor;
  }
  .cloud-wrap:before {
    transform: translate(-50%, -50%) rotate(65deg);
  }
  .cloud-wrap:after {
    transform: translate(-50%, -50%) rotate(-65deg);
  }
  .cloud-wrap .cloud {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: currentColor;
    transform: rotate(0);
  }
  .cloud-wrap .cloud:before, .cloud-wrap .cloud:after {
    position: absolute;
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: inherit;
  }
  .cloud-wrap .cloud:before {
    transform: rotate(15deg);
  }
  .cloud-wrap .cloud:after {
    transform: rotate(45deg);
  }
  /* テキスト */
  .cloud-wrap .text {
     top: 50%;
    left: 50%;
    font-size: 1.5rem;
  }

}