/* スキルの作り方：ページの骨組み。色と書体は教材の /ai-basics/styles.css を使う。 */
.skills-hero{padding:16px 0 12px;}
.skills-hero .crumb{margin:0 0 2px;}
.skills-hero .hero-topline{margin:0 0 2px;}
.skills-hero .hero-topline .crumb{margin:0;}
.skills-hero h1{margin:0 0 2px;font-size:clamp(28px,4vw,40px);line-height:1.35;}
.skills-hero-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 20px;margin:0 0 10px;}
.skills-hero .lead{margin:0;max-width:none;font-size:16px;line-height:1.7;}
.skills-about summary{color:var(--accent);font-size:14px;font-weight:500;line-height:1.7;cursor:pointer;}
.skills-about[open]{flex-basis:100%;}
.skills-about-body{margin:6px 0 2px;padding:12px 16px;background:var(--paper);border:1px solid var(--line);border-radius:8px;font-size:15px;line-height:1.9;}
.skills-about-body p{margin:0 0 8px;}
.skills-about-body p:last-child{margin-bottom:0;}
.skills-hero .notice{margin:0 0 6px;padding:5px 14px;font-size:13.5px;line-height:1.7;}
.skills-page-caution{margin:0;padding:5px 14px;font-size:13.5px;line-height:1.7;border-radius:0;}
.skills-page-caution strong{margin-right:6px;}
.skills-hero .preview-access-note{margin:6px 0 0;padding:6px 14px;}

.skills-layout{grid-template-columns:232px minmax(0,1fr);gap:40px;padding-bottom:56px;}

/* 左の目次 */
.skills-toc h2{margin:0 0 10px;}
.skills-toc-toggle{display:none;}
.skills-theme{border-bottom:1px solid var(--line);}
.skills-theme summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 4px;font-size:15px;font-weight:700;line-height:1.6;color:var(--ink);cursor:pointer;list-style:none;}
.skills-theme summary::-webkit-details-marker{display:none;}
.skills-theme summary::after{content:"";flex:0 0 auto;width:8px;height:8px;margin-right:4px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s;}
.skills-theme[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px);}
.skills-theme.is-active summary{color:var(--accent);}
.skills-theme ul{list-style:none;margin:0;padding:0 0 12px;}
.skills-theme li{margin:0;}
.skills-theme a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;margin:0 0 2px;border-left:2px solid transparent;border-radius:0 6px 6px 0;color:var(--muted);text-decoration:none;font-size:14px;line-height:1.6;}
.skills-theme a:hover{color:var(--ink);background:#f2f4f8;}
.skills-theme a[aria-current="true"]{border-left-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700;}
.skills-toc-tag{flex:0 0 auto;padding:0 6px;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--muted);font-size:12px;font-weight:500;}

/* 右の本文 */
.skills-main{min-width:0;}
.skills-lesson{margin:0 0 32px;padding:24px 32px 32px;background:var(--paper);border:1px solid var(--line);border-radius:10px;}
.skills-lesson[hidden]{display:none !important;}
.skills-main.is-single .skills-lesson{margin-bottom:0;}
.skills-lesson .skills-theme-label{margin:0 0 2px;}
.skills-lesson > h2{margin-bottom:6px;line-height:1.4;}
.skills-lesson .skills-theme-hint{margin:12px 0 0;color:var(--muted);font-size:14px;line-height:1.8;}
.skills-lesson .skills-lesson-lead{margin:0 0 14px;font-size:16px;line-height:1.8;}
.skills-lesson .skills-locked-meta{margin:0 0 16px;color:var(--muted);font-size:14px;}

/* 同じテーマの動画を選ぶ */
.skills-lesson .skills-chooser{margin:12px 0 0;}
.skills-chooser summary{color:var(--accent);font-size:14.5px;font-weight:700;line-height:1.7;cursor:pointer;}
.skills-chooser .skills-theme-hint{margin:6px 0 10px;}
.skills-lesson .skills-chooser ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;}
.skills-lesson .skills-chooser li{margin:0;}
.skills-chooser a{display:block;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--muted);text-decoration:none;font-size:13.5px;line-height:1.6;}
.skills-chooser a:hover{border-color:#b9c8ef;color:var(--ink);}
.skills-chooser a[aria-current="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700;}

.skills-pager{margin-top:8px;}

/* スキルの作り方：動画の下の手順・コピー欄・確認。 */
.skills-lesson .skills-do{margin:28px 0 0;}
.skills-lesson h3{margin-top:32px;}
.skills-lesson .skills-do > h3{margin-top:0;}
.skills-steps{list-style:none;margin:0 0 8px;padding:0;}
.skills-steps > li{position:relative;margin:0;padding:0 0 18px 30px;}
.skills-steps > li::before{content:"";position:absolute;left:4px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);}
.skills-step-title{margin:0 0 2px !important;font-weight:700;font-size:16.5px;line-height:1.7;}
.skills-step-text{margin:0 !important;color:var(--ink);font-size:15.5px;line-height:1.9;}

.skills-lesson code{font-family:var(--mono);font-size:.88em;background:#eef0f4;border-radius:4px;padding:1px 6px;overflow-wrap:anywhere;}
.skills-lesson pre code{font-size:inherit;background:none;padding:0;border-radius:0;overflow-wrap:normal;}

/* コピー欄：操作ボタンは本文の外に置き、長い本文は枠の中でスクロールする。 */
.skills-lesson .skills-copy-group{margin:8px 0 0;}
.skills-copy{margin:0 0 20px;padding:14px 16px 16px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;}
.skills-copy-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;}
.skills-copy-label{margin:0 !important;font-weight:700;font-size:15px;line-height:1.6;}
.skills-copy-note{margin:0 0 10px !important;color:var(--muted);font-size:14px;line-height:1.8;}
.skills-copy-button{flex:0 0 auto;min-height:36px;padding:6px 16px;border:1px solid var(--accent);border-radius:6px;background:var(--paper);color:var(--accent);font:inherit;font-size:14px;font-weight:700;line-height:1.4;cursor:pointer;}
.skills-copy-button:hover{background:var(--accent-soft);}
.skills-copy-button:focus-visible,.skills-copy-body:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.skills-copy-button.is-done{background:var(--accent);color:#fff;}
.skills-copy-button.is-failed{border-color:var(--warn-line);color:var(--ink);background:var(--warn-bg);}
.skills-copy-body{max-height:320px;margin:0;padding:12px 14px;overflow:auto;background:#f4f6f9;border-radius:6px;color:var(--ink);font-family:var(--mono);font-size:13.5px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;}
.skills-lesson .skills-copy-moved{color:var(--muted);font-size:14px;}

/* 確認すること */
.skills-checks{margin:8px 0 24px;padding:16px 20px;background:var(--accent-soft);border:1px solid #d6e0f7;border-radius:8px;}
.skills-lesson .skills-checks h3{margin:0 0 8px;padding:0;border:0;color:var(--accent);font-size:16.5px;}
.skills-lesson .skills-checks ul{list-style:none;margin:0;padding:0;}
.skills-checks li{margin:0 0 6px;}
.skills-checks li:last-child{margin-bottom:0;}
.skills-checks label{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.8;cursor:pointer;}
.skills-checks input{flex:0 0 auto;width:18px;height:18px;margin:5px 0 0;accent-color:var(--accent);}

/* 資料への案内 */
.skills-lesson .skills-page-links{list-style:none;margin:0 0 20px;padding:0;}
.skills-page-link{display:block;padding:12px 16px;border:1px solid var(--accent);border-radius:8px;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:15px;line-height:1.7;text-decoration:none;}
.skills-page-link:hover{background:#e3eafa;}
.skills-page-title{display:block;color:var(--ink);font-weight:500;font-size:14px;}

/* 原本の解説 */
.skills-guide{margin-top:8px;padding-top:4px;border-top:1px solid var(--line);}
.skills-guide > h3:first-child{margin-top:28px;}
.skills-guide .table-wrap{overflow-x:auto;}
.skills-guide .tip,.skills-guide .caution{margin-top:4px;}

/* 関連する動画 */
.skills-related{margin-top:32px;padding-top:4px;border-top:1px solid var(--line);}
.skills-lesson .skills-related h3{margin:24px 0 12px;padding:0;border:0;color:var(--accent);}
.skills-lesson .skills-related ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;list-style:none;margin:0;padding:0;}
.skills-related li{margin:0;}
.skills-related-card{display:block;height:100%;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);text-decoration:none;}
.skills-related-card:hover{border-color:#b9c8ef;}
.skills-related-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--bg);}
.skills-related-blank{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;padding:8px;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:700;text-align:center;}
.skills-related-title{display:block;padding:10px 12px 2px;font-size:14.5px;font-weight:700;line-height:1.6;color:var(--accent);}
.skills-related-meta{display:block;padding:0 12px 10px;color:var(--muted);font-size:13px;line-height:1.6;}

/* スキルの作り方：動画枠。16:9を保ち、押されるまでは静止画だけを見せる。 */
.skills-video{margin:0 0 8px;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--paper);}
.skills-video-stage{position:relative;aspect-ratio:16/9;background:#10162a;overflow:hidden;}
.skills-poster{display:block;width:100%;height:100%;object-fit:cover;}
.skills-poster-card{display:flex;align-items:center;justify-content:center;height:100%;padding:24px;background:linear-gradient(135deg,#eef2fb,#dfe7fa);color:var(--accent);font-family:var(--serif);font-size:clamp(20px,3vw,28px);line-height:1.5;text-align:center;}
.skills-video-load{position:absolute;left:50%;top:50%;z-index:2;min-height:48px;padding:12px 28px;transform:translate(-50%,-50%);border:0;border-radius:999px;background:var(--accent);color:#fff;font:inherit;font-size:16px;font-weight:700;line-height:1.4;cursor:pointer;box-shadow:0 6px 20px rgba(16,22,42,.28);}
.skills-video-load:hover{background:#223e8e;}
.skills-video-load:focus-visible{outline:3px solid #fff;outline-offset:2px;}
.skills-video-stage video{display:block;width:100%;height:100%;background:#10162a;}
.skills-video-note{margin:0 !important;padding:8px 16px;background:var(--paper);border-top:1px solid var(--line);color:var(--muted);font-size:13.5px;line-height:1.8;}
.skills-video-status:empty{display:none;}
.skills-video-status{margin:0 !important;padding:10px 16px;background:var(--warn-bg);border-top:1px solid #f1d8ad;font-size:14px;line-height:1.8;}
.skills-video-caption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;padding:10px 16px;background:var(--accent-soft);font-size:14px;line-height:1.7;}
.skills-video-name{flex:1 1 100%;color:var(--accent);font-weight:700;}
.skills-video-meta{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--muted);font-size:13px;}
.skills-video-open{font-size:14px;font-weight:700;}

/* 図解スライド：1280×720の版面を枠に合わせて縮める（本体アプリと同じ考え方）。 */
.skills-slide-stage{position:absolute;inset:0;overflow:hidden;background:#fff;}
.skills-slide-frame{position:absolute;top:50%;left:50%;width:1280px;height:720px;border:0;background:#fff;transform:translate(-50%,-50%) scale(var(--skills-scale,0));transform-origin:center center;}
.skills-poster-slide{pointer-events:none;}
.skills-slide-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 16px;background:var(--paper);border-top:1px solid var(--line);}
.skills-slide-button{min-height:40px;padding:6px 14px;border:1px solid var(--accent);border-radius:6px;background:var(--paper);color:var(--accent);font:inherit;font-size:14px;font-weight:700;cursor:pointer;}
.skills-slide-button:hover:not(:disabled){background:var(--accent-soft);}
.skills-slide-button:disabled{border-color:var(--line);color:#8a92a3;cursor:default;}
.skills-slide-play{background:var(--accent);color:#fff;}
.skills-slide-play:hover:not(:disabled){background:#223e8e;}
.skills-slide-count{color:var(--muted);font-size:14px;}
.skills-slide-enlarge{margin-left:auto;}
.skills-slide-audio{display:block;width:100%;height:40px;margin:0;}
.skills-slide-narration[hidden]{display:none;}
.skills-slide-audio-wrap{padding:0 16px 10px;background:var(--paper);}
.skills-slide-audio-note{margin:0 !important;padding:0 16px 10px;background:var(--paper);color:var(--muted);font-size:13.5px;line-height:1.8;}
.skills-slide-narration{margin:0 !important;padding:12px 16px;background:#f7f8fb;border-top:1px solid var(--line);font-size:15px;line-height:1.9;}
.skills-video-stage:fullscreen{background:#000;}

/* スキルの作り方：狭い画面。目次は上に置いて開閉する。 */
@media (max-width:960px){
  .skills-layout{grid-template-columns:minmax(0,1fr);gap:16px;}
  .skills-toc{position:sticky;top:var(--header-h);z-index:10;padding:0;margin:0;background:var(--paper);border:1px solid var(--line);border-radius:10px;max-height:calc(100vh - var(--header-h) - 16px);overflow:auto;}
  .skills-toc.is-enhanced .skills-toc-toggle{display:flex;}
  .skills-toc-toggle{flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:52px;padding:10px 40px 10px 16px;position:relative;border:0;background:none;color:var(--muted);font:inherit;font-size:13px;line-height:1.6;text-align:left;cursor:pointer;}
  .skills-toc-toggle::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;margin-top:-6px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .15s;}
  .skills-toc-toggle[aria-expanded="true"]::after{margin-top:-2px;transform:rotate(-135deg);}
  .skills-toc-current{color:var(--accent);font-size:15px;font-weight:700;}
  .skills-toc-current:empty{display:none;}
  .skills-toc-panel{padding:0 16px 8px;}
  .skills-toc-panel h2{display:none;}
  .skills-lesson{padding:20px 20px 24px;}
  .skills-theme a{min-height:44px;}
}
@media (max-width:600px){
  .skills-lesson{padding:16px 16px 20px;}
  .skills-copy{padding:12px;}
  .skills-copy-head{flex-wrap:wrap;}
  .skills-copy-body{font-size:13px;padding:10px;max-height:280px;}
  .skills-video-caption,.skills-slide-bar{padding-left:12px;padding-right:12px;}
  .skills-slide-enlarge{margin-left:0;}
  .skills-lesson .skills-related ul{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
  .skills-pager{grid-template-columns:1fr;}
}
/* 最終更新: 2026-10-31 19:03 */