*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --orange:#ff6200;
  --bg:#fff;--bg-2:#f8f8f8;--bg-3:#f2f2f2;
  --line:rgba(0,0,0,0.08);--line-2:rgba(0,0,0,0.16);
  --text:#111;--text-2:#444;--text-3:#777;--text-4:#aaa;
  --max:920px;--pad:32px;--radius:10px;
  --ease:cubic-bezier(.22,1,.36,1);
}
html{scroll-behavior:smooth;background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{
  font-family:'Inter','Noto Sans JP',sans-serif;
  background:#fff;color:var(--text);line-height:1.7;
  letter-spacing:-0.005em;min-height:100vh;
}
::selection{background:var(--orange);color:#fff}

/* ハニカム背景 */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 2 L54 17 L54 47 L28 62 L2 47 L2 17 Z' fill='none' stroke='rgba(255,98,0,0.06)' stroke-width='1'/%3E%3Cpath d='M28 52 L54 67 L54 97 L28 112 L2 97 L2 67 Z' fill='none' stroke='rgba(255,98,0,0.06)' stroke-width='1'/%3E%3C/svg%3E");
  background-size:56px 100px;
}
/* 左右の縦ライン */
body::after{
  content:'';position:fixed;top:0;bottom:0;left:0;right:0;
  z-index:0;pointer-events:none;
  border-left:2px solid rgba(255,98,0,0.2);
  border-right:2px solid rgba(255,98,0,0.2);
  margin:0 18px;
}
/* bg-gridはhtmlに書いてある場合もあるが非表示 */
.bg-grid{display:none}

/* === Nav === */
nav{
  position:sticky;top:0;z-index:50;
  padding:0 var(--pad);height:60px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:#fff;
  border-bottom:2px solid var(--orange);
}
.brand{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:15px;letter-spacing:-0.02em;
  display:flex;align-items:center;gap:9px;color:#111;text-decoration:none;
}
.brand-dot{
  width:7px;height:7px;border-radius:50%;background:var(--orange);
  display:inline-block;flex-shrink:0;
  animation:pulse 2s infinite var(--ease);
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}
.nav-user{
  display:flex;align-items:center;gap:16px;
  font-size:13px;color:var(--text-2);
}
.nav-user .name{color:#111;font-weight:600;}
.logout-btn{
  background:none;border:1.5px solid rgba(255,98,0,0.25);color:#888;
  padding:6px 16px;border-radius:100px;font-size:12px;cursor:pointer;
  font-family:'Inter','Noto Sans JP',sans-serif;
  transition:all .2s var(--ease);
}
.logout-btn:hover{border-color:var(--orange);color:var(--orange);}

/* === Main === */
main{
  max-width:var(--max);margin:0 auto;padding:48px var(--pad) 120px;
  position:relative;z-index:1;
}

.back-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--text-3);text-decoration:none;font-size:13px;
  margin-bottom:32px;letter-spacing:0.01em;
  transition:color .2s var(--ease);
}
.back-link:hover{color:var(--orange);}

/* === Lesson Header === */
.lesson-header{margin-bottom:40px}
.lesson-num-tag{
  display:inline-flex;align-items:center;
  font-size:11px;color:var(--orange);text-transform:uppercase;
  letter-spacing:0.15em;margin-bottom:20px;padding:5px 12px;
  border:1.5px solid rgba(255,98,0,0.3);border-radius:100px;
  font-weight:600;
}
.lesson-header h1{
  font-family:'Space Grotesk','Noto Sans JP',sans-serif;
  font-size:clamp(30px,4vw,46px);font-weight:700;
  letter-spacing:-0.03em;line-height:1.1;margin-bottom:14px;color:#111;
}
.lesson-sub{color:var(--text-2);font-size:15px;line-height:1.75;max-width:680px;margin-bottom:20px}
.lesson-meta{
  display:flex;gap:20px;flex-wrap:wrap;
  font-size:12px;color:var(--text-3);letter-spacing:0.04em;
}

/* === Video === */
.video-wrap{
  position:relative;width:100%;aspect-ratio:16/9;
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--bg-2);
  margin-bottom:48px;
}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-placeholder{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--bg-2);
}
.placeholder-inner{text-align:center;padding:40px;max-width:480px}
.placeholder-label{
  font-size:11px;color:var(--text-4);text-transform:uppercase;
  letter-spacing:0.15em;margin-bottom:24px;
}
.placeholder-inner h3{
  font-family:'Space Grotesk','Noto Sans JP',sans-serif;
  font-size:22px;font-weight:700;letter-spacing:-0.02em;margin-bottom:14px;color:#111;
}
.placeholder-inner p{color:var(--text-2);font-size:14px;line-height:1.7;margin-bottom:20px}
.placeholder-note{
  font-size:11px;color:var(--text-3);background:var(--bg-3);
  padding:8px 16px;border-radius:6px;display:inline-block;
}

/* === Content === */
.content{margin-bottom:48px}
.content h2{
  font-family:'Space Grotesk','Noto Sans JP',sans-serif;
  font-size:19px;font-weight:700;letter-spacing:-0.02em;
  margin:40px 0 14px;padding-top:32px;border-top:1px solid var(--line);color:#111;
}
.content h2:first-of-type{padding-top:0;border-top:0;margin-top:0}
.content ul,.content ol{margin:8px 0 16px 22px;}
.content li{margin-bottom:8px;font-size:14px;line-height:1.8;color:var(--text-2)}

.resources{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.resource-card{
  padding:22px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;display:flex;flex-direction:column;gap:10px;
  transition:border-color .2s var(--ease);
}
.resource-card:hover{border-color:rgba(255,98,0,0.3);}
.resource-card .icon{
  font-size:11px;color:var(--text-4);text-transform:uppercase;letter-spacing:0.08em;
}
.resource-card h4{
  font-family:'Space Grotesk','Noto Sans JP',sans-serif;
  font-size:15px;font-weight:700;letter-spacing:-0.01em;color:#111;
}
.resource-card p{color:var(--text-2);font-size:13px;line-height:1.6}
.resource-link{
  color:var(--orange);font-size:13px;text-decoration:none;font-weight:600;
  align-self:flex-start;margin-top:4px;
}
.resource-link:hover{text-decoration:underline;}
.resource-note{
  font-size:11px;color:var(--text-3);align-self:flex-start;margin-top:4px;
}

/* === Actions === */
.actions{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  margin:48px 0;
}
.complete-btn{
  padding:14px 36px;border-radius:100px;
  background:transparent;border:1.5px solid rgba(255,98,0,0.3);color:#888;
  font-family:'Inter','Noto Sans JP',sans-serif;
  font-size:14px;font-weight:600;cursor:pointer;
  transition:all .25s var(--ease);
}
.complete-btn:hover{background:var(--orange);color:#fff;border-color:var(--orange);}
.complete-btn.done{
  background:var(--orange);color:#fff;border-color:var(--orange);
}
.complete-btn.done:hover{
  background:#e05500;border-color:#e05500;
  transform:translateY(-1px);
}
.status-text{
  font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:0.1em;
}

/* === Lesson nav === */
.lesson-nav{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:24px 0;border-top:1px solid var(--line);
  position:static;background:none;backdrop-filter:none;border-bottom:0;
}
.lesson-nav a{
  color:var(--text-3);text-decoration:none;font-size:14px;font-weight:500;
  transition:color .2s var(--ease);
}
.lesson-nav a:hover{color:var(--orange);}
.lesson-nav .disabled{color:var(--text-4);font-size:14px;cursor:default;}
.lesson-nav .next{color:var(--orange);font-weight:600;}
.lesson-nav .next:hover{color:#e05500;}

/* === Footer === */
footer{
  padding:24px var(--pad);text-align:center;
  border-top:1px solid var(--line);
  font-size:11px;color:var(--text-4);text-transform:uppercase;letter-spacing:0.08em;
  position:relative;z-index:1;
}

/* === Loading === */
.loading{
  position:fixed;inset:0;background:#fff;
  display:flex;align-items:center;justify-content:center;
  z-index:1000;font-size:11px;color:var(--text-3);
  text-transform:uppercase;letter-spacing:0.12em;
}
.loading.hide{display:none}

@media(max-width:900px){
  :root{--pad:20px}
  .resources{grid-template-columns:1fr}
  .lesson-nav{flex-direction:column;align-items:flex-start;gap:12px}
  nav{padding:0 20px;}
  body::after{margin:0 10px;}
}
@media(max-width:480px){
  .nav-user .greeting{display:none}
}