/* ------------- 共通：ボタンの基礎 ------------- */
.wp-block-button.is-style-blue-arrow .wp-block-button__link,
.wp-block-button.is-style-white-arrow .wp-block-button__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 290px !important;
    gap: .5em;
    text-decoration: none;
    border-radius: .4rem; /* お好みで変更可能 */
    transition: filter .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
    line-height: 1.2;
    padding: 18.4px 24px; /* 右側に矢印ぶんの余白を確保 */
    cursor: pointer;
    white-space: nowrap;
}

/* ------------- デザイン1：青ボタン ------------- */
.wp-block-button.is-style-blue-arrow .wp-block-button__link {
    background-color: #034D7A;
    color: #fff;
    border: none;
    /* 右端に白い矢印 */
    background-image: url('assets/img/icon_arrow_wt.svg');
    background-repeat: no-repeat;
    background-position: right 1.1em center;
    background-size: 1.4em auto; /* 小さめに表示 */
}
/* --- 青ボタン：ホバー時の強調（ご指定どおり） --- */
.wp-block-button.is-style-blue-arrow .wp-block-button__link:hover,
.wp-block-button.is-style-blue-arrow .wp-block-button__link:focus-visible {
    filter: brightness(1.6) saturate(1.3);
    outline: none;
}

/* ------------- デザイン2：白ボタン ------------- */
.wp-block-button.is-style-white-arrow .wp-block-button__link {
    background-color: #fff;
    color: #034D7A;
    border: 2px solid #034D7A;
    /* 右端に青い矢印 */
    background-image: url('assets/img/icon_arrow_small.svg');
    background-repeat: no-repeat;
    background-position: right 1.1em center;
    background-size: 1.4em auto;
}
/* --- 白ボタン：ホバーで青塗り＋白文字＋白矢印 --- */
.wp-block-button.is-style-white-arrow .wp-block-button__link:hover,
.wp-block-button.is-style-white-arrow .wp-block-button__link:focus-visible {
    background-color: #034D7A !important; /* ← 強制的に塗りつぶし */
    color: #fff !important;
    border-color: #034D7A !important;
    background-image: url('assets/img/icon_arrow_wt.svg');
    background-repeat: no-repeat;
    background-position: right 1.1em center;
    background-size: 1.4em auto;
    outline: none;
    filter: none !important; /* ← 他のfilter系の影響を打ち消し */
    opacity: 1 !important;   /* ← テーマによる半透明化を防止 */
}

/* ------------- エディタ内でも確実に適用 ------------- */
.editor-styles-wrapper .wp-block-button.is-style-blue-arrow .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.is-style-white-arrow .wp-block-button__link {
    /* 上で指定した内容がそのまま効く想定。万一テーマ側が強い指定を持つ場合の補強として置いています。 */
    padding: 18.4px 24px;
    min-width: 290px !important;    
}

/* ------------- アクセシビリティ（キーボード操作の見やすさ） ------------- */
.wp-block-button.is-style-blue-arrow .wp-block-button__link:focus-visible,
.wp-block-button.is-style-white-arrow .wp-block-button__link:focus-visible {
    box-shadow: 0 0 0 3px rgba(3,77,122,.2);
}

/* ------------- ブロックの余計な上書きを軽減（テーマ依存で必要な場合） ------------- */
.wp-block-button.is-style-blue-arrow .wp-block-button__link.wp-element-button,
.wp-block-button.is-style-white-arrow .wp-block-button__link.wp-element-button {
    /* 一部テーマの .wp-element-button が色を上書きするのを防ぐ */

}

/* エディタ内の iframe にも同じ指定を適用（保険） */
.editor-styles-wrapper .wp-block-button.is-style-blue-arrow .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button.is-style-blue-arrow .wp-block-button__link:focus-visible {
    filter: brightness(1.6) saturate(1.3);
    outline: none;
}
.editor-styles-wrapper .wp-block-button.is-style-white-arrow .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button.is-style-white-arrow .wp-block-button__link:focus-visible {
    background-color: #034D7A;
    color: #fff;
    border-color: #034D7A;
    background-image: url('assets/img/icon_arrow_wt.svg');
    outline: none;
}