@charset "UTF-8";

#content{display:flex;flex-direction:column;background-image:url('../images/art/paybg-a2f0c97cbd.svg');background-position:center;background-size:50em auto;}
#content>.inner{flex:auto;display:grid;grid:"title title" auto "content aside" 1fr/1fr clamp(30em,33%,35em);gap:var(--spacing);padding:var(--spacing);}

#content>.inner>.title{grid-area:title;}
#content>.inner>.aside{grid-area:aside;position:sticky;inset-block-start:calc(var(--main-nav-height) * 1px + var(--spacing));z-index:1;display:flex;flex-direction:column;gap:var(--spacing);align-self:start;}
#content>.inner>.content{grid-area:content;padding:var(--spacing);border-radius:1em;background-color:var(--background-color-L3,#fff);}

#content>.inner>.title h1{font-size:var(--SiteFS-XXL);}

#currency_filter{display:flex;flex-direction:column;gap:var(--spacing);background-color:var(--background-color-L1,#fff);padding:var(--spacing);border-radius:1em;}
#currency_filter h3{font-size:1em;font-weight:var(--SiteFW);}
#currency_selector{--CPT-US:4em;}

.notice{display:flex;flex-direction:column;gap:var(--spacing);background-color:var(--background-color-L1,#fff);padding:var(--spacing);border-radius:1em;}
.notice h3{font-size:1em;font-weight:var(--SiteFW);display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1em;}
.notice h3::before{content:attr(icon);display:block;font-size:1.5em;}
.notice ul{margin-inline-start:2.5em;display:flex;flex-direction:column;gap:1em;}
.notice ul>li{list-style:disc outside;}
.notice a{color:var(--text-color-alert);}

.country_acc{display:flex;flex-direction:column;gap:var(--spacing);}

.bank_acc_group{display:flex;flex-direction:column;gap:var(--spacing);}
.bank_acc_group~.bank_acc_group{padding-block-start:var(--spacing);box-shadow:var(--body-text-color-a5,rgba(0 0 0/5%)) 0 1px 0 inset;}
.bank_acc_group h3{font-size:1em;font-weight:var(--SiteFW);}
.bank_acc_list{display:grid;grid-template-columns:repeat(auto-fill,minmax(20em,1fr));align-items:start;gap:var(--spacing);}
.bank_acc_list .bank{display:grid;grid:"logo name"/auto 1fr;align-items:center;gap:.5em 1em;}
.bank_acc_list .logo{grid-area:logo;min-width:2em;max-width:10em;height:2em;box-sizing:border-box;overflow:hidden;}
.bank_acc_list .logo>img{display:block;width:auto;max-width:calc(100% - var(--brightness-filter,0) * var(--CPT-BDW) * 2);height:calc(100% - var(--brightness-filter,0) * var(--CPT-BDW) * 2);object-fit:contain;border-radius:calc(var(--brightness-filter,0) * .333334em);color:#000;background:rgba(255 255 255/var(--brightness-filter,0));padding:calc(var(--brightness-filter,0) * var(--CPT-BDW));}
.bank_acc_list .name{grid-area:name;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bank_acc_list .guide{grid-column:1/-1;display:flex;flex-direction:column;gap:.5em;}
.bank_acc_list .guide .msg{color:var(--body-text-color-a50,rgba(0 0 0/50%));}
.bank_acc_list .guide a[icon]{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.5em;}
.bank_acc_list .guide a[icon]::before{content:attr(icon);display:block;font-size:1.5em;align-self:start;}

@media only screen and (max-width: 1280px){}
@media only screen and (max-width: 1000px){}
@media only screen and (max-width: 800px){
	#content>.inner{grid:"title" "aside" "content";}
	#content>.inner>.title,
	#content>.inner>.aside,
	#content>.inner>.content{width:min(40em,100%);margin-inline:auto;box-sizing:border-box;}
	#content>.inner>.aside{position:unset;}
	.bank_acc_list .bank{grid:"logo name"/1fr auto;}
}
@media only screen and (max-width: 480px){
	#content>.inner>.content{padding:unset;border-radius:unset;background:unset;}
	#currency_filter{background-color:unset;padding:unset;border-radius:unset;}
	.bank_acc_group{padding:var(--spacing);border-radius:1em;background-color:var(--background-color-L3,#fff);box-shadow:unset !important;}
}