:root{
  --bg: #f5f8fc;
  --bg-soft: #eef4fb;
  --surface: #ffffff;
  --surface-2: #f8fbff;
  --text: #172033;
  --muted: #5d6a82;
  --line: #dbe5f0;
  --line-strong: #bfd0e4;
  --primary: #1f6fff;
  --primary-2: #0f52c9;
  --accent: #19b6a5;
  --accent-2: #0f8f83;
  --warning: #ffb84d;
  --danger: #d84b5f;
  --success: #1e9b61;

  --shadow-sm: 0 8px 20px rgba(19, 41, 80, 0.06);
  --shadow-md: 0 18px 40px rgba(19, 41, 80, 0.10);
  --shadow-lg: 0 24px 60px rgba(19, 41, 80, 0.14);

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;

  --wrap: 1180px;
  --wrap-narrow: 840px;

  --font-sans:
    "Inter",
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "Meiryo",
    system-ui,
    -apple-system,
    sans-serif;

  --font-mono:
    ui-monospace,
    "SFMono-Regular",
    "SF Mono",
    "Cascadia Code",
    "JetBrains Mono",
    "Menlo",
    "Consolas",
    monospace;

  --step-hero: clamp(2rem, 4vw, 4.2rem);
  --step-h1: clamp(1.9rem, 3vw, 3.2rem);
  --step-h2: clamp(1.35rem, 2vw, 2rem);
  --step-h3: clamp(1.05rem, 1.35vw, 1.3rem);

  --space-1: .4rem;
  --space-2: .7rem;
  --space-3: 1rem;
  --space-4: 1.35rem;
  --space-5: 1.8rem;
  --space-6: 2.4rem;
  --space-7: 3.2rem;
  --space-8: 4.6rem;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(31,111,255,.08), transparent 28%),
    radial-gradient(circle at right 20% top 10%, rgba(25,182,165,.08), transparent 22%),
    linear-gradient(180deg, #f8fbff 0%, #f2f7fc 100%);
  line-height:1.7;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

img{
  max-width:100%;
  display:block;
  height:auto;
}

a{
  color:var(--primary-2);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

button,
input,
textarea,
select{
  font:inherit;
}

code,
pre,
kbd{
  font-family:var(--font-mono);
}

pre{
  overflow:auto;
  padding:1rem 1.15rem;
  border-radius:16px;
  background:#0f1727;
  color:#eef5ff;
  box-shadow:var(--shadow-sm);
}

code{
  background:#eaf1fb;
  color:#12325e;
  padding:.15rem .4rem;
  border-radius:8px;
  font-size:.95em;
}

pre code{
  background:transparent;
  color:inherit;
  padding:0;
}

.wrap{
  width:min(var(--wrap), calc(100% - 2rem));
  margin-inline:auto;
}

.wrap-narrow{
  width:min(var(--wrap-narrow), calc(100% - 2rem));
  margin-inline:auto;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
}

.skip-link:focus{
  left:1rem;
  top:1rem;
  z-index:1000;
  background:#fff;
  color:#111;
  padding:.8rem 1rem;
  border-radius:12px;
  box-shadow:var(--shadow-md);
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(248, 251, 255, 0.86);
  border-bottom:1px solid rgba(191, 208, 228, .65);
}

.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:74px;
}

.brand{
  display:flex;
  align-items:center;
  gap:.9rem;
  min-width:0;
  color:inherit;
}

.brand:hover{
  text-decoration:none;
}

.brand__mark{
  width:52px;
  height:52px;
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  background:linear-gradient(135deg, #dcecff, #edf9f8);
  flex:0 0 auto;
}

.brand__mark img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.brand__text{
  min-width:0;
}

.brand__title{
  font-size:1.08rem;
  font-weight:800;
  line-height:1.1;
  letter-spacing:.01em;
  color:var(--text);
}

.brand__sub{
  margin-top:.15rem;
  font-size:.86rem;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nav-toggle{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  padding:.7rem .9rem;
  border-radius:12px;
  box-shadow:var(--shadow-sm);
}

.site-nav{
  display:flex;
  align-items:center;
  gap:.4rem;
}

.site-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:.65rem .95rem;
  border-radius:12px;
  color:var(--text);
  font-weight:700;
}

.site-nav a:hover,
.site-nav a[aria-current="page"]{
  background:#eaf2ff;
  color:var(--primary-2);
  text-decoration:none;
}

.lang-switch{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin-left:.4rem;
  padding-left:.8rem;
  border-left:1px solid var(--line);
}

.lang-switch a{
  min-height:auto;
  padding:.5rem .75rem;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  font-size:.92rem;
}

.lang-switch a.is-current{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

.hero{
  position:relative;
  padding:4.2rem 0 3.6rem;
}

.hero--home{
  padding:4.8rem 0 4rem;
}

.hero__grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:2rem;
  align-items:center;
}

.hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.45rem .8rem;
  border:1px solid #d9e6f6;
  background:rgba(255,255,255,.75);
  border-radius:999px;
  color:var(--primary-2);
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:var(--shadow-sm);
}

.hero h1{
  margin:.95rem 0 .9rem;
  font-size:var(--step-hero);
  line-height:1.08;
  letter-spacing:-.03em;
}

.hero p{
  margin:0;
  max-width:62ch;
  color:var(--muted);
  font-size:1.08rem;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  margin-top:1.4rem;
}

.hero__card{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(191, 208, 228, .85);
  border-radius:24px;
  padding:1rem;
  box-shadow:var(--shadow-md);
}

.hero__card img{
  width:100%;
  border-radius:18px;
  object-fit:cover;
}

.hero__meta{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.9rem;
  margin-top:1rem;
}

.mini-stat{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:.95rem;
  box-shadow:var(--shadow-sm);
}

.mini-stat strong{
  display:block;
  font-size:1.1rem;
}

.mini-stat span{
  display:block;
  margin-top:.2rem;
  color:var(--muted);
  font-size:.92rem;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:48px;
  padding:.85rem 1.15rem;
  border-radius:14px;
  border:1px solid transparent;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.button:hover{
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}

.button--primary{
  background:linear-gradient(135deg, var(--primary), #4a90ff);
  color:#fff;
}

.button--primary:hover{
  color:#fff;
}

.button--secondary{
  background:#fff;
  color:var(--text);
  border-color:var(--line);
}

.button--ghost{
  background:transparent;
  color:var(--primary-2);
  border-color:#cfe0f7;
}

.section{
  padding:2.8rem 0;
}

.section--tight{
  padding:1.8rem 0;
}

.section-title{
  margin:0 0 .6rem;
  font-size:var(--step-h2);
  line-height:1.2;
  letter-spacing:-.02em;
}

.section-lead{
  margin:0;
  max-width:70ch;
  color:var(--muted);
}

.grid{
  display:grid;
  gap:1.2rem;
}

.grid--2{
  grid-template-columns:repeat(2, minmax(0,1fr));
}

.grid--3{
  grid-template-columns:repeat(3, minmax(0,1fr));
}

.grid--4{
  grid-template-columns:repeat(4, minmax(0,1fr));
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,252,255,.92));
  border:1px solid var(--line);
  border-radius:20px;
  padding:1.2rem;
  box-shadow:var(--shadow-sm);
}

.card h2,
.card h3,
.card h4{
  margin:.1rem 0 .45rem;
  line-height:1.25;
}

.card p{
  margin:.55rem 0 0;
  color:var(--muted);
}

.card--step{
  position:relative;
  overflow:hidden;
}

.card--step::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:6px;
  background:linear-gradient(180deg, var(--primary), var(--accent));
}

.card__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-bottom:.45rem;
  font-size:.85rem;
  color:var(--primary-2);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.step-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.1rem;
  height:2.1rem;
  border-radius:999px;
  background:#e8f1ff;
  color:var(--primary-2);
  font-size:.95rem;
  font-weight:900;
  box-shadow:inset 0 0 0 1px #cfe0f7;
}

.training-progress{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1rem;
}

.training-progress a{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem .8rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-size:.95rem;
  font-weight:700;
}

.training-progress a:hover{
  text-decoration:none;
  background:#f1f7ff;
}

.lesson{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 300px;
  gap:1.4rem;
  align-items:start;
}

.lesson__main{
  min-width:0;
}

.lesson__sidebar{
  position:sticky;
  top:96px;
  display:grid;
  gap:1rem;
}

.panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:1rem;
  box-shadow:var(--shadow-sm);
}

.panel h3,
.panel h4{
  margin:.1rem 0 .55rem;
}

.panel p,
.panel li{
  color:var(--muted);
}

.panel ul,
.panel ol{
  margin:.55rem 0 0;
  padding-left:1.2rem;
}

.page-header{
  padding:2.7rem 0 1.2rem;
}

.page-header h1{
  margin:.3rem 0 .65rem;
  font-size:var(--step-h1);
  line-height:1.12;
  letter-spacing:-.03em;
}

.page-header p{
  margin:0;
  max-width:68ch;
  color:var(--muted);
}

.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  font-size:.93rem;
  color:var(--muted);
}

.breadcrumbs a{
  color:var(--muted);
}

.content{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow-md);
  padding:clamp(1.1rem, 2vw, 2rem);
}

.content > *:first-child{
  margin-top:0;
}

.content > *:last-child{
  margin-bottom:0;
}

.content h2{
  margin:2rem 0 .8rem;
  font-size:var(--step-h2);
  line-height:1.2;
}

.content h3{
  margin:1.5rem 0 .55rem;
  font-size:var(--step-h3);
}

.content p,
.content li{
  color:#344055;
}

.content ul,
.content ol{
  padding-left:1.25rem;
}

.content blockquote{
  margin:1.4rem 0;
  padding:1rem 1.1rem;
  border-left:5px solid var(--accent);
  background:#f2fbf9;
  border-radius:0 16px 16px 0;
  color:#24413d;
}

.content table{
  width:100%;
  border-collapse:collapse;
  margin:1.2rem 0;
  font-size:.97rem;
}

.content th,
.content td{
  border:1px solid var(--line);
  padding:.8rem .85rem;
  text-align:left;
  vertical-align:top;
}

.content th{
  background:#f3f8ff;
}

.checklist,
.warning-box,
.tip-box,
.webbie-box,
.prompt-box{
  border-radius:20px;
  padding:1rem 1.05rem;
  margin:1.1rem 0;
}

.checklist{
  background:#f4fbf7;
  border:1px solid #caecd8;
}

.tip-box{
  background:#eff7ff;
  border:1px solid #cfe0f7;
}

.warning-box{
  background:#fff7eb;
  border:1px solid #f6ddb0;
}

.prompt-box{
  background:#f8f9fc;
  border:1px solid #dde6f2;
}

.webbie-box{
  display:grid;
  grid-template-columns:84px 1fr;
  gap:1rem;
  align-items:start;
  background:linear-gradient(180deg, #f2fbff, #eef8ff);
  border:1px solid #d4e8fa;
}

.webbie-box img{
  width:84px;
  border-radius:18px;
}

.kicker{
  display:inline-block;
  margin-bottom:.45rem;
  font-size:.82rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:900;
  color:var(--primary-2);
}

.callout-title{
  margin:0 0 .25rem;
  font-size:1.02rem;
  line-height:1.2;
}

.callout-text{
  margin:0;
  color:#3f4a5c;
}

.steps{
  display:grid;
  gap:1rem;
  margin:1rem 0;
}

.step{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:.9rem;
  align-items:start;
  padding:1rem;
  border-radius:18px;
  border:1px solid var(--line);
  background:#fff;
}

.step__number{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, #e7f0ff, #e7fbf7);
  color:var(--primary-2);
  font-weight:900;
  box-shadow:inset 0 0 0 1px #cfe0f7;
}

.step__body h3{
  margin:.1rem 0 .35rem;
}

.step__body p{
  margin:0;
  color:var(--muted);
}

.next-lesson{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:1.5rem;
  padding:1rem 1.1rem;
  border:1px solid var(--line);
  border-radius:18px;
  background:#f6fbff;
}

.next-lesson strong{
  display:block;
  margin-bottom:.2rem;
  font-size:1.02rem;
}

.next-lesson span{
  color:var(--muted);
}

.feature-media{
  overflow:hidden;
  border-radius:24px;
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
  background:#fff;
}

.feature-media img{
  width:100%;
  object-fit:cover;
}

.icon-list{
  display:grid;
  gap:.8rem;
  margin:1rem 0 0;
}

.icon-list li{
  list-style:none;
  display:grid;
  grid-template-columns:1.2rem 1fr;
  gap:.7rem;
  align-items:start;
  padding:0;
  margin:0;
}

.icon-list li::before{
  content:"✓";
  color:var(--success);
  font-weight:900;
}

.site-footer{
  margin-top:3rem;
  padding:2.5rem 0 3rem;
  border-top:1px solid rgba(191, 208, 228, .7);
  background:rgba(255,255,255,.45);
}

.site-footer__grid{
  display:grid;
  grid-template-columns:1.1fr .9fr .9fr;
  gap:1.25rem;
}

.site-footer h3,
.site-footer h4{
  margin:.1rem 0 .55rem;
}

.site-footer p,
.site-footer li{
  color:var(--muted);
}

.site-footer ul{
  padding-left:1rem;
  margin:.55rem 0 0;
}

.footer-note{
  margin-top:1.2rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.94rem;
}

.is-hidden{
  display:none !important;
}

.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s ease, transform .5s ease;
}

.reveal.is-visible{
  opacity:1;
  transform:none;
}

@media (max-width: 1080px){
  .hero__grid,
  .lesson,
  .site-footer__grid{
    grid-template-columns:1fr;
  }

  .lesson__sidebar{
    position:static;
  }

  .hero__card{
    max-width:760px;
  }
}

@media (max-width: 860px){
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .site-nav{
    position:absolute;
    left:1rem;
    right:1rem;
    top:calc(100% + .6rem);
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:.25rem;
    padding:.75rem;
    background:rgba(255,255,255,.98);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--shadow-lg);
  }

  .site-nav.is-open{
    display:flex;
  }

  .site-nav a{
    justify-content:flex-start;
  }

  .lang-switch{
    margin-left:0;
    padding-left:0;
    border-left:0;
    padding-top:.35rem;
    border-top:1px solid var(--line);
  }

  .hero{
    padding:3.2rem 0 2.7rem;
  }

  .hero__meta,
  .grid--4,
  .grid--3,
  .grid--2{
    grid-template-columns:1fr;
  }

  .webbie-box{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  :root{
    --radius:16px;
    --radius-lg:22px;
  }

  body{
    line-height:1.65;
  }

  .wrap,
  .wrap-narrow{
    width:min(var(--wrap), calc(100% - 1.2rem));
  }

  .site-header__inner{
    min-height:68px;
  }

  .brand__mark{
    width:46px;
    height:46px;
    border-radius:14px;
  }

  .brand__title{
    font-size:1rem;
  }

  .hero h1{
    letter-spacing:-.025em;
  }

  .hero p,
  .page-header p{
    font-size:1rem;
  }

  .content{
    border-radius:20px;
    padding:1rem;
  }

  .card,
  .panel,
  .step,
  .next-lesson{
    border-radius:16px;
  }

  .step{
    grid-template-columns:42px 1fr;
    gap:.7rem;
    padding:.9rem;
  }

  .step__number{
    width:42px;
    height:42px;
    border-radius:14px;
  }

  .button{
    width:100%;
  }

  .hero__actions{
    flex-direction:column;
    align-items:stretch;
  }
}

@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }
}