/* ===== IZtech 共通アクションボタン =====
   青ピル＋左に丸アイコン。ホバーで黒い面が左→右にスライドし、丸アイコンは黒→青に反転する。
   別プロジェクトの Vue コンポーネント（ActionButton.vue）と同じ見た目を素の CSS で再現したもの。

   使い方:
     <a href="/" class="btn-action">
       <span class="btn-fill"></span>
       <span class="btn-body">
         <span class="btn-icon icon-home"></span>
         <span class="btn-label">ホームへ戻る</span>
       </span>
     </a>
   <a> でも <button> でも同じ見た目になる。

   アイコンは assets/icons/*.svg を CSS の mask として読む。svg 側の fill 属性は無視され、
   形だけを白で塗るので、アイコンを増やすときは svg を置いて .icon-xxx を1行足すだけでよい。 */

.btn-action{
  position:relative;display:inline-block;overflow:hidden;
  border:none;border-radius:999px;
  background:#1D4ED8;color:#fff;text-decoration:none;
  font-family:inherit;font-size:15px;cursor:pointer;flex-shrink:0;
  box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  transition:box-shadow .2s;
}
.btn-action:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.btn-action:disabled{opacity:.5;cursor:not-allowed}

/* ホバーで左から入ってくる黒い面 */
.btn-action .btn-fill{
  position:absolute;inset:0;background:#000;
  transform:translateX(-100%);
  transition:transform .3s ease-in-out;
}
.btn-action:hover .btn-fill{transform:translateX(0)}

.btn-action .btn-body{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:8px;
  padding:6px 16px 6px 6px;
}
.btn-action .btn-icon{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  background:#000;transition:background-color .3s;
  display:flex;align-items:center;justify-content:center;
}
.btn-action:hover .btn-icon{background:#1D4ED8}
.btn-action .btn-icon::before{
  content:"";display:block;width:20px;height:20px;background:#fff;
  -webkit-mask:var(--btn-icon) center/contain no-repeat;
          mask:var(--btn-icon) center/contain no-repeat;
}
.btn-action .btn-label{font-weight:700;line-height:1.25;white-space:nowrap}

/* 打ち消し操作用のグレー版（今は未使用だが、同形式で増やせるように定義だけ置く） */
.btn-action.is-gray{background:#4B5563}
.btn-action.is-gray:hover .btn-icon{background:#4B5563}

/* ---- アイコン。パスは この CSS ファイルからの相対 ---- */
.icon-home{--btn-icon:url("icons/home.svg")}
.icon-mail{--btn-icon:url("icons/mail.svg")}
.icon-run{--btn-icon:url("icons/run.svg")}
.icon-wifi{--btn-icon:url("icons/wifi.svg")}
.icon-target{--btn-icon:url("icons/target.svg")}

/* ---- ボタンを横に並べる箱 ----
   --label-w を指定すると各ラベルが同じ最小幅になり、文字数が違ってもボタン幅が揃う。
   例: .links{--label-w:5em}（最長ラベル「つながる」に合わせる） */
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn-row .btn-label{min-width:var(--label-w,0);text-align:center}

@media(prefers-reduced-motion:reduce){
  .btn-action .btn-fill{transition:none}
}