@charset "UTF-8";

.bl_pachinet_btnWrap {
  display: inline-flex;
}

.bl_pachinet_btn {
  width: 275px;
  display: inline-block;
  font-size: 17px;
  font-weight: bold;
  border-radius: 3px;
  margin: 6px 0;
  padding: 3px 0;
  color: #fff;
}

.bl_popular {
  border-bottom: 1px solid #888;
  padding-bottom: 18px;
  margin-bottom: 30px;
}

.bl_popular_head,
.bl_type_head {
  font-size: 18px;
  font-weight: bold;
  margin: 20px 0;
}

.bl_type_list {
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
}

.bl_type_item {
  width: calc((100% / 5) - (12.5px * 4 / 5));
  border-radius: 6px;
  -webkit-box-shadow: 0.8rem 0.8rem 1.2rem rgb(0 0 0 / 5%), -0.8rem -0.8rem 1.2rem #fff;
  box-shadow: 0px 0px 4px rgb(0 0 0 / 15%);
  transition: all ease .3s;
  margin-bottom: 38px;
}

.bl_type_item:not(:nth-child(5n)) {
  margin-right: 12.5px;
}

.bl_type_item:hover {
  opacity: .7;
}

.bl_type_item_ttl {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  border-radius: 6px 6px 0 0;
  padding: 6px 0;
}

.bl_type_item_img {
  position: relative;
  padding: 8px 6px;
  transition: .3s ease;
}

.bl_type_item_txtBox {
  padding-top: 10px;
  height: 50px;
  text-align: center;
}

.bl_type_item_txt {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  line-height: 1.3;
  overflow: hidden;
  text-align: left;
  display: inline-block;
}


/* デザイン選択 */
.bl_selected {
  border-bottom: 1px solid #888;
  padding-bottom: 18px;
  margin-bottom: 30px;
}

.bl_selected_headBox {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.bl_selected_head {
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  margin-right: 30px;
  line-height: 1;
}

.bl_selected_dateBtn {
  font-size: 14px;
  font-weight: bold;
  color: #595757;
  background: #e6e6e6;
  padding: 8px 10px;
  border-radius: 5px;
  /* border: 2px solid #888; */
  margin-right: 10px;
  cursor: pointer;
}

.bl_selected_dateBtn.selected {
  color: #fff;
  background: #ed1e79;
}

.bl_selected_list {
  display: flex;
  flex-wrap: wrap;
}

.bl_selected_item {
  width: calc((100% / 3) - (13px * 2 / 3));
  border-radius: 6px;
  -webkit-box-shadow: 0.8rem 0.8rem 1.2rem rgb(0 0 0 / 5%), -0.8rem -0.8rem 1.2rem #fff;
  box-shadow: 0px 0px 4px rgb(0 0 0 / 15%);
  transition: all ease .3s;
  margin-bottom: 13px;
}

.bl_selected_item:hover,
.bl_selected_dateType_item:hover {
  opacity: .7;
}

.bl_selected_item:not(:nth-child(3n)) {
  margin-right: 13px;
}

.bl_selected_item_ttl {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  border-radius: 3px 3px 0 0;
  padding: 6px 0;
}

.bl_selected_item_img {
  padding: 8px 6px;
  transition: .3s ease;
}

.bl_selected_item.item_slected,
.bl_selected_dateType_item.item_slected {
  border: 2px solid #888;
}


.bl_selected_dateType_list {
  display: flex;
  flex-wrap: wrap;
}

.bl_selected_dateType_item {
  width: calc((100% / 3) - (13px * 2 / 3));
  border-radius: 6px;
  -webkit-box-shadow: 0.8rem 0.8rem 1.2rem rgb(0 0 0 / 5%), -0.8rem -0.8rem 1.2rem #fff;
  box-shadow: 0px 0px 4px rgb(0 0 0 / 15%);
  transition: all ease .3s;
  margin-bottom: 13px;
  padding: 6px;
}



.bl_selected_dateType_item:not(:nth-child(3n)) {
  margin-right: 13px;
}

.bl_selected_dateType_item_img {
  /* padding: 8px 6px; */
  transition: .3s ease;
  margin-bottom: 6px;
}

.bl_selected_dateType_item_txt {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 0;
  /* border: 1px solid #888; */
  border-radius: 3px;
}

.bl_selectedBtn {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  display: block;
  padding: 8px 0;
  width: 180px;
  text-align: center;
  border-radius: 5px;
  margin: 20px auto 30px;
  transition: .3s ease;
}

.bl_selectedBtn:hover {
  opacity: .7;
}