.areaFrame {
  height: 100%;
  border-color: #ffffff;
  border-style: solid;
  background: url(../images/bg.jpg) center center no-repeat;
  background-size: cover;
}
.areaFrame .areaIn {
  position: relative;
  height: 100%;
}
.areaFrame .areaIn .titleImg {
  position: absolute;
  z-index: 0;
}
.areaFrame .areaIn .btnArea {
  position: absolute;
  z-index: 1;
}
.areaFrame .areaIn .btnArea .btnStart {
  text-align: center;
  background: url(../images/arrow_orange_right.svg) right center no-repeat #ffffff;
  color: #FF763F;
  font-weight: bold;
  border-radius: 100px;
  text-decoration: none;
  width: 100%;
  aspect-ratio: 400/100;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 100%;
}

@media only screen and (max-width: 767px) {
  .areaFrame {
    background-image: url(../images/bg_sp.jpg);
    border-width: 10px;
  }
  .areaFrame .areaIn .titleImg {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 92%;
    height: 90%;
  }
  .areaFrame .areaIn .titleImg img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .areaFrame .areaIn .btnArea {
    width: 92%;
    top: 52%;
    left: 4%;
  }
  .areaFrame .areaIn .btnArea .btnStart {
    font-size: clamp(14px, 5.64vw, 22px);
    background-size: 31px;
    background-position: 90% center;
  }
}
@media print, screen and (min-width: 768px) {
  .areaFrame {
    border-width: 10px;
  }
  .areaFrame .areaIn .titleImg {
    width: 80.85%;
    top: 12.24%;
    left: 8.5%;
  }
  .areaFrame .areaIn .btnArea {
    width: 37.74%;
    top: 62.07%;
    left: 31.13%;
  }
  .areaFrame .areaIn .btnArea .btnStart {
    font-size: clamp(21px, 3.24vw, 35px);
    background-size: 39px;
    background-position: 90% center;
  }
}/*# sourceMappingURL=style.css.map */