:root{
    --gold:#E3A93C;
    --gold-line:#E8B94A;
    --heading-orange:#F0A233;
    --ink:#3A3A3A;
    --muted:#8A8A8A;
    --green-box-bg:#E2E9CB;
    --green-box-border:#c3d59e;
    --coral-border:#c2605a;
    --coral-bg:#fbeeec;
    --shell-bg:#e9ebee;
    --page-w: 900px;
    --font-main:'M PLUS Rounded 1c','Hiragino Maru Gothic ProN','Yu Gothic',sans-serif;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:var(--font-main);
    background:var(--shell-bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  ruby rt{ font-size:0.55em; color:#777; user-select:none; }

  /* ---- App shell ---- */
  .app-shell{
    max-width:1100px;
    margin:0 auto;
    padding:18px 16px 60px;
  }
  .app-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:10px 18px;
    background:#fff;
    border-radius:14px;
    box-shadow:0 2px 10px rgba(0,0,0,0.06);
    margin-bottom:14px;
  }
  .app-topbar .course-name{
    font-weight:800;
    font-size:15px;
    color:var(--ink);
  }
  .app-topbar .course-name small{
    display:block;
    font-weight:500;
    font-size:11px;
    color:var(--muted);
    letter-spacing:.02em;
  }
  .progress-track{
    flex:1;
    max-width:320px;
    height:8px;
    background:#eee;
    border-radius:99px;
    overflow:hidden;
  }
  .progress-fill{
    height:100%;
    background:linear-gradient(90deg,#ffd166,var(--heading-orange));
    border-radius:99px;
    transition:width .3s ease;
  }
  .progress-label{ font-size:12px; color:var(--muted); white-space:nowrap; }

  /* ---- Page tabs ---- */
  .page-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:16px;
  }
  .page-tabs button{
    border:none;
    background:#fff;
    color:var(--muted);
    font-family:inherit;
    font-weight:700;
    font-size:13px;
    padding:8px 14px;
    border-radius:10px;
    cursor:pointer;
    box-shadow:0 1px 4px rgba(0,0,0,0.06);
    transition:all .15s ease;
  }
  .page-tabs button.active{
    background:var(--heading-orange);
    color:#fff;
    box-shadow:0 3px 10px rgba(240,162,51,0.4);
  }
  .page-tabs button:hover:not(.active){ background:#fff6e8; }

  /* ---- Lesson sheet (paper) ---- */
  .sheet-wrap{
    background:#fff;
    border-radius:16px;
    box-shadow:0 6px 24px rgba(0,0,0,0.08);
    padding:44px 52px 40px;
    min-height:600px;
  }
  .lesson-page{ display:none; }
  .lesson-page.active{ display:block; animation:fadein .25s ease; }
  @keyframes fadein{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

  .page-logo{
    display:flex;
    justify-content:flex-end;
    margin-bottom:6px;
  }
  .page-logo img{ height:34px; }

  .main-title{
    text-align:center;
    font-size:26px;
    font-weight:800;
    color:#333;
    margin:6px 0 14px;
    position:relative;
  }
  .main-title .video-tag{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    font-size:12px;
    font-weight:700;
    color:#666;
    background:#f2f2f2;
    padding:3px 8px;
    border-radius:6px;
  }
  .gold-rule{
    border:none;
    border-top:3px solid var(--gold-line);
    margin:0 0 22px;
  }
  .gold-rule.thin{ border-top-width:2px; margin-bottom:18px;}

  .section-title{
    color:var(--heading-orange);
    font-size:20px;
    font-weight:800;
    margin:34px 0 4px;
  }
  .section-title:first-of-type{ margin-top:0; }
  .section-title + .gold-rule{ margin-top:6px; }

  .body-text{ font-size:15.5px; line-height:1.85; margin:10px 0; }
  .body-text.small{ font-size:14px; }

  /* goal box (green) */
  .goal-box{
    position:relative;
    background:var(--green-box-bg);
    border-radius:18px;
    padding:18px 26px 18px 130px;
    margin:26px 0 34px;
    min-height:110px;
  }
  .goal-box img.mascot{
    position:absolute;
    left:-6px;
    top:50%;
    transform:translateY(-50%);
    height:130px;
  }
  .goal-box h3{ margin:0 0 8px; font-size:16px; font-weight:800;}
  .goal-box ul{ margin:0; padding-left:1.2em; }
  .goal-box li{ margin:4px 0; font-size:15px; }

  /* coral note box */
  .note-box{
    border:2px solid var(--coral-border);
    background:var(--coral-bg);
    border-radius:16px;
    padding:20px 26px;
    margin:22px 0;
  }
  .note-box h4{ margin:0 0 10px; font-size:16px; font-weight:800; }
  .note-box .figure{ text-align:center; margin-top:12px; }
  .note-box{ overflow:hidden; }
  .note-box.with-figure{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
  .note-box.with-figure .text-col{ flex:1 1 320px; min-width:220px; }
  .note-box.with-figure .img-col{ flex:0 0 auto; max-width:200px; }
  .note-box.with-figure .img-col img{ max-width:100% !important; height:auto; display:block; }
  .note-box.plain-strong{ font-size:15.5px; line-height:1.9; }

  /* hero illustration with speech bubbles */
  .hero-illust{
    position:relative;
    max-width:560px;
    margin:8px auto 30px;
  }
  .hero-illust img{ width:100%; display:block; border-radius:4px; }
  .speech-bubble{
    position:absolute;
    background:#fff;
    border:1.5px solid #ccc;
    border-radius:14px;
    padding:8px 16px;
    font-size:13.5px;
    font-weight:700;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
    white-space:nowrap;
  }
  .speech-bubble::after{
    content:"";
    position:absolute;
    bottom:-9px;
    left:28px;
    border-width:9px 7px 0 7px;
    border-style:solid;
    border-color:#fff transparent transparent transparent;
    filter:drop-shadow(0 1px 0 #ccc);
  }
  .speech-bubble.left{ top:-6px; left:6px; }
  .speech-bubble.right{ top:-6px; right:6px; }
  .speech-bubble.right::after{ left:auto; right:28px; }

  /* learning points grid (page1 bottom) */
  .learn-points{ display:flex; gap:40px; margin-top:8px; flex-wrap:wrap; min-width:0; }
  .learn-points .col-label{ font-size:15px; font-weight:800; margin-bottom:10px; }
  .block-grid{ display:flex; gap:14px; flex:1 1 340px; min-width:0; }
  .block-col{ display:flex; flex-direction:column; gap:10px; min-width:0; }
  .block-col img{ display:block; max-width:150px; width:100%; height:auto; }
  .thoughts-col{ flex:1 1 220px; min-width:0; }
  .thoughts-col ul{ margin:0; padding-left:0; list-style:none; }
  .thoughts-col li{
    font-size:14.5px;
    padding:9px 0;
    border-bottom:1px dashed #ddd;
  }

  /* generic figure */
  .figure{ text-align:center; margin:16px 0; }
  .figure img{ max-width:100%; border-radius:6px; }
  .figure.small img{ max-width:340px; }
  .fig-caption{ font-size:12.5px; color:var(--muted); margin-top:4px; }

  .step-row{ display:flex; gap:22px; flex-wrap:wrap; margin:14px 0 22px; }
  .step-col{ flex:1 1 260px; min-width:0; }
  .step-col h5{ font-size:14.5px; font-weight:800; margin:0 0 8px; }
  .step-col img{ max-width:100%; height:auto; border-radius:6px; border:1px solid #eee; }

  .col3{ display:flex; gap:18px; flex-wrap:wrap; margin:14px 0 22px; }
  .col3 > div{ flex:1 1 220px; min-width:0; }
  .col3 h5{ font-size:15px; font-weight:800; margin:0 0 8px; }
  .col3 img{ max-width:100%; height:auto; border:1px solid #eee; border-radius:6px; }

  .lead-line{ font-size:15.5px; font-weight:700; margin:18px 0 8px; }

  table.term-table{ border-collapse:collapse; margin:14px 0; }
  table.term-table td{ padding:8px 14px; font-size:14.5px; vertical-align:middle;}

  .footer-bar{
    text-align:center;
    margin-top:36px;
    padding-top:14px;
    border-top:1px solid #eee;
  }
  .footer-bar .pagenum{ font-size:14px; color:#555; margin-bottom:4px; }
  .footer-bar .copy{ font-size:11px; color:#aaa; }

  .nav-buttons{
    display:flex;
    justify-content:space-between;
    max-width:1100px;
    margin:14px auto 0;
  }
  .nav-buttons button{
    font-family:inherit;
    font-weight:700;
    font-size:14px;
    padding:10px 22px;
    border-radius:10px;
    border:none;
    background:#fff;
    color:var(--heading-orange);
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    cursor:pointer;
  }
  .nav-buttons button:disabled{ opacity:.35; cursor:default; }
  .nav-buttons button:hover:not(:disabled){ background:var(--heading-orange); color:#fff; }

  /* ---- Page 8: Check & Challenge ---- */
  .challenge-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:6px;
  }
  .challenge-head img{ height:56px; }
  .challenge-head h2{
    font-size:21px;
    font-weight:800;
    color:#333;
    margin:0;
  }
  .challenge-frame{
    border:2.5px solid #5b7fbf;
    border-radius:20px;
    padding:26px 30px;
  }
  .q-block{ margin-bottom:30px; }
  .q-title{ font-size:15.5px; font-weight:800; margin-bottom:16px; }

  .match-wrap{
    display:flex;
    justify-content:space-between;
    gap:60px;
    position:relative;
  }
  .match-col{ display:flex; flex-direction:column; gap:18px; flex:1; }
  .match-item{
    background:#3c78c9;
    color:#fff;
    font-weight:800;
    font-size:15px;
    text-align:center;
    padding:14px 10px;
    border-radius:8px;
    cursor:pointer;
    user-select:none;
    border:3px solid transparent;
    transition:all .15s ease;
  }
  .match-item.right-item{
    background:#dbe6f5;
    color:#274873;
    text-align:left;
    padding:14px 18px;
    font-weight:600;
    font-size:14px;
  }
  .match-item.selected{ border-color:#ffb400; box-shadow:0 0 0 3px rgba(255,180,0,0.25); }
  .match-item.matched{ opacity:0.55; cursor:default; }
  #matchSvg, .match-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
  .match-feedback{ margin-top:14px; font-size:13.5px; font-weight:700; min-height:18px; }

  .free-answer{
    width:100%;
    min-height:110px;
    border:1.5px solid #cfcfcf;
    border-radius:10px;
    padding:12px 14px;
    font-family:inherit;
    font-size:14.5px;
    resize:vertical;
  }
  .free-answer:focus{ outline:2px solid var(--heading-orange); border-color:transparent; }

  .quiz3-options{ display:flex; gap:16px; flex-wrap:wrap; margin-top:14px;}
  .quiz3-card{
    flex:0 1 190px;
    border:2.5px solid #ddd;
    border-radius:12px;
    padding:10px;
    text-align:center;
    cursor:pointer;
    transition:all .15s ease;
  }
  .quiz3-card.picked{ border-color:var(--heading-orange); background:#fff8ec; }
  .quiz3-card .letter{
    display:inline-block;
    width:26px; height:26px; line-height:26px;
    background:#3c78c9; color:#fff; font-weight:800; font-size:13px;
    border-radius:6px; margin-bottom:8px;
  }
  .quiz3-card img{ width:100%; }
  .answer-line{ margin-top:16px; font-size:15px; font-weight:700; display:flex; align-items:center; gap:10px;}
  .answer-line input{
    font-family:inherit;
    font-size:15px;
    font-weight:700;
    border:none;
    border-bottom:2px solid #999;
    padding:4px 8px;
    width:90px;
    text-align:center;
  }
  .answer-line input:focus{ outline:none; border-color:var(--heading-orange); }
  .submit-check{
    margin-top:26px;
    font-family:inherit;
    font-weight:800;
    font-size:14.5px;
    background:var(--heading-orange);
    color:#fff;
    border:none;
    padding:12px 28px;
    border-radius:10px;
    cursor:pointer;
  }
  .submit-check:hover{ filter:brightness(1.05); }
  .save-note{ font-size:12.5px; color:var(--muted); margin-top:10px; }

  @media (max-width:720px){
    .sheet-wrap{ padding:26px 18px; }
    .goal-box{ padding-left:20px; }
    .goal-box img.mascot{ position:static; display:block; height:90px; margin:0 auto 10px; transform:none; }
    .match-wrap{ gap:24px; }
    .learn-points{ flex-direction:column; }
  }

  /* ---- Site-wide header / footer (shared across all course pages) ---- */
  .site-header{
    background:#fff;
    border-bottom:2px solid var(--heading-orange);
    padding:6px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    position:sticky;
    top:0;
    z-index:50;
  }
  .site-header a.brand{
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:inherit;
  }
  .site-header a.brand img{ height:18px; }
  .site-header .brand-text{
    font-weight:800;
    font-size:14px;
    color:#333;
  }
  .site-header nav a{
    color:#666;
    text-decoration:none;
    font-size:12.5px;
    font-weight:700;
    margin-left:18px;
  }
  .site-header nav a:hover{ color:var(--heading-orange); }

  .site-footer{
    text-align:center;
    padding:26px 16px 34px;
    color:#999;
    font-size:12px;
  }

  /* ---- Index / course-list page ---- */
  .hero-band{
    background:linear-gradient(135deg,#fff8ec,#eef2fb);
    padding:40px 16px 34px;
    text-align:center;
  }
  .hero-band h1{
    font-size:24px;
    font-weight:800;
    color:#333;
    margin:0 0 8px;
  }
  .hero-band p{
    color:#777;
    font-size:14px;
    margin:0;
  }
  .course-wrap{
    max-width:920px;
    margin:0 auto;
    padding:28px 16px 60px;
  }
  .course-wrap h2{
    font-size:17px;
    font-weight:800;
    color:var(--heading-orange);
    border-bottom:2px solid var(--gold-line);
    padding-bottom:8px;
    margin:30px 0 14px;
  }
  .lesson-list{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .lesson-card{
    display:flex;
    align-items:center;
    gap:16px;
    background:#fff;
    border-radius:12px;
    padding:14px 18px;
    box-shadow:0 1px 6px rgba(0,0,0,0.06);
    text-decoration:none;
    color:inherit;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .lesson-card.enabled:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(0,0,0,0.1);
  }
  .lesson-card.disabled{
    opacity:0.55;
    cursor:default;
  }
  .lesson-card .lesson-code{
    flex:0 0 56px;
    text-align:center;
    font-weight:800;
    font-size:13px;
    color:#fff;
    background:var(--heading-orange);
    border-radius:8px;
    padding:6px 0;
  }
  .lesson-card.disabled .lesson-code{ background:#bbb; }
  .lesson-card .lesson-title{
    flex:1;
    font-size:14.5px;
    font-weight:700;
    color:#333;
  }
  .lesson-card .lesson-duration{
    flex:0 0 auto;
    font-size:12.5px;
    color:#999;
  }
  .lesson-card .lesson-status{
    flex:0 0 auto;
    font-size:12px;
    font-weight:700;
    color:#aaa;
  }

  /* ---- Lesson page: fixed shell — tabs+video always visible, text scrolls in its own pane ---- */
  html.lesson-page-html, body.lesson-page-body{
    height:100%;
    overflow:hidden;
    margin:0;
  }

  .lesson-shell{
    display:flex;
    flex-direction:column;
    height:100vh;
  }

  /* ---- top chrome: back-link + pager combined in one slim row ---- */
  .lesson-topbar-mini{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:5px 16px;
    flex:0 0 auto;
  }
  .lesson-topbar-mini .back-link{
    color:#888;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
    white-space:nowrap;
  }
  .lesson-topbar-mini .back-link:hover{ color:var(--heading-orange); }

  .lesson-split{
    display:flex;
    flex:1;
    min-height:0;
    gap:0;
    max-width:1700px;
    width:100%;
    margin:0 auto;
    padding:0 16px 10px;
  }

  /* ---- pager: compact toggle that flies out the numbered tabs (saves height) ---- */
  .pager-compact{ position:relative; flex:0 0 auto; z-index:70; }
  .pager-toggle{
    display:flex;
    align-items:center;
    gap:6px;
    background:#fff;
    border:none;
    border-radius:8px;
    padding:5px 10px;
    font-family:inherit;
    font-size:12.5px;
    font-weight:800;
    color:#555;
    cursor:pointer;
    box-shadow:0 1px 4px rgba(0,0,0,0.08);
  }
  .pager-toggle::after{ content:"▾"; font-size:10px; color:#aaa; }
  .pager-compact .page-tabs{
    position:absolute;
    top:100%;
    right:0;
    margin-top:4px;
    background:#fff;
    border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,0.18);
    padding:8px;
    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
    transition:opacity .15s ease, transform .15s ease;
    width:max-content;
    max-width:70vw;
  }
  .pager-compact:hover .page-tabs,
  .pager-compact.open .page-tabs{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  .progress-track-bar{ flex:0 0 auto; height:3px; background:#eee; }
  .progress-track-bar .progress-fill{ height:100%; background:linear-gradient(90deg,#ffd166,var(--heading-orange)); }

  .video-col{
    flex:0 0 42%;
    min-width:220px;
    max-width:75%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding-right:14px;
    min-height:0;
  }
  .video-stage{
    flex:1;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:4px 0;
  }
  .video-col .video-frame{
    position:relative;
    background:#000;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 4px 18px rgba(0,0,0,0.18);
    /* actual width/height set by JS (STAR.initResponsiveVideo) to always fit without cropping */
  }
  .video-col .video-frame iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
  }
  /* ---- video meta: single compact line under the video ---- */
  .video-meta-line{
    flex:0 0 auto;
    padding:6px 4px 0;
    font-size:12px;
    color:#888;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .video-meta-line strong{ color:#333; font-size:13px; }
  .video-meta-line .sep{ margin:0 6px; color:#ccc; }

  /* ---- draggable splitter between video and text ---- */
  .col-resizer{
    flex:0 0 8px;
    cursor:col-resize;
    position:relative;
    align-self:stretch;
  }
  .col-resizer::after{
    content:"";
    position:absolute;
    top:0; bottom:0; left:50%;
    width:2px;
    margin-left:-1px;
    background:#ddd;
    border-radius:2px;
  }
  .col-resizer:hover::after,
  .col-resizer.dragging::after{ background:var(--heading-orange); }

  .text-col{
    flex:1;
    min-width:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .text-col-inner{ padding-bottom:20px; }

  /* ---- image zoom modal (screenshots / operation diagrams only) ---- */
  img.zoomable{ cursor:zoom-in; }
  .img-modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.78);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2000;
    cursor:zoom-out;
    padding:24px;
  }
  .img-modal-overlay img{
    max-width:92vw;
    max-height:92vh;
    border-radius:8px;
    box-shadow:0 8px 34px rgba(0,0,0,0.5);
  }

  @media (max-width:980px){
    .lesson-split{ flex-direction:column; padding:0 10px 8px; gap:0; }
    .col-resizer{
      flex:0 0 10px;
      width:100%;
      cursor:row-resize;
      align-self:auto;
    }
    .col-resizer::after{
      top:50%; bottom:auto; left:0; right:0; margin-left:0;
      height:2px; width:auto;
      margin-top:-1px;
    }
    .video-col{
      flex:0 0 40vh;
      max-width:none;
      max-height:none;
      padding-right:0;
    }
    .text-col{ flex:1 1 auto; }
    .text-col-inner{ zoom:0.9; }
  }



/* ============================================================
   課題指示書 (assignment worksheet) — blue theme
   ============================================================ */
.assign-wrap{ padding-top:2px; }
.assign-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
}
.assign-header .assign-code{
  color:var(--heading-orange);
  font-size:18px;
  font-weight:800;
}
.assign-header .assign-lesson-name{
  color:var(--heading-orange);
  font-weight:800;
  font-size:14px;
}
.assign-title-row{
  display:flex;
  align-items:stretch;
  gap:14px;
  margin:16px 0 22px;
}
.assign-title-row .assign-label{
  flex:0 0 auto;
  font-weight:800;
  font-size:15px;
  color:#3a6ea5;
  align-self:center;
}
.assign-title-row .assign-title-box{
  flex:1;
  border:2px solid #3a6ea5;
  border-radius:6px;
  padding:14px 18px;
  font-size:19px;
  font-weight:800;
  color:#3a6ea5;
  display:flex;
  align-items:center;
}

.assign-info-grid{
  display:flex;
  gap:26px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.assign-stage-col{ flex:1 1 320px; min-width:0; }
.assign-side-col{ flex:1 1 320px; min-width:0; }
.assign-stage-col h4{
  color:#3a6ea5;
  font-size:14.5px;
  font-weight:800;
  margin:0 0 8px;
}
.assign-stage-col img{
  width:100%;
  border-radius:8px;
  border:1px solid #eee;
}
.assign-side-block{ margin-bottom:20px; }
.assign-side-block .assign-side-heading{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.assign-side-block .assign-side-heading img{ height:34px; width:34px; }
.assign-side-block .assign-side-heading span{
  color:#3a6ea5;
  font-weight:800;
  font-size:15px;
}
.assign-bg-box{
  border:2px solid #3a6ea5;
  border-radius:6px;
  padding:20px;
  text-align:center;
  color:#3a6ea5;
  font-size:17px;
  font-weight:800;
}
.assign-sprite-box{
  border:2px solid #3a6ea5;
  border-radius:6px;
  padding:10px 14px;
}
.assign-sprite-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 0;
  border-bottom:1px dashed #cfe0f0;
}
.assign-sprite-row:last-child{ border-bottom:none; }
.assign-sprite-row img{
  width:64px;
  height:64px;
  object-fit:contain;
  border-radius:6px;
  flex:0 0 auto;
}
.assign-sprite-row span{
  color:#3a6ea5;
  font-weight:800;
  font-size:15px;
}

.assign-flow{ margin-bottom:24px; }
.assign-flow h4{
  color:#3a6ea5;
  font-size:15px;
  font-weight:800;
  margin:0 0 8px;
}
.assign-flow p{
  margin:0;
  font-size:15px;
  color:#3a6ea5;
  line-height:1.9;
  font-weight:700;
}

.assign-cards-outer{
  border:2.5px solid #3a6ea5;
  border-radius:10px;
  padding:20px;
  margin-bottom:16px;
}
.assign-cards-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}
.assign-cards-grid.cols-2{ grid-template-columns:1fr 1fr; }
.assign-card{
  padding:6px 22px;
  color:#3a6ea5;
  border-left:1px dashed #b9cfe6;
}
.assign-cards-grid.cols-2 .assign-card:first-child{ border-left:none; }
.assign-cards-grid:not(.cols-2) .assign-card{ border-left:none; padding-left:2px; padding-right:2px; }
.assign-card .assign-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.assign-card .assign-card-head strong{
  font-size:16px;
  font-weight:800;
}
.assign-card .assign-card-head img{
  width:44px;
  height:44px;
  object-fit:contain;
  border:1px solid #dbe6f2;
  border-radius:6px;
  background:#fff;
}
.assign-card ol.a-l1{
  list-style:none;
  margin:0 0 14px;
  padding:0;
  counter-reset:a1;
}
.assign-card ol.a-l1 > li{
  font-size:14.5px;
  font-weight:700;
  margin:10px 0 4px;
}
.assign-card ol.a-l1 > li::before{
  content: counter(a1) ". ";
  counter-increment:a1;
  font-weight:800;
}
.assign-card ul.a-l2{
  list-style:none;
  margin:2px 0 2px 4px;
  padding:0;
}
.assign-card ul.a-l2 > li{
  font-size:14px;
  margin:4px 0;
  padding-left:1.4em;
  text-indent:-1.4em;
}
.assign-card ul.a-l3{
  list-style:none;
  margin:2px 0 2px 10px;
  padding:0;
}
.assign-card ul.a-l3 > li{
  font-size:13.5px;
  margin:3px 0;
  padding-left:1.1em;
  text-indent:-1.1em;
  color:#4a7db8;
}
.assign-card b, .assign-card strong{ color:#1f4d80; }
.assign-card .a-note{
  font-size:13px;
  font-weight:800;
  margin-top:12px;
}
.assign-card .a-sample-blocks{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:10px;
}
.assign-card .a-sample-blocks img{
  height:34px;
  width:auto;
  align-self:flex-start;
}

/* 数値変更の指示(赤枠→矢印→新しい値) */
.assign-change{
  display:flex;
  align-items:center;
  gap:10px;
  margin:6px 0 10px;
  flex-wrap:wrap;
}
.assign-change-before{
  border:2px dashed #d9534f;
  border-radius:6px;
  padding:6px 12px;
  font-size:14px;
  line-height:1.7;
}
.assign-change-arrow{
  color:#d9534f;
  font-size:20px;
  font-weight:800;
}
.assign-change-after{
  font-size:14px;
  line-height:1.7;
}
.chg{ color:#d9534f; font-weight:800; }

.assign-footnote{
  font-size:14px;
  font-weight:800;
  color:#3a6ea5;
  margin:14px 0 6px;
}
.assign-cheer{
  font-size:15px;
  font-weight:800;
  color:#3a6ea5;
}

@media (max-width:700px){
  .assign-cards-grid.cols-2{ grid-template-columns:1fr; }
  .assign-cards-grid.cols-2 .assign-card{ border-left:none; border-top:1px dashed #b9cfe6; padding-top:14px; }
  .assign-cards-grid.cols-2 .assign-card:first-child{ border-top:none; }
}

/* ============================================================
   S02以降でも使う追加コンポーネント
   ============================================================ */
.script-goal-box{
  border:2px solid #333;
  border-radius:14px;
  padding:16px 26px;
  display:inline-block;
  font-size:22px;
  font-weight:800;
  color:#222;
  margin:10px 0 18px;
  background:#fff;
}
.script-goal-label{
  font-size:14px;
  color:#666;
  margin-bottom:6px;
}
.script-then-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin:14px 0;
}
.script-then-row .then-text{
  font-size:14.5px;
  font-weight:700;
  color:#333;
}
.exp-callout{
  position:relative;
  display:inline-block;
  background:#fff;
  border:1.5px solid var(--heading-orange);
  border-radius:14px;
  padding:8px 18px;
  font-size:13.5px;
  font-weight:700;
  color:#333;
  margin-top:10px;
}
.exp-callout::before{
  content:"";
  position:absolute;
  top:-9px;
  left:36px;
  border-width:0 8px 9px 8px;
  border-style:solid;
  border-color:transparent transparent var(--heading-orange) transparent;
}
.experiment-banner{ margin:20px 0 10px; }
.experiment-banner img{ height:48px; }
.experiment-list{ margin:10px 0 18px; padding-left:0; list-style:none; }
.experiment-list li{
  font-size:14.5px;
  margin:12px 0;
  padding-left:1.6em;
  text-indent:-1.6em;
}

/* practice item (自分でプログラムをつくってみよう) */
.practice-item{
  display:flex;
  gap:22px;
  margin:26px 0;
  flex-wrap:wrap;
  align-items:flex-start;
}
.practice-item .p-num-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 100%;
  margin-bottom:4px;
}
.practice-item .p-num-row .p-num{ font-size:17px; font-weight:800; }
.practice-item .p-num-row img.p-icon{ width:30px; height:30px; }
.practice-item .p-num-row .p-name{ font-size:15px; font-weight:800; }
.practice-item .p-char-col{ flex:0 0 150px; }
.practice-item .p-char-col img{ width:100%; max-width:140px; }
.practice-item .p-desc-col{ flex:1 1 260px; min-width:0; }
.practice-item .p-caption{ font-size:14.5px; font-weight:700; margin-bottom:10px; }
.practice-item .p-trigger-box{
  background:#fbe6d3;
  border-radius:10px;
  padding:10px 16px;
  font-weight:700;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.practice-item .p-trigger-box img{ width:24px; height:24px; flex:0 0 auto; }
.practice-item .p-code-tab img{ height:26px; margin-bottom:8px; }
.practice-item .p-combo-box{
  border:1px solid #ddd;
  border-radius:10px;
  padding:14px;
}
.practice-item .p-combo-box img{ max-width:100%; }
.practice-item .p-combo-caption{ font-size:13.5px; color:#666; margin-top:8px; text-align:center; }