/* btn-motion-style.css … 元は parts/btn-motion-style.php の中の <style>（2026-11-07 にここへ移した）。読み込みは parts/btn-motion-style.php の同じ場所の gembaroid_part_css( 'btn-motion-style' ) */
.tp-btn, .th__btn, .btn-small a, .tp-tags a { position: relative; isolation: isolate; overflow: hidden; transition: color .2s ease, border-color .2s ease; }
.tp-btn:before, .th__btn:before, .btn-small a:before, .tp-tags a:before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 1; transform: scaleX(0); transform-origin: left center; transition: transform .25s cubic-bezier(.22, .61, .36, 1); }
/* ヘッダー・フッターのボタンは外側の枠で角を丸めて切り抜いていた。色が満ちる地がはみ出さないよう、角の丸みをボタン本体に移す */
.btn-small { overflow: visible; }
.btn-small a { border-radius: inherit; }
.btn-small a svg { transition: fill .2s ease; }

/* 青いグラデーションのボタン（資料請求）→ 白 */
.th__btn.-blue:before, .btn-small a:before { background: #fff; }
/* 黒と白のボタン → 青いグラデーション */
.tp-btn.-dark:before, .th__btn.-dark:before, .tp-btn.-main:before, .tp-btn.-line:before, .tp-tags a:before, .tp-btn.-sub:before, .foot-nav__btns .foot-nav__tel__link .btn-small:last-child a:before,
.gnav__link .btn-estimate a:before, .foot-nav__btns .foot-nav__tel__estimate a:before { background: linear-gradient(45deg, var(--c-blue), var(--c-teal)); }
/* ログイン（文字だけのリンク）は塗らず、浮かせない */
.gnav__link .btn-gnav-login a:before { display: none; }

.th__btn[target="_blank"]:after { content: ''; display: inline-block; flex: none; width: .95em; height: .95em; margin-left: .35em; vertical-align: -.08em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M9%202h5v5M14%202L7.5%208.5M12%209.5V13a1%201%200%200%201-1%201H3a1%201%200%200%201-1-1V5a1%201%200%200%201%201-1h3.5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M9%202h5v5M14%202L7.5%208.5M12%209.5V13a1%201%200%200%201-1%201H3a1%201%200%200%201-1-1V5a1%201%200%200%201%201-1h3.5%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") no-repeat center / contain; }

@media (hover: hover) {
  .tp-btn:hover, .th__btn:hover, .btn-small a:hover, .tp-tags a:hover { opacity: 1; }
  .tp-btn:hover:before, .th__btn:hover:before, .btn-small a:hover:before, .tp-tags a:hover:before { opacity: 1; transform: scaleX(1); }
  /* 白に変わる青いボタンは文字と絵を黒に */
  .th__btn.-blue:hover, .btn-small a:hover { color: #000; }
  .btn-small a:hover svg { fill: #000; }
  /* 白い地の上で白に変わると形が消えるので、内側に黒い細い線を出す（一画面目の資料請求・資料のダウンロード。2026-11-07）。黒い地のヘッダーとフッターでは出さない */
  .th__btn.-blue:hover, .btn-small a:hover { outline: 1.5px solid #000; outline-offset: -1.5px; }
  .gnav__link .btn-small a:hover, .foot-nav__btns a:hover { outline: none; }
  /* 青に変わる黒と白のボタンは文字と絵を白に */
  .tp-btn.-main:hover, .gnav__link .btn-estimate a:hover, .foot-nav__btns .foot-nav__tel__estimate a:hover { color: #fff; }
  .tp-btn.-line:hover, .tp-tags a:hover { color: #fff; border-color: transparent; } /* 白い地の枠線のボタンも青へ（2026-11-07 國塚さん指定）。黒い枠線は消す */
  .gnav__link .btn-estimate a:hover svg, .foot-nav__btns .foot-nav__tel__estimate a:hover svg { fill: #fff; }
  /* 黒い地の上の枠線のボタン（フッターのお問い合わせ）も青へ。文字は白のまま、白い枠線は消す（2026-11-07 國塚さん指定） */
  .tp-btn.-sub:hover, .foot-nav__btns .foot-nav__tel__link .btn-small:last-child a:hover { color: #fff; border-color: transparent; }
  .foot-nav__btns .foot-nav__tel__link .btn-small:last-child a:hover svg { fill: #fff; }
  /* ログインは塗らず、少し薄くするだけ */
  .gnav__link .btn-gnav-login a:hover { color: #fff; }
}
.tp-btn:focus-visible, .th__btn:focus-visible, .btn-small a:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }
/* 本文の共通ボタン（.btn-general）も、トップのボタン（.tp-btn）と同じ見た目と動きにそろえる（2026-11-07 國塚さん指定「インタラクションが違うボタンが多数残っている。サイト全体で統一して」）。
   製品カテゴリ・製品ページ・コラム・はじめての方へ・工種・事例・404 などで使われている。大きさ（幅・高さ）は変えない。
   見た目: 影なし。黒（-black）と赤（-pink）＝黒の地／枠線（-ghost）と白（-white）＝白の地に黒い枠線／無印＝青いグラデーションの地。
   動き: 左から色が満ちる（0.25秒）だけ。黒・白・枠線＝青いグラデーションが満ち、文字は白・枠線は消える／青＝白が満ち、文字は黒・内側に黒い細い線。
   styles.css の古い動き（グラデーションの重ねを薄くする・-ghost の重ねを出す）より強くするため、.btn-general.btn-general と書く */
.btn-general.btn-general a, .btn-general.btn-general button, .btn-general.btn-general p { box-shadow: none; isolation: isolate; overflow: hidden; transition: color .2s ease, border-color .2s ease; }
.btn-general.btn-general a:before, .btn-general.btn-general button:before, .btn-general.btn-general p:before { content: ''; display: block; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 1; background: linear-gradient(45deg, var(--c-blue), var(--c-teal)); transform: scaleX(0); transform-origin: left center; transition: transform .25s cubic-bezier(.22, .61, .36, 1); }
.btn-general.btn-general.-black a, .btn-general.btn-general.-black button, .btn-general.btn-general.-black p,
.btn-general.btn-general.-pink a, .btn-general.btn-general.-pink button, .btn-general.btn-general.-pink p { background: #000; color: #fff; border: 0; }
.btn-general.btn-general.-ghost a, .btn-general.btn-general.-ghost button, .btn-general.btn-general.-ghost p,
.btn-general.btn-general.-white a, .btn-general.btn-general.-white button, .btn-general.btn-general.-white p { background: #fff; color: #000; border: 1px solid #000; }
.btn-general.btn-general:not(.-black):not(.-pink):not(.-ghost):not(.-white) a:before, .btn-general.btn-general:not(.-black):not(.-pink):not(.-ghost):not(.-white) button:before, .btn-general.btn-general:not(.-black):not(.-pink):not(.-ghost):not(.-white) p:before { background: #fff; }
.btn-general.btn-general a svg, .btn-general.btn-general button svg, .btn-general.btn-general p svg { fill: currentColor; transition: fill .2s ease; }
@media (hover: hover) {
  .btn-general.btn-general a:hover, .btn-general.btn-general button:hover, .btn-general.btn-general p:hover { opacity: 1; }
  .btn-general.btn-general a:hover:before, .btn-general.btn-general button:hover:before, .btn-general.btn-general p:hover:before { opacity: 1; transform: scaleX(1); }
  .btn-general.btn-general.-black a:hover, .btn-general.btn-general.-black button:hover, .btn-general.btn-general.-black p:hover,
  .btn-general.btn-general.-pink a:hover, .btn-general.btn-general.-pink button:hover, .btn-general.btn-general.-pink p:hover,
  .btn-general.btn-general.-ghost a:hover, .btn-general.btn-general.-ghost button:hover, .btn-general.btn-general.-ghost p:hover,
  .btn-general.btn-general.-white a:hover, .btn-general.btn-general.-white button:hover, .btn-general.btn-general.-white p:hover { color: #fff; border-color: transparent; }
  .btn-general.btn-general:not(.-black):not(.-pink):not(.-ghost):not(.-white) a:hover, .btn-general.btn-general:not(.-black):not(.-pink):not(.-ghost):not(.-white) button:hover, .btn-general.btn-general:not(.-black):not(.-pink):not(.-ghost):not(.-white) p:hover { color: #000; outline: 1.5px solid #000; outline-offset: -1.5px; }
}
.btn-general.btn-general a:focus-visible, .btn-general.btn-general button:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }
/* コラム一覧のカテゴリの切り替え（.column-cats）と、ピックアップの左右の丸いボタン（.column-pickup__arrow）も同じ動きに（2026-11-07 國塚さん指定）。
   白い地に黒い枠線 → 青いグラデーションが満ち、文字は白・枠線は消える。選んでいるカテゴリ（is-current）は黒の地のまま。parts/column-style.php・column-pickup.php の古い動き（黒く塗る）より強くするため2回書く */
.column-cats.column-cats a, .column-pickup__arrow.column-pickup__arrow { position: relative; isolation: isolate; overflow: hidden; transition: color .2s ease, border-color .2s ease; }
.column-pickup__arrow.column-pickup__arrow { border-color: #000; color: #000; }
.column-cats.column-cats a:before, .column-pickup__arrow.column-pickup__arrow:before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(45deg, var(--c-blue), var(--c-teal)); transform: scaleX(0); transform-origin: left center; transition: transform .25s cubic-bezier(.22, .61, .36, 1); }
.column-cats.column-cats a.is-current { background: #000; color: #fff; }
@media (hover: hover) {
  .column-cats.column-cats a:hover, .column-pickup__arrow.column-pickup__arrow:hover { background: #fff; color: #fff; border-color: transparent; }
  .column-cats.column-cats a.is-current:hover { background: #000; }
  .column-cats.column-cats a:hover:before, .column-pickup__arrow.column-pickup__arrow:hover:before { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .tp-btn, .th__btn, .btn-small a, .tp-btn:before, .th__btn:before, .btn-small a:before, .tp-btn:after, .th__btn:after, .btn-small a:after { transition: none; }
  .btn-general.btn-general a, .btn-general.btn-general button, .btn-general.btn-general a:before, .btn-general.btn-general button:before, .column-cats.column-cats a, .column-cats.column-cats a:before, .column-pickup__arrow.column-pickup__arrow, .column-pickup__arrow.column-pickup__arrow:before { transition: none; }
}

/* マウスを乗せた所から色が丸く広がり、離した所へ引く（2026-11-07 國塚さん指定「他のボタンも全部マウス乗せたところから広がって欲しい」）。それまでの「左から満ちる」を置き換える。満ちた後の色・文字の色は上のまま。乗せた位置（--x・--y）は functions.php の小さなスクリプトが入れる。色の地はボタンと同じ大きさのまま置き、丸い窓（clip-path: circle）を乗せた所から広げて見せる（地を大きな円にするとグラデーションの一部しか見えず単色に見えるため・2026-11-07 國塚さん指摘）。窓の半径 150% で、角から乗せても全体を覆う */
.tp-btn:before, .th__btn:before, .btn-small a:before, .tp-tags a:before, .btn-general.btn-general a:before, .btn-general.btn-general button:before, .btn-general.btn-general p:before, .column-cats.column-cats a:before, .column-pickup__arrow.column-pickup__arrow:before { inset: 0; transform: none; clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); transition: clip-path .45s cubic-bezier(.22, .61, .36, 1); }
@media (hover: hover) {
  .tp-btn:hover:before, .th__btn:hover:before, .btn-small a:hover:before, .tp-tags a:hover:before, .btn-general.btn-general a:hover:before, .btn-general.btn-general button:hover:before, .btn-general.btn-general p:hover:before, .column-cats.column-cats a:hover:before, .column-pickup__arrow.column-pickup__arrow:hover:before { transform: none; clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); }
}
@media (prefers-reduced-motion: reduce) {
  .tp-btn:before, .th__btn:before, .btn-small a:before, .tp-tags a:before, .btn-general.btn-general a:before, .btn-general.btn-general button:before, .btn-general.btn-general p:before, .column-cats.column-cats a:before, .column-pickup__arrow.column-pickup__arrow:before { transition: none; }
}