.plan_box_wrap{
  display: grid;
  justify-content: center;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
.plan_box{
  border: 1px solid #cccccc;
  border-radius: 10px;
  padding: 40px 30px 30px;
  margin: 0;
  font-size: 16px;
  width: 100%;
}

.plan_desc{
  font-size: 16px;
  color: #848484;
  text-align: center;
}
.plan_price{
  font-size: 38px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}
.plan_price span{
  font-size: 16px;
  font-weight: normal;
  color: #5f5f5f;
}
.plan_price del{
  font-size: 28px;
  color: #848484;
  font-weight: normal;
  margin-right: 6px;
  vertical-align: middle;
}
.plan_year_discount {
  margin: 0;
  position: absolute;
  bottom: -24px;
  left: calc(50% - 40px);
  width: 80px;
  height: 20px;
  background: #4fc660;
  text-align: center;
  color: #ffffff;
  line-height: 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 4px;
}

.plan_box .wp-block-heading{
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: #333333;
  margin: 0 0 30px;
}
.plan_box .wp-block-button{
  width: 100%;
  margin: 10px 0;
}
.plan_box .wp-block-button a{
  border-radius: 10px;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 700;
}
.plan_list_icon{
  padding-left: 0;
  list-style: none;
}
.plan_list_checked li, .plan_list_icon li{
  position: relative;
  padding-left: 24px;
}
.plan_list_icon_mail::before{
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background: url("../img/pricing/icon_mail.png") no-repeat;
  background-size: cover;
  position: absolute;
  top: 2px;
  left: 0;
}
.plan_list_icon_cart::before{
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background: url("../img/pricing/icon_cart.png") no-repeat;
  background-size: cover;
  position: absolute;
  top: 2px;
  left: 0;
}
.plan_list_icon_cart_notes{
  list-style: none;
  padding-left: 10px;
  font-size: 14px;
  color: #333333;
  margin: 4px 0 0;
}
.plan_list_icon_cart_notes li{
  padding: 0;
  margin: 4px 0 0;
}
.plan_list_checked{
  padding: 10px 0 0;
  list-style: none;
  border-top: 1px solid #e8e8e8;
}
.plan_list_checked li::before{
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALRSURBVHgBzZg/b9NAFMDfu9aponZIiygYGBwhtorST9CEgYGpfIK2I1PKJ0jzCSATbC0SA1uZGBhouoHEUCT2GIniAiLNQElDmnvcu/zBhCS2EzvmJzk52xf7p9y9u3uHEBCHHAvr02sk5LI6zSBgioBSfE+VqxLIFgQ2kDigmfMXJpp2gMerZ/gV+fV1Q32tA1AGAkAAh0q0aCYWd/3U9xRyGt8yQHJHFS0YD1u9ruAlNlCoTOVU8nw2T0RbECII4lHN+FFIY7ra/34fnJpj0ZTYUzdvQTTYYMhsv/6F/WRgSuzD+E00kpRwn3AzTUiGsagh9vQ7Bwlxn5mQjIa7RLIxl++51qIV1rQDcYAiaxoXS1x0/UOUh7hoDSsaLdQe9CyID6vt0BJSQ38O4medP7Ad5mX4HzBkWiDiGkTIu/IbePXhpa+6VMe1aTmFq0gQCSzz/O0zXb6+eEMfw0AhloXqQBZELHNn6a6nTAvKCAFoQcj0yvDhBzUopkRnceXF0ckRVE4rnvVGlWGIhfxUZJknr4v6GCY1jkwHwctOr0oLcwswr47K6feBUmHIqCarcpN5CiWNJNy/nYMr89f6SoUh01ayOcoO/FQdJBWeDICU8iMenx1vkcCHfn9Ua9TgsZL5fPIJFmYvaLkwZBiS9GCkqcMtFZaMRk0dej2kZtr9oOlNR2rp6s1QZFRwHV5OLK60hZwNFXDxLM66yE0zYe66VoxfuNksiAfbTFxKc+HPwIhyE2JDFjqlrpBpmCU1JhVhwvA7uamgV4ipGzPbnIvD5LDrRm3bfeEvoTTOV7Ep74HOw6OX4USxN6X+Z3I1kyqTbMosRCilW2FAKt13tmepMyOxEkWf4mfWjZ/ZQftG3tsxrTEqjIzW5kjm4BlWKcCGlbNBIHLBd0SwBNB86o6kUIS6Ymru05kK4qpEsHgJ7N7Say9nSijpPc1Q4C293zS0XC90pka4AAAAAElFTkSuQmCC) no-repeat;
  background-size: cover;
  position: absolute;
  top: 2px;
  left: 0;
}
.plan_recommended{
  position: absolute;
  top: -14px;
  left: calc(50% - 100px);
  width: 200px;
  height: 30px;
  background: #1463ff;
  text-align: center;
  line-height: 30px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 20px;
}

.plan_switch_wrap{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 220px;
  color: #848484;
}
.plan_switch_wrap p{
  margin: 0;
}
.plan_switch_wrap .plan_current{
  color: #222222;
  font-weight: 700;
}
.plan_switch{
  display: inline-block;
  width: 28px;
  height: 16px;
  background: #222222;
  border-radius: 10px;
  position: relative;
  margin: 0;
  cursor: pointer;
}
.plan_switch_current{
  display: block;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-radius: 6px;
  position: absolute;
  top: 2px;
  left: 2px;
}

@media (max-width:781px) {
  .plan_box_wrap{
    grid-template-columns: 1fr;
    grid-auto-flow: dense;
  }
}