/* PPC Studio 公開面（編集画面の本文・右の一覧でも同じものを使う）
   ★ 色は PHP が <a style> に入れる --kcta-bg / fg / dark / light だけで決まる。ここに色を書かない
     （例外：PR表記・注意・ひとことの灰色、枠だけの白地、影・光・ツヤの rgba）。
   ★ テーマの a の装飾に勝つよう .kcta .kcta-btn の形で書き、色と下線は !important。
   ★ 影は「内側の光 --kcta-hl」と「落ち影 --kcta-sh」の2つに分け、状態ごとに落ち影だけ差し替える。
   ★ 動きの keyframes 名は kcta- で始める。 */

.kcta{margin:1.6em 0}
.kcta.kcta-align-left{text-align:left}
.kcta.kcta-align-center{text-align:center}
.kcta.kcta-align-right{text-align:right}

/* 上下のひとこと */
.kcta .kcta-top{display:block;font-size:.9em;font-weight:700;margin-bottom:.35em}
.kcta .kcta-note{display:block;font-size:.78em;color:#666;margin-top:.4em}

/* ボタンの土台 */
.kcta .kcta-btn{
  --kcta-hl:inset 0 1px 0 rgba(255,255,255,.28);
  --kcta-sh:0 4px 10px rgba(0,0,0,.16);
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  max-width:100%;margin:0;border:0;border-radius:999px;
  background:var(--kcta-bg);color:var(--kcta-fg)!important;box-shadow:var(--kcta-hl),var(--kcta-sh);opacity:1;
  font-weight:700;line-height:1.3;letter-spacing:.03em;text-align:center;text-decoration:none!important;
  white-space:normal;vertical-align:middle;-webkit-tap-highlight-color:transparent;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,background-color .18s ease,color .18s ease
}
.kcta .kcta-body{display:flex;flex-direction:column;align-items:center;min-width:0;line-height:1.25}
.kcta .kcta-text{overflow-wrap:anywhere;text-wrap:balance}  /* 2行になるとき最後の1字だけ落ちないように */
.kcta .kcta-sub{font-size:.68em;font-weight:500;opacity:.92;letter-spacing:.02em;margin-top:.15em;overflow-wrap:anywhere}
.kcta .kcta-icon{flex:none;font-size:1em;line-height:1}
.kcta .kcta-has-icon-after .kcta-icon{margin-left:.15em}
.kcta .kcta-has-icon-before .kcta-icon{margin-right:.15em}

/* 右はしの丸い矢印：ボタンの文字の 1.55 倍の正円（自分の文字が 1.1em なので 1.41em） */
.kcta .kcta-btn .kcta-icon-circle{
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
  width:1.41em;height:1.41em;margin-left:auto;padding-left:.05em;border-radius:50%;
  background:rgba(255,255,255,.28);color:var(--kcta-fg);font-size:1.1em;font-weight:900;line-height:1
}
/* 丸い矢印があるときは、同じ幅を左にも取って言葉をボタンの真ん中に置く */
.kcta .kcta-btn:has(>.kcta-icon-circle)>.kcta-body{margin-left:auto;padding-left:1.95em}

/* 状態：ホバー・押す・キーボード */
.kcta .kcta-btn:hover{filter:brightness(1.05);opacity:1}
.kcta .kcta-motion-none:hover{transform:translateY(-1px);--kcta-sh:0 6px 14px rgba(0,0,0,.2)}
.kcta .kcta-motion-none:active{transform:translateY(1px);--kcta-sh:0 2px 4px rgba(0,0,0,.18)}
.kcta .kcta-btn:focus-visible{outline:3px solid var(--kcta-dark);outline-offset:3px}

/* 大きさ（最小幅は min(…,100%) なので 360px 幅でもはみ出さない） */
.kcta .kcta-size-m{font-size:1.0625rem;min-height:48px;padding:.9em 2em;min-width:min(260px,100%)}
.kcta .kcta-size-l{font-size:1.25rem;min-height:56px;padding:1.05em 2.4em;min-width:min(300px,100%)}
.kcta .kcta-full{display:flex;width:100%}
@media (max-width:480px){
  .kcta .kcta-size-m{padding:.85em 1.4em}
  .kcta .kcta-size-l{font-size:1.15rem;padding:1em 1.6em}
}

/* かたち */
.kcta .kcta-shape-round{border-radius:999px}
.kcta .kcta-shape-square{border-radius:8px}
.kcta .kcta-shape-shadow{border-radius:10px;border-bottom:5px solid var(--kcta-dark);--kcta-sh:0 3px 6px rgba(0,0,0,.15)}
.kcta .kcta-shape-shadow:active{transform:translateY(3px);border-bottom-width:2px;animation:none}
/* 枠だけ：枠線は --kcta-bg（色らしさを残す）、白地の上の文字は --kcta-ink（黄色など明るい色でも読める濃さ）。
   --kcta-ink が無い古い HTML（キャッシュ）では --kcta-bg で出す。ホバーで塗ったら bg / fg */
.kcta .kcta-shape-outline{background:#fff;border:2px solid var(--kcta-bg);border-radius:999px;box-shadow:none;color:var(--kcta-ink,var(--kcta-bg))!important}
.kcta .kcta-shape-outline:hover{background:var(--kcta-bg);color:var(--kcta-fg)!important}
.kcta .kcta-shape-outline .kcta-sub{color:var(--kcta-ink,var(--kcta-bg))}
.kcta .kcta-shape-outline:hover .kcta-sub{color:var(--kcta-fg)}
.kcta .kcta-shape-outline .kcta-icon-circle{background:var(--kcta-ink,var(--kcta-bg));color:#fff}
.kcta .kcta-shape-outline:hover .kcta-icon-circle{background:rgba(255,255,255,.28);color:var(--kcta-fg)}
/* グラデ＝ツヤ：縦グラデ＋上半分のガラスの光（文字の下に敷く）＋文字の影 */
.kcta .kcta-shape-gradient{
  position:relative;overflow:hidden;isolation:isolate;border-radius:999px;
  background:linear-gradient(180deg,var(--kcta-light) 0%,var(--kcta-bg) 48%,var(--kcta-dark) 100%);
  text-shadow:0 1px 1px rgba(0,0,0,.18);--kcta-sh:0 4px 10px rgba(0,0,0,.14)
}
/* ツヤは控えめに（強いと古いアプリのボタンに見える。2026-10-30 ChatGPT の指摘を採った） */
.kcta .kcta-shape-gradient::before{
  content:"";position:absolute;top:0;left:0;right:0;height:50%;z-index:-1;overflow:hidden;pointer-events:none;
  border-radius:999px 999px 0 0;background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.03))
}

/* 動き：3.6〜4 秒に1回、0.7〜0.9 秒だけ短く動く（ずっと動き続けない）。動くボタンのホバーは明るくするだけ（transform がけんかする） */
.kcta .kcta-motion-bounce{animation:kcta-bounce 3.6s ease infinite;transform-origin:50% 100%}
.kcta .kcta-motion-pulse{animation:kcta-pulse 3.6s ease infinite}
.kcta .kcta-motion-shine{position:relative;overflow:hidden;isolation:isolate}
.kcta .kcta-motion-shine::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:60%;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.42) 50%,transparent 70%);
  transform:translateX(-100%);animation:kcta-shine 4s ease-in-out infinite
}
@keyframes kcta-bounce{
  0%,20%,100%{transform:translateY(0)}
  7%{transform:translateY(-7px)}
  13%{transform:translateY(0) scale(1.03,.97)}
  16%{transform:translateY(-2px)}
}
@keyframes kcta-pulse{
  0%,22%,100%{transform:scale(1)}
  8%{transform:scale(1.05)}
  16%{transform:scale(.99)}
}
/* 光：左の外 → 右の外（幅 60% なので 170% で右の外）。先頭 22% だけ動く */
@keyframes kcta-shine{
  0%{transform:translateX(-100%)}
  22%,100%{transform:translateX(170%)}
}
@media (prefers-reduced-motion:reduce){
  .kcta .kcta-btn,.kcta .kcta-btn::after{animation:none!important}
}

/* PR表記（本文の先頭） */
p.kcta-pr{font-size:.8em;color:#666;background:#f5f5f5;border-radius:4px;padding:.45em .8em;margin:0 0 1.2em;text-align:left;line-height:1.5}

/* リンク先が空（ログイン中の編集者にだけ出る） */
.kcta.kcta-nolink{border:2px dashed #c9c9c9;color:#777;font-size:.85em;padding:.8em 1em;border-radius:8px;text-align:center;background:#fafafa}