/* button-block.css
   WordPress core/button block styles
   - Outline Fill (丸矢印)
   - Fill (丸矢印・反転)
*/

:root {
    --btn-h: 52px;
    --btn-px: 22px;

    /* テキスト色（濃色/白） */
    --btn-fg: #0a2233;
    --btn-fg-hover: #ffffff;

    /* 輪郭色 */
    --btn-border-color: #a7a7a7;

    /* グラデーション色 */
    --btn-grad-start: #0181a7;
    --btn-grad-end: #0181a7;

    /* アイコン（丸と矢印） */
    --icon-size: 28px;
    --icon-gap: 10px;
    --icon-bg: #418D9F;
    /* 濃色丸（輪郭版の通常/塗り版のホバー） */
    --icon-bg-hover: #ffffff;
    /* 白丸（輪郭版のホバー/塗り版の通常） */
    --icon-color: #ffffff;
    /* 白矢印（輪郭版の通常/塗り版のホバー） */
    --icon-color-hover: #418D9F;
    /* 濃色矢印（輪郭版のホバー/塗り版の通常） */
}

/* 共通：編集画面/フロント両方で意図通りにするためのベース */
.wp-block-button {
    display: inline-flex;
    position: relative;
    border-radius: 999px;
}

/* 共通リンク */
.wp-block-button__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--icon-gap);
    height: var(--btn-h);
    padding: 2em calc(var(--btn-px) + var(--icon-size) + var(--icon-gap)) 2em var(--btn-px);
    border-radius: 999px;
    text-decoration: none;
    overflow: hidden;
    z-index: 1; /* 塗りレイヤーより前に出す */
    transition: color .3s ease, transform .25s ease;
}

/* アクセシビリティ：フォーカスリング */
.wp-block-button__link:focus-visible {
    outline: 3px solid color-mix(in oklab, var(--btn-grad-end), white 25%);
    outline-offset: 2px;
}

/* 低モーション環境 */
@media (prefers-reduced-motion: reduce) {
    .wp-block-button__link {
        transition: none !important;
    }
}

/* =========================================================
   共通：塗りレイヤー（ラッパー側の ::before を使う）
   - circle 系 / plain 系 で方向だけ変える
========================================================= */

/* ▼ Outline Fill（丸矢印）用：左→右に広がる */
.wp-block-button.is-style-outline-fill-circle {
    background-color: #ffffff;  /* 下地は白 */
    overflow: hidden;
}
.wp-block-button.is-style-outline-fill-circle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: linear-gradient(90deg, var(--btn-grad-start), var(--btn-grad-end));
    background-repeat: no-repeat;
    transform-origin: left center;
    transform: scaleX(0);           /* 初期は塗りなし */
    transition: transform .45s ease;
    z-index: 0;
    pointer-events: none;
}

/* ▼ Fill（丸矢印・反転）用：右→左に引いていく */
.wp-block-button.is-style-fill-circle {
    background-color: #ffffff;  /* 下地は白 */
    overflow: hidden;
}
.wp-block-button.is-style-fill-circle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: linear-gradient(90deg, var(--btn-grad-start), var(--btn-grad-end));
    background-repeat: no-repeat;
    transform-origin: right center;
    transform: scaleX(1);           /* 初期は全面塗り */
    transition: transform .45s ease;
    z-index: 0;
    pointer-events: none;
}

/* =========================================================
   A) Outline Fill（丸矢印）
   - 初期：輪郭のみ、文字=濃色、背景=白
   - ホバー：左→右に塗りが広がり、文字=白、丸=白、矢印=濃色
   ========================================================= */
.wp-block-button.is-style-outline-fill-circle .wp-block-button__link {
    border: 1px solid var(--btn-border-color);
    color: var(--btn-fg);
    background-color: transparent; /* 塗りはラッパー::before が担当 */
}

/* 右端の“丸” */
.wp-block-button.is-style-outline-fill-circle .wp-block-button__link::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: var(--btn-px);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: 50%;
    background: var(--icon-bg);
    transition: background-color .3s ease, transform .35s ease;
}

/* 丸の上に“矢印”（mask で色付け可能に） */
.wp-block-button.is-style-outline-fill-circle .wp-block-button__link::before {
    content: "";
    position: absolute;
    z-index: 3;
    right: calc(var(--btn-px) + (var(--icon-size) - 14px)/2);
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: var(--icon-color);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h12 M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h12 M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transition: transform .35s ease, background-color .3s ease;
}

/* ホバー挙動（塗り＋文字色＋丸＋矢印） */
.wp-block-button.is-style-outline-fill-circle:hover::before,
.wp-block-button.is-style-outline-fill-circle:focus-within::before {
    transform: scaleX(1); /* 塗りが左→右に広がる */
}
.wp-block-button.is-style-outline-fill-circle .wp-block-button__link:hover,
.wp-block-button.is-style-outline-fill-circle .wp-block-button__link:focus-visible {
    color: var(--btn-fg-hover);
	border: 1px solid var(--btn-grad-start);
}
.wp-block-button.is-style-outline-fill-circle .wp-block-button__link:hover::after,
.wp-block-button.is-style-outline-fill-circle .wp-block-button__link:focus-visible::after {
    background: var(--icon-bg-hover); /* 白丸 */
}
.wp-block-button.is-style-outline-fill-circle .wp-block-button__link:hover::before,
.wp-block-button.is-style-outline-fill-circle .wp-block-button__link:focus-visible::before {
    background-color: var(--icon-color-hover); /* 濃色矢印 */
    transform: translateY(-50%) translateX(2px);
}

/* =========================================================
   B) Fill（丸矢印・反転）
   - 初期：全面グラデ塗り、文字=白、丸=白、矢印=濃色
   - ホバー：白背景が左→右に広がる（=塗りが引く）、文字=濃色、丸=濃色、矢印=白
   ========================================================= */
.wp-block-button.is-style-fill-circle .wp-block-button__link {
    border: 1px solid var(--btn-grad-start);
    color: var(--btn-fg-hover); /* 白文字 */
    background-color: transparent; /* 塗りはラッパー::before が担当 */
}

/* 右端の“白丸”（初期） */
.wp-block-button.is-style-fill-circle .wp-block-button__link::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: var(--btn-px);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: 50%;
    background: var(--icon-bg-hover); /* 白丸 */
    transition: background-color .3s ease, transform .35s ease;
}

/* 濃色矢印（初期） */
.wp-block-button.is-style-fill-circle .wp-block-button__link::before {
    content: "";
    position: absolute;
    z-index: 3;
    right: calc(var(--btn-px) + (var(--icon-size) - 14px)/2);
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: var(--icon-color-hover); /* 濃色矢印 */
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h12 M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h12 M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transition: transform .35s ease, background-color .3s ease;
}

/* ホバー挙動（L→Rで白が広がる＝塗りが引く） */
.wp-block-button.is-style-fill-circle:hover::before,
.wp-block-button.is-style-fill-circle:focus-within::before {
    transform: scaleX(0); /* 右→左にグラデが引いて白が露出 */
}
.wp-block-button.is-style-fill-circle .wp-block-button__link:hover,
.wp-block-button.is-style-fill-circle .wp-block-button__link:focus-visible {
    color: var(--btn-fg); /* 濃色文字 */
	border: 1px solid var(--btn-border-color);
}
.wp-block-button.is-style-fill-circle .wp-block-button__link:hover::after,
.wp-block-button.is-style-fill-circle .wp-block-button__link:focus-visible::after {
    background: var(--icon-bg); /* 濃色丸 */
}
.wp-block-button.is-style-fill-circle .wp-block-button__link:hover::before,
.wp-block-button.is-style-fill-circle .wp-block-button__link:focus-visible::before {
    background-color: var(--icon-color); /* 白矢印 */
    transform: translateY(-50%) translateX(2px);
}

/* ====== 強制適用パッチ：枠線 & 右余白 が効かない環境向け ====== */
.wp-block-button.is-style-fill-circle>.wp-block-button__link,
.wp-block-button.is-style-fill-circle>.wp-block-button__link.wp-element-button {
    box-sizing: border-box;
    padding-left: var(--btn-px) !important;
    padding-right: calc(var(--btn-px) + var(--icon-size) + var(--icon-gap)) !important;
}

.wp-block-button.is-style-outline-fill-circle>.wp-block-button__link,
.wp-block-button.is-style-outline-fill-circle>.wp-block-button__link.wp-element-button {
    box-sizing: border-box;
    padding-left: var(--btn-px) !important;
    padding-right: calc(var(--btn-px) + var(--icon-size) + var(--icon-gap) + 2.4rem) !important;
}

/* 念のため：丸アイコンの位置も右余白に追従 */
.wp-block-button.is-style-outline-fill-circle .wp-block-button__link::after,
.wp-block-button.is-style-fill-circle .wp-block-button__link::after {
    right: var(--btn-px) !important;
}

/* =========================================================
   矢印なし：Outline Fill（輪郭ベース）
========================================================= */
.wp-block-button.is-style-outline-fill-plain>.wp-block-button__link,
.wp-block-button.is-style-outline-fill-plain>.wp-block-button__link.wp-element-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--btn-h);
    padding: 0 var(--btn-px) !important;
    border-radius: 999px;
    border: 1px solid var(--btn-border-color);
    color: var(--btn-fg);
    text-decoration: none;
    overflow: hidden;
    background-color: #ffffff;
    z-index: 1;
}

/* 左→右に塗りが広がる（plain 用レイヤー） */
.wp-block-button.is-style-outline-fill-plain>.wp-block-button__link::before,
.wp-block-button.is-style-outline-fill-plain>.wp-block-button__link.wp-element-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, var(--btn-grad-start), var(--btn-grad-end));
    background-repeat: no-repeat;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform .45s ease;
    z-index: -1;
    pointer-events: none;
}

.wp-block-button.is-style-outline-fill-plain>.wp-block-button__link:hover::before,
.wp-block-button.is-style-outline-fill-plain>.wp-block-button__link:focus-visible::before {
    transform: scaleX(1);
}
.wp-block-button.is-style-outline-fill-plain>.wp-block-button__link:hover,
.wp-block-button.is-style-outline-fill-plain>.wp-block-button__link:focus-visible {
    color: var(--btn-fg-hover);
	border: 1px solid var(--btn-grad-start);
}

/* =========================================================
   矢印なし：Fill（塗りつぶし・反転）
========================================================= */
.wp-block-button.is-style-fill-plain>.wp-block-button__link,
.wp-block-button.is-style-fill-plain>.wp-block-button__link.wp-element-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--btn-h);
    padding: 0 var(--btn-px) !important;
    border-radius: 999px;
    border: 1px solid var(--btn-grad-start);
    color: var(--btn-fg-hover); /* 初期は白文字 */
    text-decoration: none;
    overflow: hidden;
    background-color: #ffffff;
    z-index: 1;
}

/* 初期は全面グラデ塗り → ホバーで引く */
.wp-block-button.is-style-fill-plain>.wp-block-button__link::before,
.wp-block-button.is-style-fill-plain>.wp-block-button__link.wp-element-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, var(--btn-grad-start), var(--btn-grad-end));
    background-repeat: no-repeat;
    transform-origin: right center;
    transform: scaleX(1);
    transition: transform .45s ease;
    z-index: -1;
    pointer-events: none;
}

.wp-block-button.is-style-fill-plain>.wp-block-button__link:hover::before,
.wp-block-button.is-style-fill-plain>.wp-block-button__link:focus-visible::before {
    transform: scaleX(0);
}

.wp-block-button.is-style-fill-plain>.wp-block-button__link:hover,
.wp-block-button.is-style-fill-plain>.wp-block-button__link:focus-visible {
    color: var(--btn-fg); /* 濃色文字 */
	border: 1px solid var(--btn-border-color);
}

/* ナビ用の幅調整 */
nav .wp-block-button.is-style-fill-plain>.wp-block-button__link.wp-element-button {
    padding: 0 5rem !important;
}

/* 既存テーマが padding/border を強制してくる場合の保険（必要な時のみコメント解除）
.wp-block-button.is-style-outline-fill-plain > .wp-block-button__link,
.wp-block-button.is-style-fill-plain > .wp-block-button__link{
  padding: 0 var(--btn-px) !important;
  border: 1px solid var(--btn-border-color) !important;
}
*/