@charset "utf-8";
:root {
  --viewport: 750;
}

.bold {
  font-weight: bold;
}

#first {
  margin-bottom: 4%;
}
#first h2 {
  font-size: 4.14vw;
  text-align: center;
  background: #eef0f5;
  padding: 1em 0;
  margin-bottom: 3.125%;
}
#first p {
  font-size: 13px;
  font-weight: bold;
}
#first .box {
  background: #eef0f5;
  padding: 4.6875%;
  margin: 4.7% 0 0;
}
#first .box .midashi {
  font-size: 16px;
}
#first .box .period_txt {
  font-size: 75%;
}
#first .box a {
  color: #0563C1;
}
.listL,
.listR {
  width: 92.4%;
  margin: 4% auto 0 auto;
  padding: 4.3% 3% 4.3% 4.6%;
  border-top: 6px solid #222;
  background: #fff;
}
.listL .about_trouble,
.listR .about_trouble {
  text-align: center;
  margin-bottom: 4%;
}
.wp_include_txt {
  margin: 0 auto 2%;
  font-size: 1.4rem;
}
.wp_include a {
  color: #0563C1;
  text-decoration: underline;
}
.heightLine-wp {
  margin: 6% auto;
}
.heightLine-wp a {
  color: #fff;
  text-align: center;
  text-decoration: none;
  background: #000;
  width: calc(100vw / var(--viewport) * 482);
  display: block;
  padding: calc(100vw / var(--viewport) * 25) 0;
  margin: calc(100vw / var(--viewport) * 41) auto 0;
  border-radius: 50px;
  position: relative;
}
.heightLine-wp a:before {
  content: "";
  width: calc(7px + (18 - 7) * ((100vw - 320px) / (767 - 320)));
  height: calc(9px + (26 - 9) * ((100vw - 320px) / (767 - 320)));
  background: url(../../img/top/arr-blue.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 4%;
}

.mt10 {
  margin-top: 1.5625%;
}
.mt20 {
  margin-top: 3.125%;
}
.mt25 {
  margin-top: 3.90625%;
}
.mt30 {
  margin-top: 4.6875%;
}
.mt35 {
  margin-top: 5.46875%;
}

@media screen and (max-width: 767px) {
}

@media screen and (min-width: 768px) {
  #first {
    width: 930px;
    margin: 0 auto 30px;
  }
  #first h2 {
    font-size: 25px;
    margin-bottom: 20px;
  }
  #first p {
    font-size: 16px;
  }
  #first .box {
    padding: 30px 40px;
    margin: 30px 0 0;
  }
  .wp_include {
    display: flex;
    justify-content: space-between;
    margin: 20px auto 0;
  }
  .wp_include a:hover {
    text-decoration: none;
  }
  .listL,
  .listR {
    width: 400px;
    border-top: 3px solid #222;
    padding: 28px 10px;
    margin: 0;
  }
  .dotted_y {
    width: 2px;
    height: 348px;
    background-image: linear-gradient(to bottom, #bcb5a8, #bcb5a8 2px, transparent 2px, transparent 10px);
    background-size: 2px 10px;
    background-position: top center;
    background-repeat: repeat-y;
  }
  .heightLine-wp a {
    font-size: 14px;
    line-height: 1;
    width: 300px;
    padding: 22px 0;
    margin: 33px auto 0;
  }
  .heightLine-wp a:before {
    width: 15px;
    height: 15px;
    right: 7%;
  }
  .listR .heightLine-wp a {
    margin-top: 87px; /* 高さを揃える */
  }

  .mt10 {
    margin-top: 10px;
  }
  .mt20 {
    margin-top: 20px;
  }
  .mt25 {
    margin-top: 25px;
  }
  .mt30 {
    margin-top: 30px;
  }
  .mt35 {
    margin-top: 35px;
  }

}