@charset "utf-8";
/* CSS Document */

.btn_design a {
    display:block;
    width: 90%;
    margin:0;
    padding: 5% 5%;
    border-bottom:dotted 1px #fff;
    font-weight:500;
    font-size:14px;
    color: #333;
    background-color: #ededed;
    text-decoration:none;
}

.top_section_btn {
  display: flex;
  width: 100%;
  padding:3% 0;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  outline: none;
  color:rgba(200,68,112,1.00);
  background-color: #fff;
  position: relative;
  border: 1px solid rgba(200,68,112,1.00);
  transition: color 0.5s ease;
}
.top_section_btn:hover {
  color: #fff;
}
.top_section_btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.top_section_btn::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(200,68,112,1.00);
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
}

.btn_text {
  position: relative;
}


/* Swiper用CSS */
.swiper {
  /*スライダーの幅と高さを調整*/
  width: min(100%, 600px);
  height: 300px;
}

.swiper-slide {
  /*スライド要素の幅と高さを調整*/
  width: 100%;
  height: 100%;

  /*テキストの位置調整*/
  display: flex;
  justify-content: center;
  align-items: center;

  /*テキストの色と太さを指定*/
  color: #fff;
  font-weight: bold;
}

/*①各スライドに以下クラスを追加で付与*/
/*②スライド背景色を設定*/
.slide1 {
  background-color: #88acbd;
}

.slide2 {
  background-color: #99cb1f;
}

.slide3 {
  background-color: #e43a47;
}
/* Swiper用CSS */




@media screen and (min-width: 1000px) {

.btn_design a {
    display:block;
    width: 82%;
    margin:20px 0 20px 0;
    padding: 3% 0 3% 6%;
    border:solid 2px #DA4A7B;
    font-weight:500;
    font-size:13px;
    color: #DA4A7B;
    background-color: #fff;
    text-decoration:none;
    border-radius: 20px;
  transition: all 0s ease;
}

.btn_design a:hover {
    color:#fff;
    background-color:#DA4A7B;
}

.top_section_btn {
  padding:3% 0;margin:0 10% 0 0;width: 90%;max-width:350px;
  }

}