/****************** カスタムcss ******************/

/* ここに自由に追記してください */
:root {
  --app-main-txt: #7AD64B; /* メインカラーテキスト */
  --app-main-c-txt: #D64B60; /* メインカラー差色テキスト */
  --app-sbnv-cr: #BCEAA4; /* サブ */
}


/* コンテイナー */
.conWrapper{
  width:90%;
  margin:auto;
}
.conWrapperS{
  width:41%;
  margin:auto;
}
.conWrapperM{
  width:71%;
  margin:auto;
}

/* マーカー | 黄 */
span.mck{
  background:linear-gradient(transparent 60%, #ff6 60%);
}
/* マーカー | 緑 */
span.mck_gr{
  background:linear-gradient(transparent 60%, #BCEAA4 60%);
}
/* マーカー | 赤 */
span.mck_rd{
  background:linear-gradient(transparent 60%, #FFD9DF 60%);
}
/* 強調 | 緑 */
span.color_gr{
  color: var(--app-main-txt);
}/* 強調 | 赤 */
span.color_rd{
  color: var(--app-main-c-txt);
}

h2{
  font-size: 27px;
  margin:48px 0 20px;
}
h3{
  font-size: 24px;
  margin:32px 0 20px;
}

/* 見出し1 */
h2.title1,
h3.title1{
  padding:16px;
  border-bottom: 5px solid var(--app-main-txt);
}
/* 見出し2 */
h2.title2,
h3.title2{
  position:relative;
  background: #F5F5F5;
  border-radius: 8px;
  padding:16px 32px;
}
h2.title2:before,
h3.title2:before{
  position:absolute;
  content: '';
  background: var(--app-main-txt);
  width: 5px;
  height: 60%;
  top:50%;
  left:16px;
  transform: translateY(-50%);
}

/* ふきだし1 緑 */
.balloon {
  position: relative;
  /* display: inline-block; */
  margin: 1.5em 0;
  padding: 16px;
  min-width: 120px;
  width: 50%;
  color: #fff;
  font-size: 16px;
  background: var(--app-main-txt);
  border-radius: 15px;
}

.balloon:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid var(--app-main-txt);
}

.balloon p {
  margin: 0;
  padding: 0;
  color: #fff;
}
/* ふきだし1 赤 */
.balloon.rd{
  background: var(--app-main-c-txt);
}
.balloon.rd:before {
  border-top: 15px solid var(--app-main-c-txt);
}

/* 吹き出し２　緑 */
.balloon2 {
  position: relative;
  width:50%;
  margin: 2em 0 2em 40px;
  padding: 15px;
  background: var(--app-sbnv-cr);
  border-radius: 30px;
}

.balloon2:before {
  content: "";
  position: absolute;
  left: -38px;
  width: 13px;
  height: 12px;
  bottom: 0;
  background: var(--app-sbnv-cr);
  border-radius: 50%;
}

.balloon2:after {
  content: "";
  position: absolute;
  left: -24px;
  width: 20px;
  height: 18px;
  bottom: 3px;
  background: var(--app-sbnv-cr);
  border-radius: 50%;
}
.balloon2 p {
  margin: 0;
  padding: 0;
}
/* 吹き出し２　赤 */
.balloon2.rd,
.balloon2.rd:before,
.balloon2.rd:after{
  background: #FDE8EB;
}

/* ステップ素材 */
ul.stepBox{
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: space-around;
}
ul.stepBox li{
  width: 40%;
  padding: 20px;
  list-style: none;
  display: block;
  position: relative;
  background: #F1FBED;
  border-radius: 8px;
}
ul.stepBox li:after{
  position:absolute;
  content: '';
  background: url(/images/main/stepBox_arrow.png)no-repeat;
  background-size: contain;
  width: 60px;
  height: 48px;
  top: 50%;
  right: -20%;
  transform: translateY(-50%);
}
ul.stepBox li:last-child:after{
  content:none;
}

ul.stepBox2 li{
  list-style: none;
  text-align: center;
  position: relative;
  background: #F1FBED;
  width: 50%;
  padding: 20px;
  margin: 40px auto;
  border-radius: 8px;
}
ul.stepBox2 li:after{
  position:absolute;
  content: '';
  background: url(/images/main/stepBox_arrow2.png)no-repeat;
  background-size: contain;
  width: 16px;
  height: 32px;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
}
ul.stepBox2 li:last-child:after{
  content:none;
}

/* チェックBOX */
.itemBox{
  background: #FDE8EB;
  border-radius: 8px;
  padding:10px 72px;
  position:relative;
}
.itemBox:before{
  position:absolute;
  content: '';
  background: url(/images/main/icon_check.png)no-repeat;
  background-size: contain;
  width: 36px;
  height: 36px;
  top: 50%;
  left: 22px;
  transform: translateY(-50%);
}

.itemBox.item_point{
  background: #F1FBED;
}
.itemBox.item_point:before{
  background: url(/images/main/icon_point.png)no-repeat;
  background-size: contain;
  width: 48px;
  height: 48px;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}

 ul.itemListBox {
  counter-reset: count 0;
  background: #F5F5F5;
  border-radius: 8px;
}
ul.itemListBox li{
  list-style: none;
  font-weight: bold;
}
ul.itemListBox li:before {
  content: counter(count) ". ";
  counter-increment: count 1;
  color: var(--app-main-txt);
}


/* 通常ボタン */
.BtM a {
  max-width: 300px;
  display: block;
  margin: auto;
  background-color: none;
  border: 3px solid #7AD64B;
  color: #7AD64B;
  border-radius: 50px;
  padding: 15px;
}
@media screen and (max-width: 540px){
.BtM a{
    padding: 11px;
}
}

/* 通常ボタン 赤*/
.BtM a.rdBT{
  border: 3px solid var(--app-main-c-txt);
  color: var(--app-main-c-txt);
  background: none;
}

/* 強調ボタン */
.BtM a.strongBT{
  border: 3px solid var(--app-main-txt);
  background: var(--app-main-txt);
  color: #000;
}

/****************** モバイル調整 ******************/

@media screen and (max-width: 540px){
  /* コンテイナー */
  .conWrapper{width:90%;}
  .conWrapperS{width:65%;}
  .conWrapperM{width:90%;}

  h2{
    font-size: 20px;
    margin:40px 0 16px;
  }
  h3{
    font-size: 18px;
    margin:32px 0 16px;
  }

  /* 見出し1 */
  h2.title1,
  h3.title1{
    padding:12px;
    border-bottom: 4px solid var(--app-main-txt);
  }
  /* 見出し2 */
  h2.title2,
  h3.title2{
    position:relative;
    background: #F5F5F5;
    border-radius: 6px;
    padding:14px 28px;
  }
  h2.title2:before,
  h3.title2:before{
    width: 4px;
    left:14px;
  }

  /* ふきだし1 緑 */
  .balloon {
    /* margin: 1.5em 0; */
    /* padding: 16px; */
    min-width: 120px;
    width: 90%;
    font-size: 14px;
    border-radius: 13px;
  }

  /* 吹き出し２　緑 */
  .balloon2 {
    width:80%;
    /* margin: 2em 0 2em 40px; */
  }

  /* ステップ素材 */
  ul.stepBox{
    justify-content: space-between;
    width:auto;
    margin :auto;
  }
  ul.stepBox li{
    width: 44%;
    padding: 16px 12px;
  }
  ul.stepBox li:after{
    width: 20px;
    height: 16px;
    right: -18%;
  }

  ul.stepBox2 li{
    width: 90%;
    padding: 20px 16px;
    margin: 32px auto;
  }
  ul.stepBox2 li:after{
    width: 14px;
    height: 28px;
    bottom: -28px;
  }

  /* チェックBOX */
  .itemBox{
    padding:2px 40px;
  }
  .itemBox:before{
    width: 22px;
    height: 22px;
    left: 14px;
  }

  .itemBox.item_point:before{
    width: 28px;
    height: 28px;
    left: 10px;
  }


}