/* 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 }
.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;
  transition: background-size .45s ease, 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; }
}

/* =========================================================
   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: #ffffff;
  /* 背景のグラデーションを左から右へ広げる */
  background-image: linear-gradient(90deg, var(--btn-grad-start), var(--btn-grad-end));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left center;
}

/* 右端の“丸” */
.wp-block-button.is-style-outline-fill-circle .wp-block-button__link::after{
  content:"";
  position:absolute; z-index:1;
  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:2;
  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 .wp-block-button__link:hover,
.wp-block-button.is-style-outline-fill-circle .wp-block-button__link:focus-visible{
  background-size: 100% 100%;
  color: var(--btn-fg-hover);
}
.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-border-color);
  color: var(--btn-fg-hover); /* 白文字 */
  /* 上層：グラデを全面表示／下層：白（縮小時に露出） */
  background-image: linear-gradient(90deg, var(--btn-grad-start), var(--btn-grad-end));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: right center; /* 右基点 → 0%化で白が左→右に露出 */
  background-color: #ffffff;
}

/* 右端の“白丸”（初期） */
.wp-block-button.is-style-fill-circle .wp-block-button__link::after{
  content:"";
  position:absolute; z-index:1;
  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:2;
  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 .wp-block-button__link:hover,
.wp-block-button.is-style-fill-circle .wp-block-button__link:focus-visible{
  background-size: 0% 100%;   /* ← グラデ縮小（右基点）で白が左→右に露出 */
  color: var(--btn-fg);        /* 濃色文字 */
}
.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__link の padding を上書き */
.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;
  /* 右端の丸(28px) + テキストとの間隔(10px) + 右余白(px) を確保 */
  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;
  /* 右端の丸(28px) + テキストとの間隔(10px) + 右余白(px) を確保 */
  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;

  /* 左→右に塗りが広がる */
  background-image: linear-gradient(90deg, var(--btn-grad-start), var(--btn-grad-end));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left center;
  transition: background-size .45s ease, color .3s ease, transform .25s ease;
}
.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{
  background-size: 100% 100%;
  color: var(--btn-fg-hover);
}

/* ========== 矢印なし：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-border-color);
  color: var(--btn-fg-hover);            /* 初期は白文字 */
  text-decoration: none;
  overflow: hidden;

  /* 初期は全面グラデ塗り。ホバーで白が左→右に露出（=反転） */
  background-image: linear-gradient(90deg, var(--btn-grad-start), var(--btn-grad-end));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: right center;     /* 右基点 → 0%化でL→Rに白が出る */
  background-color: #ffffff;             /* 下地を白に */
  transition: background-size .45s ease, color .3s ease, transform .25s ease;
}
.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{
  background-size: 0% 100%;
  color: var(--btn-fg);                  /* 濃色文字 */
}

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;
}
*/