@charset "utf-8";

/* ----------------------------------------
 lead
------------------------------------------- */
#lead .box01{
  width: 35%;
}
#lead .box02{
  width: 60%;
}
/* ----------------------------------------
 coupon
------------------------------------------- */
#coupon .box{
  overflow: hidden;
  border: 4px solid #ff7e00;
  border-radius: 15px;
  background-color: #fff9f4;
}
#coupon .box01{
  width: 35%;
  box-sizing: border-box;
  background-color: #ff7e00;
  border-right: 2px dashed #fff9f4;
  padding: 30px;
}
#coupon .box02{
  width: 65%;
  box-sizing: border-box;
  background-color: #fff9f4;
  padding: 30px;
}
#coupon h2{
  color: #fff;
  font-size: 3rem;
  text-align: center;
  line-height: 1.4;
}
#coupon h3{
  color: #ff7e00;
  font-size: 3rem;
  text-align: center;
  line-height: 1;
  margin-bottom: 10px;
}
#coupon h4{
  color: #f74d61;
  font-family: 'Roboto Condensed','Noto Sans JP', "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif;
  font-size: 3.4rem;
  text-align: center;
  line-height: 1;
}
#coupon h4 span{
  font-size: 150%;
}
#coupon h4 strong{
  font-size: 120%;
}
#coupon p{
  text-align: center;
}
/* ----------------------------------------
 flow
------------------------------------------- */
#flow ul li{
  display: block;
  width: 100%;
  margin-bottom: 50px;
}
#flow ul li .box{
  box-sizing: border-box;
  background-color: #f7faf9;
  padding: 50px;
}
#flow ul li:last-child{
  margin-bottom: 0;
}
#flow .box01{
  width: 30%;
}
#flow .box02{
  width: 65%;
}
#flow .box02 h3{
  color: #000;
  font-size: 3.0rem;
  line-height: 1.4;
  text-align: left;
  border-bottom: 1px solid #cde9d7;
  padding-bottom: 10px;
  margin-bottom: 30px;
}
#flow .box02 h3 span{
  font-size: 120%;
  margin-right: 10px;
}

/* =======================
  PC
======================== */
@media screen and (min-width: 1200px) {}
/* =======================
  TABLET
======================== */
@media screen and (max-width:1199px) {
/* ----------------------------------------
 symptoms-list
------------------------------------------- */
#flow ul li{
  margin-bottom: 4vw;
}
#flow ul li .box{
  padding: 4vw;
}
#flow .box02 h2{
  font-size: 2.5vw;
}

}
/* =======================
  SP
======================== */
@media screen and (max-width: 599px) {
/* ----------------------------------------
 lead
------------------------------------------- */
#lead .box01{
  width: 100%;
  margin-bottom: 15px;
}
#lead .box02{
  width: 100%;
}
/* ----------------------------------------
 coupon
------------------------------------------- */
#coupon .box{
  border: 2px solid #ff7e00;
}
#coupon .box01{
  width: 100%;
  border-bottom: 2px dashed #fff9f4;
  border-right: none;
  padding: 10px 10px;
}
#coupon .box02{
  width: 100%;
  padding: 20px 10px;
}
#coupon h2{
  font-size: 1.8rem;
}
#coupon h3{
  font-size: 1.8rem;
  margin-bottom: 6px;
}
#coupon h4{
  font-size: 2.2rem;
}
/* ----------------------------------------
 #flow
------------------------------------------- */
#flow ul li{
  margin-bottom: 30px;
}
#flow ul li .box{
  padding: 30px;
}
#flow ul li:last-child{
  margin-bottom: 0;
}
#flow .box01{
  width: 100%;
  margin-bottom: 15px;
}
#flow .box02{
  width: 100%;
}
#flow .box02 h3{
  font-size: 1.8rem;
  padding-bottom: 5px;
  margin-bottom: 15px;
}


}