#top {
  background-color: black;
}

.title {
  background-image: url("../img/top/title_fire.png");
  background-size: contain;
  width: 100vw;
  height: 91.282vw;
  position: relative;
}

.title_txt1 {
  width: 70.897vw;
  position: absolute;
  top: 3vw;
  left: 50%;
  transform: translateX(-50%);
}

.title_txt2 {
  width: 100vw;
  position: absolute;
  top: 30vw;
}

.top_use {
  position: relative;
  width: 100vw;
  height: 60.205vw;
}

.top_use_img {
  width: 78.205vw;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.btn_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 88vw;
  margin: auto;
  z-index: 11;
}

.btn_ar {
  height: 16.659vw;
  z-index: 11;
}

.btn_howto {
  height: 15.5vw;
  z-index: 11;
}

.sub_title {
  margin-top: 10vw;
  background-image: url(../img/top/sub_title_bg.png);
  background-size: contain;
  width: 100vw;
  height: 18.974vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sub_title_txt {
  height: 12vw;
}

.explantion {
  margin-top: 7vw;
  margin-left: -5vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.number {
  width: 14.102vw;
  height: 13.589vw;
}

.explantion_txt {
  margin-left: 3vw;
  font-size: 4.102vw;
  color: white;
}

.img_container {
  display: flex;
  justify-content: center;
}

.top_1-1_img {
  width: 76.923vw;
}

.top_1-2_img {
  width: 76.41vw;
}

.flex_container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title_2-1 {
  width: 44.102vw;
  margin-top: 3.5vw;
}

.txt_2-1 {
  width: 74.615vw;
  margin-top: -2.5vw;
}

.img_2-1 {
  width: 66.666vw;
  margin-top: -5vw;
}

.title_2-2 {
  width: 35.897vw;
  margin-top: 10vw;
}

.txt_2-2 {
  width: 87.051vw;
  margin-top: -2.5vw;
}

.title_2-3 {
  width: 35.897vw;
}

.txt_2-3 {
  width: 87.051vw;
  margin-top: -2.5vw;
}

.txt_3 {
  width: 88.205vw;
  margin-top: 2vw;
}

.title_3 {
  width: 43.717vw;
  margin-top: -2vw;
}

.btn_kisyu {
  width: 66.666vw;
  margin-top: 5vw;
}

.btn_container_bg {
  position: absolute;
  width: 90.769vw;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

.footer_txt_bold {
  color: white;
  font-size: 3.589vw;
  margin-bottom: 3vw;
}

.footer_txt {
  color: white;
  margin-bottom: 10px;
}
.attention{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: white;
  font-size: 3.0769vw; 
  line-height: 4.10256vw;
  width:87.179vw ;
  height:auto;
  padding-bottom: 5.128vw;
  margin-top: 7vw;
}
.attention2container{
  position: relative;
  left: 11.28205vw;
}
.attention2{
  color: white;
  text-align: left;
  position: relative;
  font-size: 3.0769vw; 
  line-height: 3.84615vw;
  padding-bottom: 2.82051vw;
  list-style-type: "※  ";
}
@media screen and (orientation: landscape) {
  #top {
    display: block;
    position: relative;
    width: 390px;
  }

  .title {
    width: 390px; /* 100vw */
    height: 356px; /* 91.282vw → 356.0px */
  }

  .title_txt1 {
    width: 276.5px; /* 70.897vw */
    top: 11.7px; /* 3vw */
  }

  .title_txt2 {
    width: 390px; /* 100vw */
    top: 117px; /* 30vw */
  }

  .top_use {
    position: relative;
    width: 390vw;
    height: 234.8px;
    left: 50%;
    transform: translateX(-50%);
  }

  .top_use_img {
    width: 305px;
    position: absolute;
  }

  .btn_container {
    width: 343.2px; /* 88vw */
  }

  .btn_ar {
    height: 65px; /* 16.659vw */
  }

  .btn_howto {
    height: 60.5px; /* 15.5vw */
  }

  .sub_title {
    margin-top: 39px; /* 10vw */
    width: 390px; /* 100vw */
    height: 74px; /* 18.974vw */
  }

  .sub_title_txt {
    height: 46.8px; /* 12vw */
  }

  .explantion {
    margin-top: 27.3px; /* 7vw */
    margin-left: -19.5px; /* -5vw */
  }

  .number {
    width: 55px; /* 14.102vw */
    height: 53px; /* 13.589vw */
  }

  .explantion_txt {
    margin-left: 11.7px; /* 3vw */
    font-size: 16px; /* 4.102vw → 16.0px */
  }

  .top_1-1_img {
    width: 300px; /* 76.923vw */
  }

  .top_1-2_img {
    width: 298px; /* 76.41vw */
  }

  .title_2-1 {
    width: 172px; /* 44.102vw */
    margin-top: 13.7px; /* 3.5vw */
  }

  .txt_2-1 {
    width: 291px; /* 74.615vw */
    margin-top: -9.8px; /* -2.5vw */
  }

  .img_2-1 {
    width: 260px; /* 66.666vw */
    margin-top: -19.5px; /* -5vw */
  }

  .title_2-2 {
    width: 140px; /* 35.897vw */
    margin-top: 39px; /* 10vw */
  }

  .txt_2-2 {
    width: 339.5px; /* 68.461vw */
    margin-top: -9.8px; /* -2.5vw */
  }

  .title_2-3 {
    width: 140px; /* 35.897vw */
  }

  .txt_2-3 {
    width: 339.5px; /* 68.461vw */
    margin-top: -9.8px; /* -2.5vw */
  }

  .txt_3 {
    width: 344px; /* 88.205vw */
    margin-top: 7.8px; /* 2vw */
  }

  .title_3 {
    width: 170px; /* 43.717vw */
    margin-top: -7.8px; /* -2vw */
  }

  .btn_kisyu {
    width: 260px; /* 66.666vw */
    margin-top: 19.5px; /* 5vw */
  }

  .btn_container_bg {
    width: 354px; /* 90.769vw */
  }

  .footer_txt_bold {
    font-size: 14px;
    margin-bottom: 11.7px;
  }
.footer_txt {
  color: white;
  margin-bottom: 5px;
}
.attention{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: white;
  font-size: 12px; 
  line-height: 16px;
  width:87.179vw ;
  height:auto;
  padding-bottom: 20px;
  margin-top: 16px;
}
.attention2container{
  position: relative;
  left: 44px;
}
.attention2{
  color: white;
  text-align: left;
  position: relative;
  font-size: 12px; 
  line-height: 15px;
  padding-bottom: 13px;
  list-style-type: "※  ";
}
}