.wp-block-my-block-heading-minimal {
  width: fit-content;
}
.wp-block-my-block-heading-minimal {
    clear: both;
}
.eng-text {
    font-size: clamp(
    15px,
    calc(15px + (100vw - 375px) * 9 / 1069),
    24px
  );
    font-weight: bold;
}
.jp-text:has(h2){
  font-size: clamp(
    28px,
    calc(28px + (100vw - 375px) * 12 / 1069),
    36px
  );
}
.jp-text:has(h3){
  font-size: clamp(
    24px,
    calc(24px + (100vw - 375px) * 12 / 1069),
    36px
  );
}

.icon-eng {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: stretch;
}

.icon-eng img {height: auto;min-width: 15px;}

body h2.jp-text, body h3.jp-text {
    margin: 0;
}

body h4.custom-heading {
  font-size: clamp(
    21px,
    calc(21px + (100vw - 375px) * 9 / 1069),
    30px
  );
  font-weight: bold;
  width: fit-content;
  margin: 0;
  display: flex;
  padding: 4px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: relative;
  background-color: #08DAFF;
}
span.custom-heading4 {
  color: #FFF;
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 175%;
  letter-spacing: 0.72px;
}
h4.custom-heading::after {
  position: absolute;
  content: "";
  right: 0.2px;
  top: -0.1px;
  width: 30px;
  display: block;
  height: 39.5px;
  background: #08DAFF;
  aspect-ratio: 1;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transform: translate(100%, 0);
}

.custom-heading-wrapper {
  padding-top: var(--container-padding-desktop-top);
  padding-right: var(--container-padding-desktop-right);
  padding-bottom: var(--container-padding-desktop-bottom);
  padding-left: var(--container-padding-desktop-left);
}
.wp-block-my-block-heading-minimal:has(h4.custom-heading) {
    width: 100%;
}


@media screen and (max-width: 768px) {


}

/* -------------------------------------------
 * デスクトップ（PC）用のスタイル
 * ------------------------------------------- */
.wp-block-my-block-heading-minimal .heading,.wp-block-my-block-heading-minimal {
  /*
   * var()関数を使って、インラインスタイルで設定されたCSS変数を呼び出します。
   * 第2引数（例: , 0）は、変数が万が一設定されていなかった場合の
   * デフォルト値（フォールバック）として機能します。
   */
  padding-top: var(--container-padding-top, 0);
  padding-right: var(--container-padding-right, 0);
  padding-bottom: var(--container-padding-bottom, 0);
  padding-left: var(--container-padding-left, 0);
}


/* -------------------------------------------
 * モバイル用のスタイル
 * 例として、画面幅が768px未満の場合に適用します。
 * このブレークポイントは、お使いのテーマに合わせて調整してください。
 * ------------------------------------------- */
@media screen and (max-width: 768px) {
  .wp-block-my-block-heading-minimal .heading,.wp-block-my-block-heading-minimal {
    /* モバイル用のCSS変数を呼び出して上書きします */
    padding-top: var(--container-padding-mobile-top, 0);
    padding-right: var(--container-padding-mobile-right, 0);
    padding-bottom: var(--container-padding-mobile-bottom, 0);
    padding-left: var(--container-padding-mobile-left, 0);
  }
}


/* ─────────────────────────────────────────────
   初期状態（アニメーション前のスタイル）
───────────────────────────────────────────── */
.wp-block-my-block-heading-minimal .heading-inner {
  opacity: 0;
  transform: rotateX(30deg) translateY(50px);
  transform-origin: bottom center;
}
.wp-block-my-block-heading-minimal .icon-eng {
  opacity: 0;
  transform: translateX(-40px);
}
.wp-block-my-block-heading-minimal .eng-text,
.wp-block-my-block-heading-minimal .jp-text {
  position: relative;
  overflow: hidden;
}
.wp-block-my-block-heading-minimal .jp-text {
  opacity: 0;
  transform: translateX(-40px);
}
.wp-block-my-block-heading-minimal .eng-text::before,
.wp-block-my-block-heading-minimal .jp-text::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.3),
    transparent
  );
  transform: skewX(-25deg);
}

/* ─────────────────────────────────────────────
   キーフレーム定義
───────────────────────────────────────────── */
@keyframes flipIn3D {
  0% {
    opacity: 0;
    transform: rotateX(90deg) translateY(80px);
  }
  60% {
    opacity: 1;
    transform: rotateX(-15deg) translateY(0);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg) translateY(0);
  }
}

@keyframes slideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes shine {
  to {
    left: 200%;
  }
}

/* ─────────────────────────────────────────────
   .visible 発火時アニメーション
───────────────────────────────────────────── */
.wp-block-my-block-heading-minimal.visible .heading-inner {
  animation: flipIn3D 1s cubic-bezier(.25,.46,.45,.94) forwards;
}

.wp-block-my-block-heading-minimal.visible .icon-eng {
  animation: slideInLeft 0.8s ease-out forwards 0.5s;
}

.wp-block-my-block-heading-minimal.visible .eng-text::before {
  animation: shine 1s ease-out forwards 1s;
}

.wp-block-my-block-heading-minimal.visible .jp-text {
  animation: slideInLeft 0.8s ease-out forwards 0.8s;
}

.wp-block-my-block-heading-minimal.visible .jp-text::before {
  animation: shine 1s ease-out forwards 1.3s;
}