:root{
--ink:#171717;
--muted:#555;
--line:#dedede;
--soft:#f6f6f4;
font-family:"Noto Sans JP",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
color:var(--ink);
font-synthesis:none}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:100px}
body{
margin:0;
background:#fff;
-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure{
margin:0}
a{
color:inherit;
text-underline-offset:5px}
a:focus-visible,summary:focus-visible{
outline:3px solid #555;
outline-offset:5px}
p{
line-height:1.95}
h1,h2,h3{
line-height:1.5;
overflow-wrap:anywhere}
.security-shell{
width:min(1080px,calc(100% - 64px));
margin-inline:auto}
.security-hero{
padding-top:76px;
padding-bottom:44px}
.security-eyebrow{
font-size:15px;
font-weight:700;
letter-spacing:.08em;
margin-bottom:24px}
.security-hero h1{
font-size:clamp(36px,4.1vw,58px);
font-weight:700;
letter-spacing:-.025em;
line-height:1.4}
.security-hero h1 span{
display:block}
.security-lead{
max-width:760px;
font-size:19px;
margin-top:24px}
.security-toc{
display:flex;
flex-wrap:wrap;
gap:12px 30px;
margin-top:40px;
padding:23px 0;
border-block:1px solid var(--line);
font-size:14px}
.security-toc a{
display:flex;
gap:12px;
text-decoration:none;
font-weight:700}
.security-toc a:hover span{
text-decoration:underline}
.security-section{
padding-block:56px 64px}
.section-title{
display:flex;
align-items:baseline;
gap:18px;
margin-bottom:20px}
.section-number{
flex-shrink:0;
font-size:14px;
font-weight:700;
border-top:2px solid var(--ink);
padding-top:8px}
.section-title h2{
font-size:clamp(25px,3vw,34px);
letter-spacing:-.025em}
.security-intro{
font-size:18px;
max-width:900px}
.login-flow{
list-style:none;
padding:28px 0 32px;
margin:28px 0;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
border-block:1px solid var(--line)}
.login-flow li{
position:relative;
display:flex;
min-height:154px;
align-items:center;
justify-content:center;
flex-direction:column;
text-align:center;
gap:8px;
padding:8px 25px}
.login-flow li+li{
border-left:1px solid var(--line)}
.login-flow li+li:before{
content:'→';
position:absolute;
left:-13px;
top:57px;
background:white;
padding:3px;
color:#555}
.login-flow strong{
font-size:17px}
.login-flow small{
font-size:13px;
color:var(--muted);
line-height:1.65}
.flow-symbol{
font-size:35px;
font-weight:500;
line-height:42px}
.login-flow img{
border-radius:11px}
.security-callout{
font-size:17px;
font-weight:500;
border-left:3px solid var(--ink);
padding:6px 0 6px 20px}
.payment-note{
display:grid;
grid-template-columns:64px 1fr;
gap:24px;
margin-top:45px}
.payment-note h3{
font-size:23px;
margin-bottom:14px}
.payment-note p{
font-size:17px}
.payment-note .security-note{
font-size:15px;
margin-top:16px}
.payment-mark{
width:58px;
height:40px;
border:2px solid var(--ink);
border-radius:8px;
margin-top:8px;
position:relative}
.payment-mark:before{
content:'';
position:absolute;
left:0;
right:0;
height:5px;
top:8px;
background:var(--ink)}
.payment-mark span{
position:absolute;
height:3px;
width:14px;
bottom:8px;
left:8px;
background:#999}
.security-band{
background:var(--soft)}
.information-list{
list-style:none;
margin:30px 0;
padding:0;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:15px}
.information-list li{
min-height:115px;
border:1px solid #d7d7d3;
border-radius:12px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:12px;
background:white;
text-align:center;
padding:18px 8px}
.information-list li>span{
font-size:22px;
line-height:1;
font-weight:500;
color:#666}
.information-list strong{
font-size:16px}
.security-note{
font-size:15px;
color:var(--muted);
margin-top:22px}
.vault-figure{
max-width:810px;
margin:38px auto 42px}
.vault-outer{
border:2px solid var(--ink);
border-radius:22px;
padding:30px;
background:#f3f3f0;
box-shadow:8px 8px 0 #e3e3df}
.vault-caption{
display:flex;
align-items:flex-start;
gap:20px}
.vault-caption h3{
font-size:24px;
margin-top:5px}
.vault-caption p{
font-size:15px;
color:#4f4f4f;
margin-top:8px}
.vault-label{
display:inline-block;
border:1px solid #bcbcb6;
border-radius:30px;
padding:3px 12px;
font-size:13px;
font-weight:700;
background:#fff}
.key-icon{
position:relative;
display:block;
width:36px;
height:50px;
margin:6px 5px 0;
flex-shrink:0}
.key-icon:before{
content:'';
position:absolute;
left:6px;
top:0;
border:3px solid currentColor;
border-radius:50%;
width:16px;
height:16px}
.key-icon:after{
content:'';
position:absolute;
top:20px;
left:15px;
width:11px;
height:22px;
border-left:3px solid currentColor;
border-bottom:3px solid currentColor;
transform:skewY(-15deg)}
.vault-inner{
margin:25px 0 0 56px;
border:2px solid #555;
border-radius:16px;
padding:26px;
background:white}
.vault-inner .key-icon{
transform:rotate(-28deg)}
.vault-data{
margin:24px 0 0 56px;
display:flex;
align-items:center;
gap:16px;
padding:22px;
border-radius:9px;
background:#171717;
color:white}
.data-icon{
width:24px;
height:28px;
display:block;
flex-shrink:0;
border:1.5px solid currentColor;
border-radius:3px;
position:relative}
.data-icon:before,.data-icon:after{
content:'';
height:1px;
background:currentColor;
position:absolute;
left:5px;
right:5px;
top:9px}
.data-icon:after{
top:16px}
.vault-separation{
font-size:13px;
color:#555;
text-align:right;
margin-top:18px}
.key-steps{
padding:0;
list-style:none;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:28px;
margin:0}
.step-number{
width:30px;
height:30px;
border-radius:50%;
border:1px solid var(--ink);
display:grid;
place-items:center;
font-size:14px;
margin-bottom:15px}
.key-steps h3{
font-size:20px;
margin-bottom:12px}
.key-steps p{
font-size:16px}
.policy-section{
padding-block:50px 60px}
.policy-section h2{
font-size:26px;
margin-bottom:18px}
.policy-section p{
font-size:16px;
max-width:800px}
.policy-links{
display:flex;
flex-wrap:wrap;
gap:20px 30px;
align-items:center;
margin-top:27px;
font-size:15px}
.policy-links .primary-link{
background:#171717;
color:#fff;
padding:14px 20px;
border-radius:6px;
text-decoration:none;
font-weight:700}
.policy-links a span{
margin-left:12px}
.skip-link{
position:absolute;
top:-70px;
left:20px;
z-index:100;
padding:10px 18px;
background:white}
.skip-link:focus{
top:10px}
@media(max-width:760px){
html{
scroll-padding-top:80px}
.security-shell{
width:calc(100% - 40px)}
.security-hero{
padding-top:44px;
padding-bottom:12px}
.security-eyebrow{
font-size:13px;
margin-bottom:18px}
.security-hero h1{
font-size:34px}
.security-lead{
font-size:17px}
.security-toc{
flex-direction:column;
gap:17px;
margin-top:27px;
font-size:14px}
.security-section{
padding-block:40px 46px}
.section-title{
gap:13px;
margin-bottom:19px}
.section-title h2{
font-size:26px}
.security-intro{
font-size:17px}
.login-flow{
margin-block:24px;
padding-block:20px}
.login-flow li{
padding:8px;
min-height:146px;
justify-content:flex-start}
.login-flow li+li:before{
top:40px;
font-size:17px;
left:-11px}
.login-flow strong{
font-size:14px}
.login-flow small{
font-size:11px}
.flow-symbol{
font-size:31px}
.security-callout{
font-size:16px;
padding-left:16px}
.payment-note{
grid-template-columns:1fr;
gap:15px;
margin-top:32px}
.payment-note h3{
font-size:22px}
.payment-note p{
font-size:16px}
.information-list{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px}
.information-list li{
min-height:105px}
.information-list strong{
font-size:15px}
.security-note{
font-size:14px}
.vault-figure{
margin-block:28px 35px}
.vault-outer{
padding:20px 14px;
border-radius:16px;
box-shadow:5px 5px 0 #e3e3df}
.vault-caption{
gap:7px}
.vault-caption h3{
font-size:20px}
.vault-caption p{
font-size:13px}
.key-icon{
width:28px;
margin-inline:0;
transform:scale(.85);
transform-origin:left top}
.vault-label{
font-size:12px}
.vault-inner{
margin:20px 0 0 16px;
padding:18px 12px;
border-radius:12px}
.vault-inner .key-icon{
transform:scale(.85) rotate(-28deg)}
.vault-data{
margin-left:0;
padding:18px 14px;
font-size:16px}
.vault-separation{
font-size:12px}
.key-steps{
grid-template-columns:1fr;
gap:25px}
.key-steps li{
position:relative;
padding-left:44px}
.step-number{
position:absolute;
top:0;
left:0}
.key-steps h3{
font-size:19px;
margin-bottom:8px}
.key-steps p{
font-size:16px}
.policy-section{
padding-block:38px 44px}
.policy-section h2{
font-size:24px}
.policy-links{
align-items:flex-start;
flex-direction:column}
.site-footer{
margin-top:0}
}
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
}
.security-hero-layout{
display:grid;
grid-template-columns:1.45fr 1fr;
gap:32px;
align-items:center}
.security-hero-art{
display:block;
width:100%;
height:auto}
.security-hero-layout h1{
font-size:clamp(34px,3.35vw,48px)}
@media(max-width:760px){
.security-hero-layout{
grid-template-columns:1fr;
gap:18px}
.security-hero-art{
width:min(280px,85%);
margin-inline:auto}
.security-hero-layout h1{
font-size:34px}
.login-flow{
grid-template-columns:1fr;
padding:0}
.login-flow li{
display:grid;
grid-template-columns:44px 1fr;
column-gap:16px;
row-gap:5px;
padding:20px 24px;
min-height:90px;
text-align:left;
align-items:center}
.login-flow li+li{
border-left:0;
border-top:1px solid var(--line)}
.login-flow li+li:before{
content:'↓';
left:44px;
top:-13px;
padding:0 4px;
background:white}
.login-flow .flow-symbol,.login-flow img{
grid-column:1;
grid-row:1/4;
text-align:center}
.login-flow strong{
grid-column:2;
font-size:16px}
.login-flow small{
grid-column:2;
font-size:13px}
.login-flow li:first-child strong{
grid-row:1/4}
}