/* WebExam Open LP guide stylesheet (from Claude Open guide lp-r49) */

    :root{--navy:#071c38;--blue:#145fd7;--sky:#edf6ff;--ink:#102943;--muted:#5b6f84;--line:#d8e4f0;--white:#fff;--stripe:#635bff;--sans:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;--display:"Barlow Condensed",sans-serif;--serif:"Noto Serif JP",serif}
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#f5f8fc;font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}.wrap{width:min(1180px,calc(100% - 40px));margin:auto}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.header-inner{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:25px;font-weight:700;color:#111}
    .nav{display:flex;align-items:center;gap:28px;font-weight:600}.nav a{text-decoration:none;white-space:nowrap}.nav a[aria-current="page"]{color:var(--blue)}.nav a:hover{color:var(--blue)}.menu-button{display:none;border:1px solid var(--line);background:#fff;border-radius:8px;padding:10px 13px;font-size:15px;color:var(--navy)}
    .hero{padding:72px 0 62px;background:linear-gradient(135deg,#eaf5ff 0%,#fff 52%,#e5f2ff 100%);border-bottom:1px solid var(--line);text-align:center}.crumb{margin:0 0 28px;font-size:13px;color:var(--muted);text-align:left}.crumb a{color:var(--blue)}.eyebrow{margin:0 0 13px;color:var(--blue);font-weight:700;letter-spacing:.14em;font-size:13px}.hero h1{margin:0 0 20px;font-family:var(--sans);font-size:clamp(28px,3.8vw,42px);font-weight:700;line-height:1.35;letter-spacing:-.02em}.hero-lead{max-width:1060px;margin:0 auto;color:#415b77;font-size:18px;line-height:1.9}.choice{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:700px;margin:38px auto 0}.choice a{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;background:#fff;border:1px solid #bcd4ef;border-radius:14px;text-decoration:none;font-weight:700;box-shadow:0 12px 30px rgba(8,38,75,.07);transition:background .15s,border-color .15s,box-shadow .15s,color .15s}.choice a:hover,.choice a:focus-visible{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 14px 34px rgba(8,38,75,.18)}
    .section{padding:76px 0}.section.white{background:#fff}.section-head{max-width:780px;margin:0 auto 42px;text-align:center}.route-kicker{margin:0 0 12px;color:var(--blue);font-size:13px;font-weight:700;letter-spacing:.13em}.section h2{margin:0 0 15px;font-family:var(--sans);font-size:clamp(26px,3.5vw,40px);font-weight:700;letter-spacing:-.02em}.section-intro{margin:0;color:var(--muted);line-height:1.7}.price-pair{display:grid;grid-template-columns:1fr 1fr;max-width:620px;margin:28px auto 0;border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#fff}.price-item{padding:16px 20px;text-align:center}.price-item+ .price-item{border-left:1px solid var(--line)}.price-item span{display:block;font-size:13px;color:var(--muted)}.price-item strong{font-size:28px;color:var(--blue);font-weight:600}
    .steps{display:grid;gap:22px;max-width:1000px;margin:auto}.step{display:grid;grid-template-columns:72px 1fr;gap:24px;padding:28px;background:#fff;border:none;border-radius:18px;box-shadow:0 14px 36px rgba(8,38,75,.05)}.step-no{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:var(--blue);color:#fff;font-size:19px;font-weight:700}.step h3{margin:2px 0 7px;font-size:20px}.step p{margin:0;color:var(--muted);font-size:15px;line-height:1.7}.shot{grid-column:2;margin-top:18px;border:1px solid var(--navy);border-radius:12px;overflow:hidden;background:#fff}.shot-plain{border:none;border-radius:0;box-shadow:none}.shot img{display:block;width:100%;height:auto}
    .stripe{padding:66px 0;background:var(--navy);color:#fff}.stripe-card{display:grid;grid-template-columns:180px 1fr;align-items:center;gap:36px}.stripe-word{font-size:42px;color:#a9a4ff;font-weight:700;letter-spacing:-.05em}.stripe h2{margin:0 0 12px;font-size:30px}.stripe p{margin:0;color:#dce8f7;line-height:1.7}.stripe-note{margin-top:13px!important;font-size:13px;color:#b9cae0!important}
    .finish{padding:72px 0;background:#fff}.finish-box{max-width:860px;margin:auto;padding:38px;border-radius:20px;background:var(--sky);text-align:center}.finish-box h2{margin:0 0 12px;font-family:var(--sans);font-weight:700;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em}.finish-box p{margin:0;color:var(--muted);line-height:1.7}
    .actions{display:flex;justify-content:center;gap:14px;margin-top:28px}.button{display:inline-block;padding:15px 24px;border:1px solid var(--blue);border-radius:9px;color:var(--blue);font-weight:700;text-decoration:none}.button.primary{background:var(--blue);color:#fff}.footer{padding:32px 0;background:#061c38;color:#aec1d8;text-align:center;font-size:13px}.footer a{color:#fff}
    @media(max-width:1000px){.nav{gap:16px;font-size:14px}.header-inner{min-height:78px}.brand{font-size:21px}}
    @media(max-width:780px){.wrap{width:min(100% - 28px,1180px)}.menu-button{display:block}.nav{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:flex-start;gap:0;padding:10px 20px 18px;background:#fff;border-bottom:1px solid var(--line)}.nav.open{display:flex}.nav a{width:100%;padding:12px 5px}.hero{padding:48px 0}.hero-lead{font-size:16px}.choice{grid-template-columns:1fr}.section{padding:58px 0}.price-pair{grid-template-columns:1fr}.price-item+ .price-item{border-left:0;border-top:1px solid var(--line)}.step{grid-template-columns:48px 1fr;gap:14px;padding:20px}.step-no{width:42px;height:42px;font-size:16px}.step h3{font-size:18px}.shot{grid-column:1 / -1}.stripe-card{grid-template-columns:1fr;gap:12px}.actions{flex-direction:column}.button{width:100%}}
    @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  .page-top{position:fixed;z-index:79;right:20px;bottom:20px;display:grid;place-items:center;width:54px;height:54px;border:1px solid #cbd9e8;border-radius:50%;background:rgba(255,255,255,.96);color:#123b70;box-shadow:0 10px 28px rgba(7,28,56,.16);cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:.3s ease}.page-top.show{opacity:1;transform:none;pointer-events:auto}.page-top span{display:block;font-size:15px;line-height:1}@media(max-width:680px){.page-top{right:12px;bottom:12px;width:50px;height:50px}}
  

.review-notice{padding:12px 24px;background:#fff5dd;color:#684b11;text-align:center;font:14px/1.7 sans-serif}.brand img{width:200px!important;height:auto!important;object-fit:contain}
@media(max-width:760px){.brand img{width:150px!important}.nav{flex-wrap:wrap;gap:12px!important}}

.finish .actions{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}.completion-note{font-size:14px!important}.login-link{font-size:15px}.step h3{font-weight:600}.brand{flex-shrink:0}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.card-note{grid-column:2;background:#edf6ff;border-radius:8px;padding:16px;line-height:1.7;color:#19416d!important}.finish .actions{gap:16px}.login-link{display:inline-flex;align-items:center;justify-content:center;padding:15px 24px;border:1px solid #aac6e8;border-radius:9px;color:#195aab;text-decoration:none;background:#fff}.finish-box>p:last-child{margin-top:26px;font-size:14px}.price-item strong{font-weight:500;font-size:24px}.hero-lead{line-height:1.7}@media(max-width:780px){.card-note{grid-column:1/-1}.finish .actions{flex-direction:column;align-items:stretch}.login-link{width:100%}}.shot{transition:transform .22s ease,box-shadow .22s ease;border-color .22s ease}.shot img{transition:filter .22s ease}.shot:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(8,38,75,.16);border-color:#2b6de5}.shot:hover img{filter:saturate(1.04) contrast(1.015)}@media(prefers-reduced-motion:reduce){.shot,.shot img{transition:none}.shot:hover{transform:none}}.footer-social{display:flex;justify-content:center;gap:12px;margin-bottom:16px}.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#145fd7;color:#fff;text-decoration:none;box-shadow:0 6px 14px #145fd730;transition:transform .15s,background .15s}.footer-social a:hover,.footer-social a:focus-visible{background:#0d4bb8;transform:translateY(-2px)}.footer>a{color:inherit}.footer>a:hover,.footer>a:focus-visible{color:#fff}
    /* ---- 2026-09-27 typesetting: Japanese justification, phrase-aware headings, lead/body contrast ---- */
    h1,h2,h3,h4,.section-title,blockquote{word-break:auto-phrase;line-break:strict;text-wrap:balance}
    p,li,dd,figcaption{line-break:strict}
    .question p{font-size:15.5px;line-height:1.95;color:#4a5a6e}
    .question p:first-child strong{word-break:auto-phrase}
    .question p:first-child,.question p:first-child strong{font-size:clamp(19px,1.7vw,22px);line-height:1.8;font-weight:700;color:var(--ink,#102a43)}
    .question p:first-child{margin-bottom:22px}
    .statement-copy p{font-size:15.5px;line-height:1.95}
    .statement-copy h2{font-size:clamp(24px,2.4vw,32px);line-height:1.5;margin-bottom:18px}
    .statement-copy p:first-of-type{font-size:clamp(17px,1.4vw,19px);line-height:1.85;font-weight:700;color:var(--ink)}
    
    /* ---- lp-r33: WebExam buttons = solid / white-outline on hover ---- */
    .navcta,.primary,.button.primary{border:2px solid var(--blue)!important;border-radius:4px!important;transition:background-color .15s ease,color .15s ease}
    .navcta:hover,.primary:hover,.button.primary:hover{background:#fff!important;color:var(--blue)!important}
    .public-sticky a{border:2px solid #fff!important;border-radius:4px!important;transition:background-color .15s ease,color .15s ease}
    .public-sticky a:hover{background:transparent!important;color:#fff!important}
    .navcta:focus-visible,.primary:focus-visible,.button:focus-visible,.public-sticky a:focus-visible{outline:3px solid #8fb2ff;outline-offset:2px}
  
    /* ---- guide r39: same page frame as the LP / tighter layout ---- */
    body{background:#eaf0f6!important}
    .page{max-width:1440px;margin:auto;background:#f5f8fc;overflow:hidden;box-shadow:0 20px 80px #071c3820}
    .section{padding:58px 0!important}
    .section-head{margin-bottom:28px!important}
    .steps{max-width:1060px!important;gap:14px!important}
    @media (min-width:901px){
      .step{grid-template-columns:56px minmax(0,1fr) minmax(0,440px)!important;column-gap:26px!important;row-gap:10px!important;padding:24px 26px!important;align-items:start}
      .step-no{width:48px!important;height:48px!important;font-size:17px!important}
      .step>div:not(.step-no){grid-column:2}
      .step .card-note{grid-column:2;margin:0!important}
      .step .shot{grid-column:3!important;grid-row:1 / span 3;margin:0!important;max-width:none!important;width:100%}
    }
  
    /* ---- guide r40: header button, same as the LP ---- */
    .site-header .nav{align-items:center}
    .site-header .nav .navcta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;margin-left:28px;border:2px solid var(--blue);border-radius:4px;background:var(--blue);color:#fff!important;text-decoration:none;font-weight:900;transition:background-color .15s ease,color .15s ease}
    .site-header .nav .navcta:hover{background:#fff;color:var(--blue)!important}
    .site-header .nav .navcta:focus-visible{outline:3px solid #8fb2ff;outline-offset:2px}
    @media (max-width:900px){.site-header .nav .navcta{margin:10px 0 0;min-height:46px}}
  
    /* ==== unified buttons (Claude Open LP + guide) ====
       primary = solid blue / hover white ; secondary(login) = white outline / hover solid ;
       on dark bands: primary = white / hover outline-white ; secondary = outline-white / hover white   */
    .navcta,.actions .primary,.join-cta .primary,.final .primary,.event .primary,.button.primary,
    .actions .login,.join-cta .login,.final .login,.login-link{
      box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
      min-height:54px!important;padding:0 28px!important;border:2px solid var(--blue)!important;border-radius:4px!important;
      font-size:16px!important;font-weight:800!important;letter-spacing:.02em!important;line-height:1!important;
      text-decoration:none!important;box-shadow:none!important;transition:background-color .15s ease,color .15s ease,border-color .15s ease!important}
    .navcta,.actions .primary,.join-cta .primary,.event .primary,.button.primary{background:var(--blue)!important;color:#fff!important}
    .navcta:hover,.actions .primary:hover,.join-cta .primary:hover,.event .primary:hover,.button.primary:hover{background:#fff!important;color:var(--blue)!important}
    .actions .login,.join-cta .login,.login-link{background:#fff!important;color:var(--blue)!important}
    .actions .login:hover,.join-cta .login:hover,.login-link:hover{background:var(--blue)!important;color:#fff!important}
    .final .primary{background:#fff!important;color:var(--blue)!important;border-color:#fff!important}
    .final .primary:hover{background:transparent!important;color:#fff!important}
    .final .login{background:transparent!important;color:#fff!important;border-color:#fff!important}
    .final .login:hover{background:#fff!important;color:var(--blue)!important}
    .final-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
    .actions,.join-cta{gap:14px!important}
    .public-sticky a{border-radius:4px!important;border:2px solid #fff!important}
    .navcta:focus-visible,.primary:focus-visible,.login:focus-visible,.login-link:focus-visible{outline:3px solid #8fb2ff!important;outline-offset:2px!important}
    @media (max-width:680px){.actions .primary,.actions .login,.final .primary,.final .login{width:100%!important}}
  
    .actions a.button.primary,.actions a.login-link{height:54px!important;margin:0!important;white-space:nowrap!important}
  
    /* ---- paired buttons: same width left/right ---- */
    .actions,.join-cta,.final-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,300px))!important;gap:14px!important;align-items:stretch!important}
    .join-cta,.final-actions{justify-content:center!important}
    .actions a,.join-cta a,.final-actions a{width:100%!important;padding:0 18px!important}
    @media (max-width:680px){.actions,.join-cta,.final-actions{grid-template-columns:1fr!important}}
  
    /* ---- same 8-character labels -> natural, equal widths ---- */
    .actions,.join-cta,.final-actions{display:flex!important;flex-wrap:wrap!important;gap:14px!important;align-items:center!important}
    .join-cta,.final-actions{justify-content:center!important}
    .actions a,.join-cta a,.final-actions a{width:auto!important;padding:0 28px!important}
    @media (max-width:680px){.actions a,.join-cta a,.final-actions a{width:100%!important}}
  
/* r63: body text = one colour for the whole site — a touch lighter than the heading navy (#102943, sumi 84%): #1f3851 (sumi about 79%). Small notes/captions stay lighter. */
:root{--text:#1f3851}
.lead,.screen-copy p,.feature-copy p,.faq p,.map-basis p,.claude-profile-copy>p,.question p,.join-grid p,.pillar-grid p,.act-band p,
#ranking p,.review-banner,.review-banner p,#event dd,#event td,.statement-copy p,.hero-membership,
.hero-lead,.section-intro,.step p,.finish-box p,.card-note{color:var(--text)}
#ranking .ranking-caption{color:var(--muted)}
.act-band p{color:var(--text)!important}
.footer-site{margin:14px 0 0;font-size:13px}.footer-site a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* r64 type scale — policy
   Readers: junior-high students and parents, on phones and PCs. Japanese text at 16px is the reading size.
   Size follows role and column width; line spacing 1.6–1.75 (enough air, no drawn-out lines).
   1 Lead (short summary right under a section heading)  17px / 1.7   — a step above body, signals "read this first"
   2 Body (paragraphs in a column 480px or wider)        16px / 1.75
   3 Card text (3-column cards, about 330px wide)        15px / 1.7   — keeps about 21 characters per line
   4 Table (event overview)                              15px / 1.6   (phones 14px)
   5 Notes 13px / 1.6, image captions 12px
   Phones: lead 16px; body 16px; cards 15px. */
.lead,#pillars .lead,.section-intro,.hero-lead{font-size:17px!important;line-height:1.7!important;text-wrap:balance;word-break:auto-phrase}
.screen-copy p,.feature-copy p,.faq p,.claude-profile-copy>p:not(.claude-profile-note),.question p+p,.pillar-grid p,
#ranking p:not(.ranking-caption),.review-banner p,.turn p,.map-basis p,.step p,.finish-box p:not(.completion-note),.stripe-card p:not(.stripe-note){font-size:16px!important;line-height:1.75!important}
.join-grid p,.role article p{font-size:15px!important;line-height:1.7!important}
.event-card dd{font-size:15px!important;line-height:1.6!important}
.day-note,.completion-note,.stripe-note,.note{font-size:13px!important;line-height:1.6!important}
.ranking-caption{font-size:12px!important}
@media(max-width:680px){
.lead,#pillars .lead,.section-intro,.hero-lead{font-size:16px!important}
.event-card dd{font-size:14px!important}
}
.claude-profile-note{line-height:1.6!important}
/* avoid a last line of only one or two characters */
p,li,dd{text-wrap:pretty}
/* short 2–3 line paragraphs: even line lengths (no one-word last line) */
.claude-profile-copy>p:not(.claude-profile-note),.question p+p{text-wrap:balance;word-break:auto-phrase}