/* トップの「紹介」と「始め方」（2026-10-20 流れの見直し。docs/トップ_流れと紹介の作り込み_すり合わせ.md）
 * 紹介：板3枚。スクロールすると板が上に残り、次の板が下から重なる（参考：Affirm）。写真の上に金額入りの画面の部品（参考：Bilt）
 * 始め方：番号の一覧＋スマホ1台（押すか4秒ごとに次へ） */
.tx-intro { padding: 120px 0 110px; background: #fff; }
.tx-intro .rd-h2 { text-align: center; }
.tx-intro__lead { max-width: 640px; margin: 18px auto 0; font-size: 16px; line-height: 1.9; color: #4f5b67; text-align: center; }
.tx-stack { display: grid; gap: 40px; max-width: 1120px; margin: 56px auto 0; }
.tx-card { position: sticky; top: calc(96px + var(--i) * 22px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 440px; overflow: hidden; border-radius: 32px; background: #fff; box-shadow: 0 0 0 1px rgba(11,27,43,.07), 0 -10px 40px -24px rgba(0,40,90,.25), 0 30px 60px -36px rgba(0,40,90,.35); }
.tx-card:nth-child(2) { background: #f4f9ff; } .tx-card:nth-child(3) { background: #f1faf6; }
.tx-card__text { display: flex; flex-direction: column; justify-content: center; padding: 48px 44px; text-align: left; }
.tx-card__n { font: 800 14px "JetBrains Mono", "Inter", monospace; letter-spacing: .08em; color: #0a7fd0; }
.tx-card__h { margin: 14px 0 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; line-height: 1.4; letter-spacing: -.02em; color: #0b1b2b; }
.tx-card__p { margin: 14px 0 0; font-size: 15px; line-height: 1.9; color: #4f5b67; }
.tx-card__vis { position: relative; display: grid; place-items: center; margin: 0; min-height: 100%; padding: 32px; box-sizing: border-box; background: rgba(255,255,255,.55); }
/* 板1：アプリの画面（スマホ）＋カードの絵＋決済の札 */
.tx-vis--app { background: linear-gradient(160deg, #e9f5ff, #f7fbff); }
.tx-vis__phone { position: relative; z-index: 1; width: 190px; padding: 8px; border-radius: 32px; background: #0b1b2b; box-shadow: 0 30px 60px -30px rgba(0,40,90,.55); transform: rotate(-4deg); }
.tx-vis__phone img { display: block; width: 100%; height: auto; border-radius: 25px; }
.tx-vis__card { position: absolute; left: 12%; bottom: 14%; width: 180px; height: 135px; transform: rotate(-10deg); }
.tx-vis__chip { position: absolute; z-index: 2; right: 10%; top: 22%; margin: 0; padding: 12px 16px; border-radius: 16px; background: #fff; box-shadow: 0 18px 36px -18px rgba(0,40,90,.45); }
.tx-vis__chip small { display: block; font-size: 12px; color: #6b7785; } .tx-vis__chip b { font-size: 15px; color: #0b1b2b; }
/* 板2：お金の流れの図 */
.tx-vis--flow { background: linear-gradient(160deg, #eef4ff, #f8fbff); }
.tx-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 6px; width: 100%; }
.tx-flow__node { display: grid; justify-items: center; gap: 6px; text-align: center; } .tx-flow__node svg { width: 110px; height: 82px; } .tx-flow__node b { font-size: 13px; color: #0b1b2b; }
.tx-flow__logo { display: grid; place-items: center; width: 92px; height: 92px; margin: -5px 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #0a95ea, 0 16px 32px -18px rgba(0,40,90,.5); } .tx-flow__logo img { width: 74px; height: auto; }
.tx-flow__arrow { position: relative; min-width: 70px; padding-bottom: 14px; text-align: center; } .tx-flow__arrow::after { content: "→"; display: block; font-size: 22px; color: #0a95ea; line-height: 1; }
.tx-flow__arrow span { display: block; font-size: 13px; font-weight: 900; color: #0b1b2b; } .tx-flow__arrow small { display: block; font-size: 11px; font-weight: 700; color: #6b7785; }
/* 板3：入金明細（見本）＋通帳の絵 */
.tx-vis--slip { background: linear-gradient(160deg, #eaf8f2, #f7fcfa); }
.tx-vis__book { position: absolute; left: 8%; top: 12%; width: 200px; height: 150px; transform: rotate(-8deg); opacity: .95; }
.tx-slip { position: relative; z-index: 1; width: min(320px, 86%); margin-left: 18%; padding: 18px 22px; border-radius: 18px; background: #fff; box-shadow: 0 28px 56px -26px rgba(0,40,90,.5); }
.tx-slip__h { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: #4f5b67; }
.tx-slip dl { margin: 0; } .tx-slip dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; } .tx-slip dl div + div { border-top: 1px solid #e6ebf0; }
.tx-slip dt { font-size: 13px; color: #6b7785; } .tx-slip dd { margin: 0; font-size: 15px; font-weight: 800; color: #0b1b2b; } .tx-slip .is-hi dd { font-size: 20px; color: #0a8a66; }
.tx-intro__note { margin: 20px 0 0; font-size: 11px; opacity: .6; text-align: center; }

.tx-start { padding: 110px 0 90px; background: #f5f8fb; }
.tx-start__in > div, .tx-start__head { text-align: left; }
.tx-start__head { max-width: 1040px; }
.tx-start__in { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: center; max-width: 1040px; margin-top: 32px; }
.tx-start__lead { margin: 14px 0 0; font-size: 15px; line-height: 1.8; color: #4f5b67; }
.tx-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tx-steps li { border-radius: 16px; transition: background .3s, box-shadow .3s; }
.tx-steps button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.tx-steps__n { font: 800 13px "JetBrains Mono", "Inter", monospace; letter-spacing: .06em; color: #0a7fd0; }
.tx-steps b { font-size: 18px; font-weight: 900; color: #6b7785; transition: color .3s; }
.tx-steps__p { display: none; padding: 0 18px 16px 62px; } .tx-steps__p p { margin: 0; font-size: 14px; line-height: 1.8; color: #4f5b67; }
.tx-steps li.is-on { background: #fff; box-shadow: 0 0 0 1px rgba(11,27,43,.06), 0 18px 40px -26px rgba(0,60,120,.3); } .tx-steps li.is-on b { color: #0b1b2b; } .tx-steps li.is-on .tx-steps__p { display: block; }
.tx-phone { position: relative; aspect-ratio: 600 / 1305; padding: 10px; border-radius: 44px; background: #0b1b2b; box-shadow: 0 40px 80px -40px rgba(0,40,90,.5); }
.tx-phone img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border-radius: 34px; object-fit: cover; opacity: 0; transition: opacity .4s; } .tx-phone img.is-on { opacity: 1; }
.tx-start .fx-need { margin-top: 48px; }

@media (max-width: 960px) {
  .tx-intro { padding: 80px 0 72px; }
  .tx-stack { gap: 24px; margin-top: 36px; }
  .tx-card { top: calc(72px + var(--i) * 12px); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 260px; min-height: 0; border-radius: 24px; }
  .tx-card__text { padding: 26px 22px 20px; } .tx-card__h { font-size: 22px; } .tx-card__p { font-size: 14px; }
  .tx-card__vis { min-height: 260px; padding: 18px; }
  .tx-vis__phone { width: 120px; padding: 5px; border-radius: 20px; } .tx-vis__phone img { border-radius: 16px; } .tx-vis__card { width: 120px; height: 90px; left: 6%; bottom: 10%; } .tx-vis__chip { right: 4%; top: 14%; padding: 8px 10px; } .tx-vis__chip b { font-size: 13px; }
  .tx-flow { gap: 2px; } .tx-flow__node svg { width: 64px; height: 48px; } .tx-flow__node b { font-size: 11px; } .tx-flow__logo { width: 56px; height: 56px; } .tx-flow__logo img { width: 46px; } .tx-flow__arrow { min-width: 40px; } .tx-flow__arrow span { font-size: 11px; } .tx-flow__arrow small { font-size: 10px; }
  .tx-vis__book { width: 120px; height: 90px; left: 2%; top: 6%; } .tx-slip { margin-left: 10%; padding: 12px 14px; } .tx-slip dl div { padding: 7px 0; }
    .tx-start { padding: 80px 0 64px; }
  .tx-start__in { grid-template-columns: minmax(0, 1fr) 140px; gap: 14px; align-items: start; }
  .tx-steps b { font-size: 15px; } .tx-steps button { padding: 12px; gap: 10px; } .tx-steps__p { padding: 0 12px 12px; }
  .tx-phone { position: sticky; top: 90px; padding: 6px; border-radius: 26px; } .tx-phone img { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 20px; }
}

/* サービス紹介動画（2026-10-20 紹介の見出しのすぐ下・いつも見える形。押すと再生） */
.tx-video { position: relative; max-width: 960px; margin: 44px auto 0; overflow: hidden; border-radius: 28px; background: #0b1b2b; box-shadow: 0 0 0 1px rgba(11,27,43,.08), 0 40px 80px -44px rgba(0,40,90,.45); }
.tx-video video { display: block; width: 100%; height: auto; }
.tx-video__play { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; width: 100%; padding: 24px; border: 0; background: linear-gradient(180deg, rgba(11,27,43,0) 55%, rgba(11,27,43,.32)); cursor: pointer; box-sizing: border-box; }
.tx-video__pill { display: inline-flex; align-items: center; gap: 14px; padding: 10px 26px 10px 10px; border-radius: 999px; background: rgba(255,255,255,.96); box-shadow: 0 18px 40px -16px rgba(0,30,70,.5); transition: transform .2s; }
.tx-video__play:hover .tx-video__pill { transform: scale(1.04); }
.tx-video__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #0b1b2b; } .tx-video__ic svg { width: 22px; height: 22px; margin-left: 3px; fill: #fff; }
.tx-video__t { display: grid; text-align: left; font-size: 17px; font-weight: 900; line-height: 1.35; color: #0b1b2b; } .tx-video__t small { font-size: 12px; font-weight: 700; color: #6b7785; }
.tx-video.is-play .tx-video__play { display: none; }
.tx-video + .tx-stack { margin-top: 64px; }
@media (max-width: 960px) { .tx-video { margin-top: 28px; border-radius: 18px; } .tx-video__play { padding: 12px; } .tx-video__pill { gap: 10px; padding: 6px 16px 6px 6px; } .tx-video__ic { width: 40px; height: 40px; } .tx-video__ic svg { width: 18px; height: 18px; } .tx-video__t { font-size: 14px; } .tx-video + .tx-stack { margin-top: 40px; } }
.tx-vis__note { position: absolute; z-index: 3; left: 0; right: 0; bottom: 10px; font-size: 11px; color: #6b7785; text-align: center; }

/* 一番上の区画のスマホ（2026-10-20 案C に決定。案A・B の見本は外した） */
.rd-phone__screen { position: relative; }
.tx-hbnote, .tx-hbcoin { display: none; }
.tx-hbnote__ic img { display: block; width: 34px; height: 34px; border-radius: 9px; }
.tx-hbnote p { margin: 0; line-height: 1.35; } .tx-hbnote b { display: block; font-size: 12.5px; color: #0b1b2b; } .tx-hbnote small { font-size: 10.5px; color: #6b7785; }
/* 案C：カード → スマホで決済 → コイン → 大家さんへ振込（8秒でくり返す）・マウスで少し傾く奥行き */
.tx-hc-card, .tx-hc-ring, .tx-hc-house, .tx-hc-dot, .tx-hc-pay { display: none; }
.hero-c .rd-hero__stage { --mx: 0; --my: 0; perspective: 1200px; }
.hero-c .rd-phone { transform: rotateY(calc(var(--mx) * 10deg)) rotateX(calc(var(--my) * -8deg)); transition: transform .3s ease-out; }
.hero-c .rd-float--l { transform: translate(calc(var(--mx) * -18px), calc(var(--my) * -12px)); } .hero-c .rd-float--r { transform: translate(calc(var(--mx) * 18px), calc(var(--my) * 12px)); }
.hero-c .rd-coin--3 { display: none; }
.hero-c .tx-hc-card { display: block; position: absolute; z-index: 6; left: 0; top: 330px; width: 210px; opacity: 0; animation: tx-hc-card 8s infinite cubic-bezier(.5,0,.3,1); filter: drop-shadow(0 20px 24px rgba(0,40,90,.35)); }
.hero-c .tx-hc-card svg { display: block; width: 100%; height: auto; }
@keyframes tx-hc-card { 0% { opacity: 0; transform: translate(-40px, 30px) rotate(-18deg) scale(1); } 6% { opacity: 1; transform: translate(0, 0) rotate(-10deg) scale(1); } 14% { opacity: 1; transform: translate(50px, -20px) rotate(-6deg) scale(1); } 24% { opacity: 0; transform: translate(300px, -150px) rotate(0) scale(.25); } 100% { opacity: 0; transform: translate(300px, -150px) scale(.25); } }
.hero-c .tx-hc-ring { display: block; position: absolute; z-index: 2; left: 50%; top: 250px; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; background: radial-gradient(circle, rgba(0,159,253,.38), rgba(25,195,154,0) 70%); opacity: 0; animation: tx-hc-ring 8s infinite; }
@keyframes tx-hc-ring { 0%, 22% { opacity: 0; transform: scale(.5); } 28% { opacity: 1; transform: scale(1.1); } 44%, 100% { opacity: 0; transform: scale(1.6); } }
.hero-c .tx-hbnote { display: flex; position: absolute; z-index: 3; left: 10px; right: 10px; top: 54px; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.97); box-shadow: 0 14px 30px -14px rgba(0,30,70,.5); transform: translateY(-160%); animation: tx-hc-note 8s infinite; }
@keyframes tx-hc-note { 0%, 24% { transform: translateY(-160%); } 30% { transform: translateY(0); } 86% { transform: translateY(0); } 94%, 100% { transform: translateY(-160%); } }
.hero-c .tx-hbcoin { display: block; position: absolute; z-index: 5; width: 42px; left: 50%; top: 120px; opacity: 0; animation: tx-hc-coin 8s infinite; filter: drop-shadow(0 8px 10px rgba(0,40,90,.35)); }
.hero-c .tx-hbcoin svg { display: block; width: 100%; height: auto; } .hero-c .tx-hbcoin--2 { animation-delay: .2s; } .hero-c .tx-hbcoin--3 { animation-delay: .4s; }
/* コインは「ポイント・マイル」の札の左の端で消える（10/21 札の文字にコインが重なっていた） */
@keyframes tx-hc-coin { 0%, 32% { left: 50%; top: 150px; opacity: 0; transform: scale(.5); } 36% { opacity: 1; transform: scale(1.1); } 46% { left: 74%; top: 178px; opacity: 1; transform: scale(.7); } 50%, 100% { left: 76.5%; top: 182px; opacity: 0; transform: scale(.35); } }
.hero-c .rd-float--r b { animation: tx-hc-pop 8s infinite; display: inline-block; }
@keyframes tx-hc-pop { 0%, 48% { transform: scale(1); } 53% { transform: scale(1.15); } 60%, 100% { transform: scale(1); } }
.hero-c .tx-hc-house { display: block; position: absolute; z-index: 2; right: 1%; top: 370px; width: 170px; opacity: 0; animation: tx-hc-house 8s infinite; }
.hero-c .tx-hc-house svg { display: block; width: 100%; height: auto; }
@keyframes tx-hc-house { 0%, 48% { opacity: 0; transform: translateY(16px); } 56%, 92% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
.hero-c .tx-hc-dot { display: block; position: absolute; z-index: 4; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, #009ffd, #19c39a); box-shadow: 0 0 12px rgba(0,159,253,.8); opacity: 0; animation: tx-hc-dot 8s infinite; }
.hero-c .tx-hc-dot--2 { animation-delay: .25s; } .hero-c .tx-hc-dot--3 { animation-delay: .5s; }
@keyframes tx-hc-dot { 0%, 54% { left: 60%; top: 400px; opacity: 0; } 57% { opacity: 1; } 70% { left: 84%; top: 430px; opacity: 1; } 73%, 100% { left: 84%; top: 430px; opacity: 0; } }
.hero-c .tx-hc-pay { display: grid; position: absolute; z-index: 5; right: 0; top: 296px; margin: 0; padding: 10px 16px; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px -18px rgba(0,40,90,.45); text-align: left; opacity: 0; animation: tx-hc-paychip 8s infinite; }
.tx-hc-pay small { font-size: 11px; color: #6b7785; } .tx-hc-pay b { font-size: 15px; color: #0b1b2b; }
@keyframes tx-hc-paychip { 0%, 66% { opacity: 0; transform: translateY(8px) scale(.96); } 72%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (max-width: 960px) {
  /* 10/21 栄成さん「画面がずれています」：上の「傾き」が renewal-d.css の「86%に縮める・スクロールで持ち上げる」を打ち消し、スマホが大きいまま縁にコインが重なっていた。スマホでは傾けない */
  .hero-c .rd-phone { transform: scale(.86) translateY(var(--lift, 0px)); }
  @keyframes tx-hc-coin { 0%, 32% { left: 50%; top: 150px; opacity: 0; transform: scale(.5); } 36% { opacity: 1; transform: scale(1.1); } 50% { left: 60%; top: 40px; opacity: 1; transform: scale(.8); } 54%, 100% { left: 62%; top: 24px; opacity: 0; transform: scale(.4); } }
  .hero-c .tx-hc-house, .hero-c .tx-hc-dot, .hero-c .tx-hc-pay { display: none; } /* スマホは幅が狭く、建物と札がスマホの絵に重なるため、カード → 決済 → コインまで */
  .hero-c .tx-hc-card { width: 120px; top: 290px; } .hero-c .tx-hc-house { width: 100px; top: 330px; } .hero-c .tx-hc-pay { top: 290px; padding: 8px 10px; } .tx-hc-pay b { font-size: 12px; }
  @keyframes tx-hc-card { 0% { opacity: 0; transform: translate(-20px, 20px) rotate(-18deg); } 6% { opacity: 1; transform: rotate(-10deg); } 14% { opacity: 1; transform: translate(20px, -6px) rotate(-6deg); } 24%, 100% { opacity: 0; transform: translate(120px, -110px) scale(.25); } }
}
@media (prefers-reduced-motion: reduce) { .hero-c .tx-hc-card, .hero-c .tx-hc-ring, .hero-c .tx-hbcoin, .hero-c .tx-hc-dot { display: none; } .hero-c .tx-hbnote, .hero-c .tx-hc-house, .hero-c .tx-hc-pay { animation: none; opacity: 1; transform: none; } }

/* 2026-10-21 一番上の区画：正面のスマホの左右に本物に見えるカード2枚（栄成さん「今回のカード2枚がいいです」。参考：Chime）
   8秒でくり返す：決済の通知が上から出る → 両方のカードからポイント・マイルのコインが浮かぶ → 札「ポイント・マイルが貯まる」が少しふくらむ → 通知が戻る
   スマホの上は小さな丸いカメラ（iPhone 固有の形は描かない）。見本は /hero-sample/ */
.hero-k .rd-hero__stage { --mx: 0; --my: 0; }
.hero-k .rd-phone { z-index: 3; }
.hero-k .rd-phone::before { top: 16px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3a4756, #05080c 62%); }
.hk-card { position: absolute; z-index: 1; left: 50%; width: 340px; aspect-ratio: 1.586; border-radius: 18px; background: center / cover no-repeat #12324f;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.35), 0 50px 70px -36px rgba(0,30,70,.6), 0 16px 26px -14px rgba(0,30,70,.4); }
.hk-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(118deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.2) 44%, rgba(255,255,255,0) 58%); pointer-events: none; }
.hk-card--visa { top: 250px; margin-left: -492px; transform: rotate(-12deg); animation: hk-float 7s ease-in-out infinite; }
.hk-card--mc { top: 64px; margin-left: 60px; background-color: #dfe5ea; transform: rotate(10deg); animation: hk-float 7s ease-in-out -3.5s infinite; }
@keyframes hk-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.rd-js .hk-card { opacity: 0; } .is-ready .hk-card { opacity: 1; transition: opacity 1s var(--ease) .9s; }
.hk-note { position: absolute; z-index: 3; left: 10px; right: 10px; top: 54px; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.97); box-shadow: 0 14px 30px -14px rgba(0,30,70,.5); transform: translateY(-160%); animation: hk-note 8s 1.6s infinite both; }
.hero-k .hk-note__ic img { display: block; width: 34px; height: 34px; border-radius: 9px; }
.hk-note p { margin: 0; line-height: 1.35; } .hk-note b { display: block; font-size: 12.5px; color: #0b1b2b; } .hk-note small { font-size: 10.5px; color: #6b7785; }
@keyframes hk-note { 0%, 4% { transform: translateY(-160%); } 10%, 78% { transform: translateY(0); } 86%, 100% { transform: translateY(-160%); } }
/* カードから浮かぶコイン：どちらのカードからもポイントとマイルの両方（カードのブランドで貯まるものが決まるように見せない） */
/* 1枚に7個（TopPage.astro の pops）。位置 --l・大きさ --s・横の流れ --dx・出る時 --dl をずらして、たくさん貯まる様子に（10/21） */
.hk-pop { position: absolute; z-index: 2; left: var(--l, 30%); top: var(--t, 0); width: var(--s, 40px); opacity: 0; filter: drop-shadow(0 8px 10px rgba(0,40,90,.35)); animation: hk-pop 8s calc(1.6s + var(--dl, 0s)) infinite both; }
.hk-pop svg { display: block; width: 100%; height: auto; }
@keyframes hk-pop { 0%, 12% { opacity: 0; translate: 0 0; scale: .3; } 17% { opacity: 1; scale: 1; } 36% { opacity: 1; } 46%, 100% { opacity: 0; translate: var(--dx, 0px) -150px; scale: .9; } }
/* すりガラスの札 */
.hk-chip { position: absolute; z-index: 4; display: flex; gap: 12px; align-items: center; margin: 0; padding: 14px 18px; border-radius: 20px; text-align: left; line-height: 1.3; color: #0b1b2b;
  background: rgba(255,255,255,.64); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 24px 50px -22px rgba(0,30,70,.45); transition: transform .3s ease-out; }
.hk-chip small { display: block; font-size: 12px; color: #4f5b67; } .hk-chip b { display: block; font-size: 17px; }
.hk-chip--sum { flex-direction: column; align-items: flex-start; gap: 0; left: 30px; top: 60px; transform: translate(calc(var(--mx) * -16px), calc(var(--my) * -10px)); }
.hk-chip--sum b { font: 800 26px/1.2 "Inter", sans-serif; background: linear-gradient(90deg, #009ffd, #19c39a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hk-chip--sum em { font-size: 11.5px; font-style: normal; color: #6b7785; }
.hk-chip--pts { right: 0; top: 352px; transform: translate(calc(var(--mx) * 16px), calc(var(--my) * 10px)); animation: hk-pulse 8s 1.6s infinite both; }
.hk-chip--pts p { margin: 0; }
/* 使えるカード：公式の色つきのマーク（Visa は青）を白い札の上に。カードの絵とは離す（10/21 栄成さん「マークを外し、「使えるカード」の札を横に並べる形にしてよいです」） */
.hk-chip--accept { right: 0; top: 440px; gap: 14px; background: #fff; transform: translate(calc(var(--mx) * 16px), calc(var(--my) * 10px)); }
.hk-chip__brands { display: flex; gap: 10px; align-items: center; } .hk-chip__brands img { display: block; width: auto; height: 26px; }
.hk-chip__ic { display: flex; } .hk-chip__ic svg { width: 34px; height: 34px; } .hk-chip__ic svg + svg { margin-left: -10px; }
@keyframes hk-pulse { 0%, 30% { scale: 1; } 36% { scale: 1.06; } 42%, 100% { scale: 1; } }
.rd-js .hk-chip { opacity: 0; translate: 0 20px; } .is-ready .hk-chip { opacity: 1; translate: 0 0; transition: opacity .8s var(--ease) 1.2s, translate .9s var(--ease) 1.2s, transform .3s ease-out; }
/* スマホの幅：後ろに置くとカードが隠れるので、2枚をスマホの下の方の手前に左右から重ねる（マークが見えるように）。年間利用額の札は出さない（上の「カードの年間利用額が増える」と同じ） */
@media (max-width: 960px) {
  .hk-card { z-index: 4; width: 200px; border-radius: 12px; }
  .hk-card--visa { top: 300px; margin-left: -196px; }
  .hk-card--mc { z-index: 5; top: 330px; margin-left: -6px; transform: rotate(8deg); }
  .hk-pop { width: calc(var(--s, 40px) * .66); }
  .hk-chip { padding: 10px 12px; border-radius: 16px; gap: 8px; } .hk-chip b { font-size: 13px; } .hk-chip small { font-size: 10.5px; }
  .hk-chip--sum { display: none; }
  .hk-chip--pts { left: 0; right: auto; top: 186px; } .hk-chip__ic svg { width: 24px; height: 24px; }
  .hk-chip--accept { right: 0; top: 246px; gap: 8px; } .hk-chip__brands { gap: 6px; } .hk-chip__brands img { height: 18px; }
}
@media (prefers-reduced-motion: reduce) { .hk-card, .hk-chip--pts { animation: none; } .hk-pop { display: none; } .hk-note { animation: none; transform: none; } .rd-js .hk-card, .rd-js .hk-chip { opacity: 1; translate: none; } }
.tx-video:not(.is-play) { cursor: pointer; } /* 2026-11-04 表紙のどこを押しても再生 */
/* 2026-11-04 再生中は画面を押すと止める・押すと再生（下の操作の帯の上まで）。アイコンの見た目は page-owner.css と同じ */
.tx-video__tap { position: absolute; left: 0; right: 0; top: 0; bottom: 64px; z-index: 2; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tx-video__tap[hidden] { display: none; }
.tx-video__flash { position: absolute; left: 50%; top: 45%; z-index: 4; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; }
.tx-video__flash.is-on { animation: vflash .7s ease-out both; }
.tx-video__flash.is-pause::before, .tx-video__flash.is-pause::after { content: ''; position: absolute; top: 22px; width: 7px; height: 24px; border-radius: 2px; background: #fff; }
.tx-video__flash.is-pause::before { left: 24px; } .tx-video__flash.is-pause::after { right: 24px; }
.tx-video__flash.is-play::before { content: ''; position: absolute; left: 27px; top: 21px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #fff; }
@keyframes vflash { 0% { opacity: 0; transform: scale(.85); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }

/* 11/10 見本（test2 だけ）：コインと一緒に、旅行や商品の写真がカードから浮かんで消える（すり合わせ 7-64）
   栄成さん「ポイントやマイルと一緒に写真を出してください。タイミングが遅いです。写真が小さすぎて正直全然見えないです」→ コインと同じ時に出す・大きく。札は外して、絵の下の注記に */
.hk-photo { position: absolute; z-index: 3; left: calc(50% + var(--x, 0px)); top: var(--y, 0px); width: 150px; aspect-ratio: 1; border-radius: 50%; /* 11/10 栄成さん「写真は丸にしたら？」 */ overflow: hidden; border: 3px solid #fff; box-shadow: 0 16px 30px -14px rgba(0,40,90,.5); opacity: 0; animation: hk-photo 8s calc(1.6s + var(--dl, 0s)) infinite both; }
.hk-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 11/10 19:10 栄成さん「写真とポイントマイルのコインは同じタイミング」→ 出始め（12%）・出きる（17%）・消え始め（36%）をコイン（hk-pop）とそろえる。消えきるのはコインの 46% より少しあと（50%）＝写真を見る間を残す */
@keyframes hk-photo { 0%, 12% { opacity: 0; translate: 0 30px; scale: .5; } 17% { opacity: 1; translate: 0 0; scale: 1; } 36% { opacity: 1; translate: calc(var(--dx, 0px) * .6) calc(var(--up, 60px) * -1); } 50%, 100% { opacity: 0; translate: var(--dx, 0px) calc(var(--up, 60px) * -1.8); scale: .94; } }
@media (max-width: 960px) { .hk-photo { left: calc(50% + var(--xm, 0px)); top: var(--ym, 0px); z-index: 6; width: 92px; /* 19:30 スマホは6枚 → 104px から小さく */ border-width: 3px; border-radius: 50%; --up: 20px; /* 浮き上がる幅を小さく：通知の文字（絵の上から131pxまで）にかからないように */ } .hk-photo--pc { display: none; } }
@media (prefers-reduced-motion: reduce) { .hk-photo { display: none; } }