/* Adopted proposal 03. All section styles are scoped to #payment. */
@font-face{font-family:GS Mincho;src:url(assets/display-ja.woff) format('woff');font-weight:400 700;font-display:swap}
@font-face{font-family:GS Sans;src:url(assets/text-ja.woff) format('woff');font-weight:300 520;font-display:swap}
@font-face{font-family:GS Sans;src:url(assets/text-ja-strong.woff) format('woff');font-weight:530 900;font-display:swap}
#payment{--ink:#244f68;--blue:#249ee1;--line:#d9eaf3;--serif:'GS Mincho','Yu Mincho',serif;--sans:'GS Sans','Yu Gothic',sans-serif;color:var(--ink);font-family:var(--sans);font-synthesis:none;line-break:strict}
#payment *{box-sizing:border-box}
#payment .payment-title,#payment h3,#payment p{margin:0}
#payment svg{display:block;width:100%;height:100%}
#payment em{font-style:normal}
#payment img{max-width:100%;display:block}
#payment .payment{max-width:540px;margin:auto;position:relative;overflow:hidden;container-type:inline-size;padding:31px 25px 20px;isolation:isolate}
#payment .section-heading{position:relative;z-index:1}
#payment .eyebrow{display:flex;align-items:center;gap:8px;font:8px/1.5 Arial,sans-serif;letter-spacing:.19em;color:#609bbf}
#payment .eyebrow>span:empty{height:1px;width:20px;background:currentColor}
#payment .payment-title{font:500 clamp(27px,8.6cqw,34px)/1.48 var(--serif);letter-spacing:.02em;margin:12px 0 10px}
#payment h3{font-size:14px;line-height:1.65;letter-spacing:.025em;font-weight:650}
#payment .section-lead{font-size:10px;line-height:1.8;color:#6c899b}
#payment .section-foot{display:flex;align-items:center;justify-content:center;gap:13px;font:8px/1.5 Georgia,serif;letter-spacing:.13em;color:#a2bdcb;margin-top:25px}
#payment .section-foot>span{width:24px;height:1px;background:#ddeaf1}
#payment .method{position:relative;padding:20px 0;border-top:1px solid var(--line)}
#payment .method-heading{display:flex;gap:10px;align-items:center}
#payment .method-no{font:italic 24px/1 Georgia,serif;color:var(--blue)}
#payment .method-icon{display:block;width:24px;height:24px;color:#71b9e4;margin-left:auto;flex-shrink:0}
#payment .method-sub{font-size:11px;line-height:1.7;color:#658297;margin:3px 0 0 36px}
#payment .payment-note{font-size:10px;line-height:1.8;color:#748e9e}
#payment .brands{text-align:center;background:#fff;border-radius:8px;padding:12px 14px 13px}
#payment .brands p{font-size:8px;color:#718c9b;letter-spacing:.09em;margin-bottom:12px}
#payment .brands img{width:100%;height:auto}
#payment .loan-bank{font-size:10px;line-height:1.8;color:#6d899a;margin-top:4px}
#payment .loan-bank>span{font-size:9px;margin-left:6px}
#payment .image-note{font-size:7px;line-height:1.4;text-align:right;color:#93aeba;margin:0 3px 4px}
#payment .card-scene{height:174px;position:relative;perspective:800px;isolation:isolate;--card-w:204px;--card-h:124px}
#payment .credit-card{position:absolute;left:50%;top:27px;width:var(--card-w);height:var(--card-h);border-radius:12px;overflow:hidden;transform-style:preserve-3d;border:1px solid #ffffffb3;background:linear-gradient(135deg,#86d9fa 0%,#37b9f1 30%,#118cce 70%,#0476b3 100%);box-shadow:1px 1px 0 #1598d2,2px 2px 0 #1594cf,3px 3px 0 #1087bd,4px 4px 0 #0a75aa,10px 18px 25px #2275a13d,inset 0 1px 0 #ffffffc2,inset 1px 0 0 #fff7;color:white;transform:translateX(-42%) rotateX(13deg) rotateY(-19deg) rotateZ(-12deg);z-index:2}
#payment .credit-card:before{content:'';position:absolute;inset:-45% -12%;background:linear-gradient(110deg,transparent 22%,#fff0 38%,#ffffff54 46%,#fff0 53%,transparent 70%);transform:rotate(-12deg);pointer-events:none}
#payment .credit-card:after{content:'';position:absolute;width:195px;height:195px;border:1px solid #ffffff37;border-radius:50%;top:-83px;right:-65px;box-shadow:0 0 0 14px #ffffff0b,0 0 0 30px #ffffff0a}
#payment .credit-card.rear{z-index:1;left:44%;top:10px;background:linear-gradient(130deg,#fff,#e9f2f8 42%,#afcede);color:#7a9aac;transform:translateX(-53%) rotateX(14deg) rotateY(-18deg) rotateZ(8deg);box-shadow:1px 1px 0 #d0e5ed,2px 2px 0 #b7d1df,3px 3px 0 #a8c8db,5px 12px 17px #1c628520,inset 0 1px 0 white}
#payment .card-caption{position:absolute;left:16px;top:14px;font:7px Arial,sans-serif;letter-spacing:.2em}
#payment .chip{position:absolute;top:41px;left:16px;width:28px;height:22px;border-radius:5px;border:1px solid #d6c498;background:linear-gradient(125deg,#f1e8c3,#c6ab6a 45%,#f8edc9 72%,#d5bd7c);box-shadow:inset 0 1px 1px #fffe}
#payment .chip:before{content:'';position:absolute;inset:6px 0;border-block:1px solid #ae914e}
#payment .chip:after{content:'';position:absolute;inset:0 8px;border-inline:1px solid #ae914e;border-radius:5px}
#payment .card-dots{position:absolute;left:17px;bottom:31px;font:11px Arial,sans-serif;letter-spacing:.08em;color:#ffffffe0;text-shadow:0 1px 1px #164f9b8a}
#payment .rear .card-dots{color:#8ca9b8;text-shadow:none}
#payment .card-name{position:absolute;left:17px;bottom:14px;font:7px Arial,sans-serif;letter-spacing:.22em;opacity:.85}
#payment .card-wave{position:absolute;right:16px;top:47px;font:12px Arial,sans-serif;letter-spacing:-3px;transform:rotate(90deg);opacity:.8}
#payment .card-shadow{position:absolute;width:200px;height:28px;border-radius:50%;background:#327aa92e;filter:blur(12px);bottom:5px;left:50%;transform:translateX(-50%) rotate(-8deg);z-index:0}
#payment .design-three{padding:31px 22px 21px;background:radial-gradient(ellipse at 105% 35%,#c9edfd 0,transparent 43%),radial-gradient(ellipse at -20% 73%,#dcf4ff 0,transparent 45%),#f9fdff}
#payment .design-three:before{content:'';position:absolute;width:390px;height:510px;border:1px solid #b4dced77;top:160px;left:-230px;border-radius:50%;transform:rotate(-27deg);z-index:-1}
#payment .design-three .section-heading{padding:0 3px 22px}
#payment .design-three .payment-title{font-size:29px;margin-bottom:0}
#payment .glass-method{position:relative;border:1px solid #fff;border-radius:18px;padding:17px 15px;display:flex;align-items:center;gap:13px;background:linear-gradient(120deg,#ffffffdb,#ffffff80);box-shadow:0 8px 25px #3267830d,inset 0 0 0 1px #deedf755;backdrop-filter:blur(10px);margin-bottom:13px}
#payment .glass-number{font:italic 26px Georgia,serif;color:#62b6df}
#payment .glass-method h3{font-size:14px}
#payment .glass-method p{font-size:10px;margin-top:3px;color:#648496}
#payment .glass-icon{margin-left:auto;display:block;width:33px;height:33px;color:#6eb8dc;filter:drop-shadow(2px 3px 0 #d1eaf5)}
#payment .credit-glass{display:block;padding:19px 15px 17px}
#payment .glass-head{display:flex;align-items:center;gap:11px}
#payment .glass-head h3{font-size:13px;line-height:1.55}
#payment .pay-tag{font-size:10px;margin-left:auto;padding:5px 8px;border:1px solid #cce4f1;border-radius:40px;background:#fff8;white-space:nowrap}
#payment .credit-glass .card-scene{margin-top:9px;height:170px;--card-w:192px;--card-h:117px}
#payment .credit-glass .front{background:linear-gradient(125deg,#faffffbd,#d5f2ffe0 38%,#82c4e5e0 79%,#c4e9f8e8);color:#447e9e;box-shadow:1px 1px 0 #a3d3e9,2px 2px 0 #94c8de,3px 3px 0 #81bdd8,10px 18px 25px #2275a12b,inset 0 1px 0 #fff}
#payment .credit-glass .front .card-dots{color:#5798b9;text-shadow:0 1px 0 white}
#payment .credit-glass .rear{background:linear-gradient(130deg,#7bd2f2,#2fa7d6);color:white}
#payment .credit-glass .rear .card-dots{color:#edfcff}
#payment .glass-method .image-note{font-size:7px;color:#91a8b7;margin-top:0}
#payment .glass-method .brands{background:#ffffffc9}
#payment .glass-method .brands p{font-size:8px;margin-bottom:10px}
#payment .glass-method .payment-note{font-size:9px;margin-top:11px}
#payment .glass-method .loan-bank{font-size:9px}
#payment .glass-method .loan-bank span{display:none}
#payment .design-three .section-foot{margin-top:19px}
#payment{position:relative;isolation:isolate;overflow:hidden;width:100%;background:radial-gradient(ellipse at 105% 35%,#c9edfd 0,transparent 43%),radial-gradient(ellipse at -20% 73%,#dcf4ff 0,transparent 45%),#f9fdff;border-top:1px solid #e3f1f7;border-bottom:1px solid #e3f1f7;scroll-margin-top:76px}
#payment .payment{max-width:620px;padding:43px 30px 30px;background:transparent}
#payment .payment-title{margin-top:12px;font-size:34px}
#payment h3{font-family:var(--sans);margin:0}
#payment .eyebrow{display:block;font-size:8px;font-weight:400;margin:0;line-height:1.5}
#payment .glass-head h3{margin:0}
#payment .loan-glass{text-decoration:none;color:var(--ink);cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
#payment .loan-glass:hover{transform:translateY(-2px);border-color:#8dcbed;box-shadow:0 10px 25px #277a9c21}
#payment .loan-glass:focus-visible{outline:3px solid #1598d9;outline-offset:4px}
#payment .loan-link-label{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;margin-left:auto;color:#218ac0;font:500 11px/1.5 var(--sans);padding:8px 10px;border:1px solid #bfdfef;border-radius:40px;background:#fff9;flex-shrink:0}
#payment .loan-link-label svg{height:14px;width:14px}
#payment .brands img{max-width:360px;margin:auto}
@media(min-width:701px){#payment .payment-title{font-size:38px}#payment .glass-method{padding:21px 22px;gap:16px}#payment .glass-method h3{font-size:17px}#payment .glass-number{font-size:30px}#payment .card-scene{margin-top:20px;height:190px}#payment .credit-card{scale:1.18;transform-origin:left center}#payment .brands{padding:16px 22px}#payment .brands p{font-size:10px}#payment .glass-method .payment-note{font-size:11px}#payment .glass-method .loan-bank{font-size:11px}#payment .loan-link-label{font-size:12px}}
@media(max-width:700px){#payment{scroll-margin-top:8px}#payment .payment{max-width:none;padding:31px 22px 21px}#payment .payment-title{font-size:29px}#payment .loan-glass{gap:10px}#payment .loan-glass h3{font-size:13px}#payment .loan-link-label{font-size:9px;gap:3px;padding:7px 8px}#payment .loan-link-label svg{width:12px;height:12px}}
@media(max-width:340px){#payment .payment{padding-inline:17px}#payment .glass-method{padding-inline:12px}#payment .credit-glass .card-scene{--card-w:176px;--card-h:107px}#payment .loan-glass{gap:8px}#payment .loan-link-label{padding:7px 6px;font-size:8px}#payment .loan-glass h3{font-size:12px}}
@media(prefers-reduced-motion:reduce){#payment .loan-glass{transition:none}}