@charset "utf-8";

h2{
  margin-top: 0;
  padding-top: 15px;
}
.set_css{
  float: left;
  margin-left: 8%;
}
.box{
  width: 300px;
  height: 170px;
}
.step{
  color: white;
  text-align: center;
  line-height: 70px;
  letter-spacing: 0.05em;
  font-weight: 500;
  background-color: #db002b;
  border-radius: 50%;
  width: 70px; height:70px;
  position: relative;
  top: -200px; left: -15px;
  z-index: 2;
}

.small{
  font-size: 9px;
  text-align: center;
  position: relative;
  top:0;
  line-height: normal;
  z-index: 0;
  display: table-cell;
	vertical-align: middle;
}
@media all and (-ms-high-contrast: none) {
  .small{
    font-size: 11px;
  }
}

.one{
  box-shadow: 15px 15px 0px 0 #8ed2df;
}
.two{
  box-shadow: 15px 15px 0px 0 #c38ede;
}
.three{
  box-shadow: 15px 15px 0px 0 #de8ed1;
}
.honbun{
  clear: both;
}
.parent{
  float: left;
  position: relative;
  left: 9%;
}
.explain{
  position: relative;
  left: 10%;
  width: 90%;
}
.title{
  font-size: 1.8em;
  font-weight: bold;
  padding-top: 0.5em;
}
.context{
  position: relative;
  left: 0%; top: -5px;
  width: 90%;
  border-left: solid 7px #db002b;
  padding-left: 5.5%;
  font-size: 1.15em;
}
.last{
  border: none;
}

.fas{
  margin-right: 4%;
}
a{
  text-decoration: none;
  color: white;

}
a:hover{
  text-decoration: underline;
}
.monka{
  color: #65645d;
  text-decoration: underline;
}
.flex_step1_ex{
  clear: both;
}

/*以下から武田追加*/
/*タブレット対応（画面サイズが959px以下の場合ここの記述が適用される）*/
@media screen and (max-width:959px) {

}

/*スマホ対応（画面サイズが559px以下の場合ここの記述が適用される）*/
@media screen and (max-width:559px) {
  .flexbox{
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .flex_step1{
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }
  .flex_step1_ex{
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order:0;
  }
  .flex_step2{
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order:1;
  }
  .flex_step2_ex{
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
  .flex_step3{
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
  }
  .flex_step3_ex{
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
  }

  h2{
    padding-top: 0px;
  }
  .set_css{
    /*float: none;　*/
    margin-left: 10%;
  }
  .box{
    margin-left: 10px;
    width: 240px;
    height: auto;
  }
  .step{
    width:55px;
    height: 55px;
    line-height:55px;
    font-size: 12px;
    top:-165px;
  }
  .small{
    display: none;
  }
  .explain{
  font-size: 13px;
  }
 .title{
  font-size: 1.6em;
  z-index: 10;
  padding-top: 0em;
  padding-right: 30px;
  }
  .title-last-e{
   font-size: 1.6em;
   font-weight: bold;
   margin-top: -0.5em;
   z-index: 10;
   /* padding-top: 0.5em; */
  }
.line{
  top: 19px;
  border-left: solid 7px #db002b;
  left: 12px;
  z-index: 10;
}
 .context{
  top: 3px;
  z-index: 10;
  width: 85%;
  border: none;
  padding-left: 0;
  padding-bottom: 130px;
 }
 .context p{
   font-size: 13px;
   margin-block-start: 0em;
   margin-bottom: 30px;
   line-height: 190%;
 }
 .continue{
  top: 4px;
  z-index: 10;
 }
 .continue p{
   margin:30px 0;
 }
 .second{
   margin-top: -20px;
   z-index: 10;
 }
 .last{
    margin-left: 0px;
    padding-bottom: 0px;
 }
 .last p{
   margin-top: 30px;
 }
 /*ハンバーガーメニューが消える原因になるので削除
 必要であれば、該当ページのcssの順番を入れ替えること
 .sp{
  display: none;
}
*/
 .page7_space{
   padding-top: 30px;
 }
}