/*
Theme Name: freemaile_02
*/
@charset "UTF-8";
.testdrive-ttlarea {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJklEQVQYV2NkYGD4z8DAkM6ABhgZGBjS0AVBfKIlZsKMJVoH3DoAlBgEa1cQaDcAAAAASUVORK5CYII="),url(../images/testdrive/testdrive_mv.jpg) no-repeat center bottom/cover;
}
.testdrive-wrapper{
	background-color: #fff;
}
.testdrive{
	padding: 90px 0;
}
.testdrive_intro{
	margin-bottom: 60px;
}
.testdrive_intro_ttl{
	font-size: 2.4rem;
	font-weight: bold;
	letter-spacing: 0.1em;
	margin-bottom: 30px;
}
.testdrive_intro_txt{
	font-size: 1.6rem;
	letter-spacing: 0.05em;
}
.step {
  margin-bottom: 60px;
  padding-bottom: 340px;
  background: url(../images/testdrive/step_bg.png) no-repeat center bottom;
  background-size: 100% auto;
}
.step .col {
  margin-bottom: 60px;
  position: relative;
  text-align: center;
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  .step .col {
    width: 416px;
  }
}
.step .col .num {
  width: 80px;
  height: 80px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #e60012;
  background: #fff;
  border: 5px solid #e60012;
  border-radius: 50%;
  position: absolute;
  top: -30px;
  left: -30px;
}
.step .col .num p:nth-child(1) {
  font-size: 12px;
  line-height: 12px;
  margin-bottom: 5px;
  font-weight: bold;
}
.step .col .no {
  font-size: 20px;
  line-height: 20px;
  font-weight: bold;
}
.step .col figure {
  margin-bottom: 20px;
  border: 1px solid #707070;
  border-radius: 16px;
}
.step .col .txt {
  font-weight: bold;
  font-size: 20px;
}
.benefit {
  position: relative;
  justify-content: center;
  flex-direction: row-reverse;
}
.benefit h4 {
  margin-bottom: 20px;
  font-size: 30px;
  font-weight: bold;
}
.benefit li {
  font-size: 20px;
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  .benefit {
    margin: auto;
    width: 900px;
  }
  .benefit .txt {
    padding-top: 90px;
    width: 550px;
  }
  .benefit .img {
    margin-right: 30px;
    width: 266px;
  }
}
.benefit p {
  margin-bottom: 40px;
  font-size: 20px;
}
.supplement {
  margin-bottom: 200px;
  padding: 100px 0;
  background: #eff0f2;
}
.supplement .box {
  padding: 40px 110px 50px;
}
.supplement h4 {
  margin-bottom: 30px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}
.supplement 
.notice {
  font-size: 14px;
}
@media screen and (max-width: 767px) {
  .testdrive-ttlarea{
    background: url(../images/testdrive/testdrive_mv.jpg) no-repeat -83vw -110vw;
    background-size: 284vw auto;
  }
  .testdrive-ttlarea .ttlgroup{
    top: 60px;
  }
  .pagettl{
    line-height: 1em;
  }
  .testdrive{
    padding: 45px 0;
  }
  .testdrive_intro_ttl{
    font-size: 1.8rem;
    margin-bottom: 15px;
  }
  .testdrive_intro_txt{
    font-size: 1.4rem;
  }
  .testdrive_intro{
    margin-bottom: 30px;
  }
  .step {
    background-position: 30% bottom;
    background-size: auto 72.187vw;
  }
  .step .col .num {
    width: 20vw;
    height: 20vw;
    top: -8vw;
    left: 0;
    border-width: 6px;
  }
  .step .col .txt {
    font-size: 16px;
  }
  .benefit h4 {
    margin-bottom: 10px;
    font-size: 20px;
  }
  .benefit p {
    font-size: 16px;
  }
  .benefit .img {
    margin: auto;
    width: 70%;
  }
  .supplement .box {
    padding: 10px;
  }
  .supplement h4 {
    font-size: 18px;
  }
  .supplement ul {
    margin-left: 0;
  }
}