/* 会員のページ（紹介・申し込み確認・会員になった直後・マイページ）の第3版の見た目（2026-10-23）。
   premium/_src/build.mjs が書き出す。手で直さない。土台は /assets/sky/site.css（本番の部品） */
.xpill{display:inline-flex;align-items:center;background:var(--gold);color:var(--ink);font-weight:900;font-size:14px;line-height:1.3;padding:6px 13px 5px;border-radius:999px;box-shadow:0 2px 0 var(--gold-d)}
.xfine{font-size:14px;font-weight:700;line-height:1.6;color:var(--ink);opacity:.86;margin-top:8px}
.xtrial{margin-top:14px}
.xbtn{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;min-height:56px;margin-top:16px;border-radius:999px;background:var(--gold);color:var(--ink);font-family:var(--body);font-weight:900;font-size:17px;line-height:1.3;text-decoration:none;box-shadow:0 3px 0 var(--gold-d);border:0;transition:transform .15s cubic-bezier(.2,.8,.2,1)}
.xbtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--gold-d)}
.xbtn svg{width:18px;height:18px;flex:none}
.xtl{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-size:14px;font-weight:900;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.xgm{font-family:var(--display);font-weight:400;letter-spacing:.02em}
/* 卓の絵：TOP と同じ描き方の卓に、ゲームの画面と駒を重ねる */
.pdio{position:relative;width:100%;aspect-ratio:100/82}
.pdio canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* 長いメールアドレスが幅320pxではみ出していた（2026-10-23 テスト役） */
[data-pr-account]{overflow-wrap:anywhere}
/* site.css の .shot（TOP の説明の画面の枠。padding:9px）が効いて、絵のまわりに紺の太い枠が出ていた（2026-10-23 テスト役）。ここでは枠を消す */
.pdio .shot{padding:0;position:absolute;left:2%;top:6%;width:42%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:8px;background:var(--ink);box-shadow:0 0 0 2px #fff,0 6px 16px rgba(28,43,74,.28);transform:rotate(-4deg);z-index:2}
.pdio .ontop{position:absolute;left:76%;top:-4%;width:24%;transform:translateX(-50%);z-index:3}
/* 4つのゲームの並び（会員になった直後） */
.xgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;margin-top:12px}
.xg{display:block;color:var(--ink);text-decoration:none;position:relative;container-type:inline-size}
.xg h3{font-family:var(--display);font-weight:400;font-size:min(20px,11.6cqi);line-height:1.2;letter-spacing:.02em;margin-top:2px;white-space:nowrap}
.xg h3.xlong{font-size:min(20px,9.4cqi);letter-spacing:0}
.xg .xn{font-size:14px;font-weight:700;line-height:1.5;opacity:.82;margin-top:2px}
.xg .xn::after{content:"";display:inline-block;width:7px;height:7px;border:solid currentColor;border-width:2.5px 2.5px 0 0;transform:rotate(45deg);margin-left:8px;vertical-align:1px}
/* 紹介ページ */
.gx{position:relative;max-width:680px;margin:0 auto}
.xhero{position:relative;color:var(--cream);padding:6px 4px 0;text-align:center}
.xhero .pdio{width:min(330px,94%);margin:0 auto}
.xhero .xpill{margin-top:4px}
.xhero h1{font-family:var(--display);font-weight:400;font-size:42px;line-height:1.15;letter-spacing:.02em;margin-top:10px;color:var(--cream)}
.xhero h1.long{font-size:min(42px,10.4vw)}
.xhero .xwho{font-size:14px;font-weight:900;opacity:.85;margin-top:2px}
.xhero .xd{font-size:15.5px;font-weight:700;line-height:1.75;margin-top:6px}
.xjoincard{position:relative;background:var(--cream);color:var(--ink);border-radius:26px;padding:30px 20px 22px;box-shadow:0 2px 0 rgba(28,43,74,.18),0 18px 30px rgba(8,16,34,.22)}
.xjoincard.xband{margin-top:22px;text-align:left;padding:24px 20px 22px}
.xband h2{font-size:21px;font-weight:900;line-height:1.45;color:var(--ink)}
.xsay1{font-size:15.5px;font-weight:700;line-height:1.75;color:var(--ink-2);margin-top:8px}
.xsay1 b{font-weight:900;color:var(--ink)}
.xband .why{margin:14px 0 0}
.xband .cap{margin-top:12px}
.xhow{margin-top:22px}
.xhow h2{font-size:19px;font-weight:900;color:var(--cream);margin:0 4px 10px}
.xhow ol.how{list-style:none;display:grid;grid-template-columns:1fr;gap:12px;margin:0;padding:0}
.xhow ol.how li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;background:var(--cream);color:var(--ink);border-radius:20px;padding:10px;box-shadow:0 2px 0 rgba(28,43,74,.18)}
.xhow ol.how .ph img{display:block;width:100%;max-width:none;margin:0;height:auto;border-radius:10px}
.xhow ol.how .n{font-family:var(--display);font-size:16px}
.xhow ol.how p{font-size:14.5px;font-weight:700;line-height:1.7;margin-top:4px;color:var(--ink)}
.xafter{color:var(--cream);margin-top:22px;padding:0 4px;font-size:14px;font-weight:700;line-height:1.8}
.xafter p+p{margin-top:12px}
.xafter .textlink{color:var(--cream);min-height:40px}
.xafter .backs{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:8px}
.xafter .legal{border-top-color:rgba(255,252,244,.2)}
.xafter .legal .textlink{color:#C9D3E6}
@media (min-width:600px){.xhow ol.how{grid-template-columns:repeat(3,1fr)}.xhow ol.how li{grid-template-columns:1fr;align-content:start}}
/* 申し込み内容の確認 */
.xjoin h1{margin-bottom:4px}
.xfirst{margin-top:8px}
.xfirst p{font-size:15px;font-weight:900;line-height:1.65;color:var(--ink);margin-top:8px}
.xjoin .steps{margin:12px 0 4px;gap:4px;flex-wrap:nowrap;justify-content:space-between}
.xjoin .steps li{font-size:13px;padding:4px 9px 4px 4px;gap:5px}
.xjoin .terms{grid-template-columns:5.8em minmax(0,1fr);font-size:14.5px;line-height:1.65}
.xjoin .terms dt,.xjoin .terms dd{padding:9px 0}
.xjoin .terms .sub{font-size:14px;color:var(--ink-2);margin-top:2px}
.xjoin .after{font-size:14px;color:var(--ink-2);line-height:1.7}
.xjoin .after.xtoday{font-size:15px;font-weight:900;color:var(--ink);margin-top:14px}
/* 会員になった直後 */
.xdone h1.xc{text-align:center;margin-bottom:12px}
.xstage{margin:0 -18px;overflow:hidden}
.xscene{position:relative;height:178px;background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 55%,var(--sky-3) 100%);overflow:hidden}
.xcloud{position:absolute;background:#fff;border-radius:999px;opacity:.95}
.xcloud::before,.xcloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.xcloud.xa{left:-18px;top:46px;width:96px;height:26px}.xcloud.xa::before{left:22px;top:-16px;width:40px;height:36px}.xcloud.xa::after{left:50px;top:-9px;width:28px;height:26px}
.xcloud.xb{right:-10px;top:24px;width:70px;height:20px}.xcloud.xb::before{left:14px;top:-12px;width:30px;height:28px}.xcloud.xb::after{left:36px;top:-7px;width:20px;height:18px}
.xhill{position:absolute;left:0;right:0;bottom:0;height:96px;width:100%}
.xcrew{position:absolute;left:12px;right:12px;bottom:14px;display:flex;align-items:flex-end;justify-content:space-between;z-index:3}
.xcrew .koma{--ks:46px}
.xmate{display:flex;flex-direction:column;align-items:center;flex:none}
.xcrew .xlead-k{display:block;line-height:0;width:calc(46px * 130 / 88);height:calc(46px * 162 / 88);margin-right:-14px}
.xcrew .xlead-k svg{width:100%;height:100%;overflow:visible}
.xlead-k .xsg{transform-box:fill-box;transform-origin:20% 100%}
.xdone [data-pr-return] .xbtn{margin-top:18px}
.xret{font-size:14px;font-weight:700;color:var(--ink-2);text-align:center;margin-top:8px}
.xdone h2.xh{font-size:19px;font-weight:900;margin:28px 0 0}
.xrenew{margin-top:24px;font-size:14px;font-weight:700;line-height:1.75;color:var(--ink);opacity:.86}
/* マイページ：無料の期間中の解約を確かめる欄 */
.xconfirm{margin-top:16px;background:var(--paper);border-radius:20px;padding:16px;box-shadow:inset 0 0 0 2px var(--road-edge)}
.xconfirm .xc-h{font-size:16px;font-weight:900;color:var(--ink)}
.xconfirm p{font-size:14.5px;font-weight:700;line-height:1.75;color:var(--ink-2);margin-top:6px}
.xconfirm .acts{margin-top:12px}
.pushbtn.xdanger{background:var(--red);color:var(--red-ink)}
.terms .sub{margin-top:4px}
@media (max-width:340px){
  .xcrew{left:8px;right:8px}.xcrew .koma{--ks:38px}
  .xcrew .xlead-k{width:calc(38px * 130 / 88);height:calc(38px * 162 / 88);margin-right:-12px}
  .xjoin .steps{flex-wrap:wrap}.xjoin .terms{grid-template-columns:5.4em minmax(0,1fr)}.xjoin .go{font-size:15.5px;padding:0 14px}.xjoin .steps li{font-size:12.5px}
  .xhero h1{font-size:36px}.xband h2{font-size:19px}.xjoincard.xband{padding:22px 16px 20px}
}
@media (prefers-reduced-motion:no-preference){
  .xcrew .koma svg{animation:bob 1.6s ease-in-out infinite}
  .xcrew .xmate:nth-child(3) .koma svg{animation-delay:-.4s}.xcrew .xmate:nth-child(4) .koma svg{animation-delay:-.8s}.xcrew .xmate:nth-child(5) .koma svg{animation-delay:-1.2s}
  .xlead-k .xsg{animation:xwave 2.4s ease-in-out 1.4s infinite}
}
@keyframes xwave{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg)}60%{transform:rotate(3deg)}}