/* A stable section of the membership portal. No viewport-height media stage. */
:root { --paper:#f8f8f4; }
.portal-guide-header { padding:20px max(24px,calc((100% - 1280px)/2)); background:#f8f8f4; color:#152b42; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid #dbe2e4; font-family:system-ui,'Yu Gothic',Meiryo,sans-serif; }
.portal-guide-brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; flex-shrink:0; }
.portal-guide-brand strong { display:block; font-size:15px; letter-spacing:.04em; }
.portal-guide-brand small { display:block; font-size:9px; letter-spacing:.13em; }
.portal-guide-mark { font-size:35px; line-height:1; font-weight:700; letter-spacing:-.12em; }
.portal-guide-header nav { display:flex; align-items:center; gap:18px; margin:0; flex-wrap:wrap; }
.portal-guide-header nav a { font-size:14px; min-height:44px; display:inline-flex; align-items:center; text-decoration:none; color:inherit; padding:4px 0; }
.portal-guide-header nav .portal-guide-account { padding:8px 16px; background:#152b42; color:white; border-radius:8px; }
.guide-breadcrumb { max-width:1280px; margin:0 auto; padding:16px 24px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:13px; color:#526575; }
.guide-breadcrumb a { min-height:32px; display:inline-flex; align-items:center; }
.guide-overview { max-width:1280px; margin:auto; padding-inline:32px; }
.guide-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; padding-block:36px 80px; }
.guide-intro > * { min-width:0; }
.guide-kicker { font-size:12px; letter-spacing:.14em; font-weight:700; color:#526575; margin-bottom:24px; }
.guide-intro h1 { font-size:clamp(44px,5vw,68px); line-height:1.25; margin-bottom:26px; }
.guide-lead { max-width:30em; font-size:18px; line-height:1.9; }
.guide-caption { font-size:14px; margin-top:20px; color:#526575; }
.guide-intro-image { margin:0; padding:24px; background:#e6eee8; border-radius:14px; }
.guide-intro-image img { display:block; width:100%; height:auto; }
.guide-intro-image figcaption { margin-top:12px; font-size:13px; line-height:1.7; color:#374b42; }
.guide-explanation { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:64px; padding-block:64px; border-top:1px solid #d3dcd5; }
.guide-explanation h2,.guide-steps h2,.guide-roles h2 { font-size:clamp(26px,3vw,36px); line-height:1.5; margin-bottom:24px; }
.guide-explanation .intro-col { max-width:100%; }
.guide-steps { padding-block:64px; border-top:1px solid #d3dcd5; scroll-margin-top:24px; }
.guide-step-grid { list-style:none; padding:0; margin:32px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 28px; }
.guide-step-grid li { min-width:0; }
.guide-step-index { font-size:14px; color:#526575; letter-spacing:.12em; }
.guide-step-grid h3 { font-size:20px; line-height:1.5; margin:8px 0 16px; }
.guide-step-shot { display:block; position:relative; aspect-ratio:4/3; min-height:0; overflow:hidden; background:#e6eee8; border-radius:10px; }
.guide-step-shot img { position:absolute; inset:14px; width:calc(100% - 28px); height:calc(100% - 28px); object-fit:contain; }
.guide-step-grid p { margin-top:16px; font-size:16px; line-height:1.85; }
.guide-step-more { display:inline-flex; align-items:center; min-height:44px; font-size:14px; margin-top:8px; }
.guide-roles { padding-block:64px 80px; border-top:1px solid #d3dcd5; }
.guide-roles .roles-note { max-width:none; }
.guide-overview .hero-actions { margin-top:28px; }
.guide-overview .btn { min-height:48px; display:inline-flex; align-items:center; }
.guide-overview img { max-width:100%; }
@media(max-width:1050px){.guide-intro,.guide-explanation{gap:36px}.portal-guide-header{gap:16px}.portal-guide-header nav{gap:12px}.guide-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.portal-guide-header{flex-wrap:wrap;padding:16px 20px}.portal-guide-header nav{width:100%;justify-content:space-between;gap:8px}.portal-guide-header nav a{font-size:13px}.portal-guide-header nav .portal-guide-account{padding-inline:10px}.guide-overview{padding-inline:24px}.guide-intro,.guide-explanation{grid-template-columns:1fr;gap:32px}.guide-intro{padding-block:24px 48px}.guide-intro h1{font-size:44px}.guide-intro-image{max-width:560px;width:100%;justify-self:center}.guide-explanation,.guide-steps,.guide-roles{padding-block:48px}.guide-breadcrumb{padding-inline:24px}.guide-step-grid{gap:32px 20px}}
@media(max-width:540px){.guide-step-grid{grid-template-columns:1fr}.guide-step-shot{aspect-ratio:4/3}.guide-intro-image{padding:16px}.guide-intro h1{font-size:42px}.guide-overview .hero-actions{flex-direction:column;align-items:stretch}.guide-overview .btn{justify-content:center}.guide-lead{font-size:17px}.guide-roles .roles{font-size:14px;table-layout:fixed;width:100%}.guide-roles .roles th,.guide-roles .roles td{padding:12px 8px;overflow-wrap:anywhere}.guide-breadcrumb{font-size:12px}.portal-guide-header nav{gap:4px}.portal-guide-header nav a{font-size:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.portal-guide-header,.guide-breadcrumb{display:none}}