/* ========================================
   カスタム追加スタイル
   サイト固有・更新可能な実装

   このファイルのみ自由に編集可能
   他のファイル（core-adjustments, layout, block-styles, components）は固定
======================================== */

/* 症例 Before/After（PC：横並び＋▶、SP：縦並び＋▼） */
.wp-block-columns.case-before-after {
  align-items: flex-start;
  gap: 60px;
  margin-bottom: 30px;
}

.wp-block-columns.case-before-after > .wp-block-column {
  position: relative;
}

.wp-block-columns.case-before-after > .wp-block-column:first-child::after {
  content: "";
  background-color: #555;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  width: 22px;
  height: 26px;
  position: absolute;
  top: 50%;
  right: -41px;
  transform: translateY(-50%);
}

.wp-block-columns.case-before-after .wp-block-image {
  margin: 0;
}

.case-before-after + .wp-block-flexible-table-block-table td ul {
  margin: 0;
  padding-left: 1.3em;
}

.case-before-after + .wp-block-flexible-table-block-table td ul li {
  display: list-item;
  list-style: disc;
}

@media (max-width: 781px) {
  .wp-block-columns.case-before-after {
    gap: 50px;
  }

  .wp-block-columns.case-before-after > .wp-block-column:first-child::after {
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    width: 26px;
    height: 22px;
    top: auto;
    right: auto;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
  }
}