.last {
  width: 61.5%;
  margin: auto;
}
.last_btn {
  display: flex;
  justify-content: space-around;
  margin: 5% 0;
  font-size: 25px;
  width: 100%;
}
.last_btn li {
  color: #bdbdbd;
  position: relative;
  flex: 1;
  text-align: center;
  font-family: "NotoSansJP-semiBold";
}
.last_btn li::after {
  content: "";
  background-color: #bdbdbd;
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0px;
  top: 75%;
}
.last_btn li.active {
  color: #000;
}
.last_btn li.active::after {
  content: "";
  background-color: #000;
}
.tabs {
  position: relative;
  /* height: 50px; */
}
.tabs > div {
  /*position: absolute;*/
  /*opacity: 0;
  visibility: hidden;
  display: flex;*/
  display: none;

}
.tabs > div.active {
  /*opacity: 1;
  visibility: visible;*/
  display: flex;
}
.tabs > div {
  width: 100%;
}
/* ****************************2-1**************************** */
.tabs > div > img {
  flex: 1;
  /* border: 1px solid #000; */
}
.tab_text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 5% 0;
  padding-left: 3%;
}
.tab_text > div {
  /* width: 100%;
  height: 100px; */
  
}
.tab_text h1 {
  font-size: 40px;
  margin-left: 5%;
  position: relative;
  font-family: "NotoSansJP-semiBold";
}
.tab_text h1::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: #ff4444;
  position: absolute;
  left: -23px;
  top: 7px;
}
.tab_text p {
  font-size: 18px;
  color: #686868;
  font-family: "NotoSansJP-Light";
  /*width: 120% !important;*/
  line-height: 1.5em;
}
.tab_text img {
  background-color: #f1f1f1;
  border-radius: 24px;
  padding: 2% 7%;
}

.last_time {
  display: flex;
  align-items: center;
  width: 50%;
  background-color: #f1f1f1;
  border-radius: 24px;
  padding: 2% 3%;
  width: 55%;
}
.last_time span {
  font-family: "NotoSansJP-semiBold";
  font-size: 20px;
}

@media (max-width: 768px) {
  .last {
    width: 90%;
    margin: auto;
  }
  .last_title {
    width: 100%;
  }
  .tabs > div {
    flex-direction: column;
  }
  .tabs > div img {
    width: 990%;
    margin: auto;
    /* width: 400px !important; */
  }
  .tab_text {
    width: 60%;
  }
  .tab_text h1 {
    margin-left: 3%;
  }
  .tab_text p:nth-child(2) {
    width: 95%;
    margin: 5% 0;
  }
  .last_time {
    width: 30%;
    margin-top: 5%;
  }
}
@media (max-width: 375px) {
  .tabs > div > img {
    width: 80%;
  }
  .last_time {
    margin-top: 10%;
    width: 54%;
  }
  .tabs {
    /*height: 100px;*/
  }
}

/* <section class="last">
      <div class="logo_title">
        <img src="./img/2-1/logo.png" alt="" />
        <h3>女性の美しさのための</h3>
        <h3>韓方美容管理<strong>システム</strong></h3>
      </div>
      <ul class="last_btn">
        <li data-alt="tab1" class="active">1整形鍼</li>
        <li data-alt="tab2">2美容鍼</li>
        <li data-alt="tab3">3Vライン輪郭鍼</li>
        <li data-alt="tab4">4MTSマイクロ鍼</li>
      </ul>
      <div class="tabs">
        <div id="tab1" class="active">
          <img src="./img/2-1/last_01.png" alt="" />
          <div class="tab_text">
            <h1>整形鍼</h1>
            <p>
              東洋医学学術誌の論文に掲載された整形鍼はマスコミよりも注目を浴びた韓方美容治療です。施術用鍼を用いて韓方医の手技で真皮層、美容
              東洋医学学術誌の論文に掲載された整形鍼はマスコミよりも注目を浴びた韓方美容治療です。施術用鍼を用いて韓方医の手技で真皮層、美容
            </p>
            <p>
              東洋医学学術誌の論文に掲載された整形鍼はマスコミよりも注目を浴びた韓方美容治療です。施術用鍼を用いて韓方医の手技で真皮層、美容
              東洋医学学術誌の論文に掲載された整形鍼はマスコミよりも注目を浴びた韓方美容治療です。施術用鍼を用いて韓方医の手技で真皮層、美容
            </p>
            <div><img src="./img/2-1/last_time.png" alt="" /></div>
          </div>
        </div>
        <div id="tab2">
          <img src="./img/2-1/last_01.png" alt="" />
          <div class="tab_text">
            <h1>整形鍼</h1>
            <p>
              東洋医学学術誌の論文に掲載された整形鍼はマスコミよりも注目を浴びた韓方美容治療です。施術用鍼を用いて韓方医の手技で真皮層、美容
              東洋医学学術誌の論文に掲載された整形鍼はマスコミよりも注目を浴びた韓方美容治療です。施術用鍼を用いて韓方医の手技で真皮層、美容
            </p>
            <p>
              東洋医学学術誌の論文に掲載された整形鍼はマスコミよりも注目を浴びた韓方美容治療です。施術用鍼を用いて韓方医の手技で真皮層、美容
              東洋医学学術誌の論文に掲載された整形鍼はマスコミよりも注目を浴びた韓方美容治療です。施術用鍼を用いて韓方医の手技で真皮層、美容
            </p>
            <div><img src="./img/2-1/last_time.png" alt="" /></div>
          </div>
        </div>
        <div id="tab3">
          <img src="./img/2-1/last_01.png" alt="" />
          <div class="tab_text">
            <h1>整形鍼</h1>
            <p>
              東洋医学学術誌の論文に掲載された整形鍼はマスコミよりも注目を浴びた韓方美容治療です。施術用鍼を用いて韓方医の手技で真皮層、美容
              東洋医学学術誌の論文に掲載された整形鍼はマスコミよりも注目を浴びた韓方美容治療です。施術用鍼を用いて韓方医の手技で真皮層、美容
            </p>
            <p>
              東洋医学学術誌の論文に掲載された整形鍼はマスコミよりも注目を浴びた韓方美容治療です。施術用鍼を用いて韓方医の手技で真皮層、美容
              東洋医学学術誌の論文に掲載された整形鍼はマスコミよりも注目を浴びた韓方美容治療です。施術用鍼を用いて韓方医の手技で真皮層、美容
            </p>
            <div><img src="./img/2-1/last_time.png" alt="" /></div>
          </div>
        </div>
        <div id="tab4">
          <img src="./img/2-1/last_01.png" alt="" />
          <div class="tab_text">
            <h1>整形鍼</h1>
            <p>
              東洋医学学術誌の論文に掲載された整形鍼はマスコミよりも注目を浴びた韓方美容治療です。施術用鍼を用いて韓方医の手技で真皮層、美容
              東洋医学学術誌の論文に掲載された整形鍼はマスコミよりも注目を浴びた韓方美容治療です。施術用鍼を用いて韓方医の手技で真皮層、美容
            </p>
            <p>
              東洋医学学術誌の論文に掲載された整形鍼はマスコミよりも注目を浴びた韓方美容治療です。施術用鍼を用いて韓方医の手技で真皮層、美容
              東洋医学学術誌の論文に掲載された整形鍼はマスコミよりも注目を浴びた韓方美容治療です。施術用鍼を用いて韓方医の手技で真皮層、美容
            </p>
            <div><img src="./img/2-1/last_time.png" alt="" /></div>
          </div>
        </div>
      </div>
    </section>
    <script>
      $(".last_btn li").click(function () {
        $(this).addClass("active");
        $(this).siblings("li").removeClass("active");

        let tab = $(this).attr("data-alt");
        $(".tabs div").removeClass("active");
        $("#" + tab).addClass("active");
      });
    </script> */