/* DMM 生成AI CAMP の作りを手本にした見た目（色は VCB の3色に置き換え）。
   斜めに切ったグラデーションの大きな帯／斜体の太い見出しを黒い平行四辺形に乗せる／白い丸のバッジ／
   講座は横長のバナーを格子に並べる／見出しは中央寄せで下に短い線／薄い青灰色の地に白い面（角8px・薄い影）／
   大きな斜体の番号「01／」／チャプターは矢羽根（PHASE）で並べる */

:root{
  --bg:#F2F3F8;
  --edge:#E1E2EC;
  --ink2:#3A3850;
  --navy:#1D1B3A;
  --grad:linear-gradient(120deg,#2A2150 0%,#4E3A8C 45%,#6B4FA0 70%,#8A6CD0 100%);
  --grad-band:linear-gradient(90deg,#4E3A8C,#8A6CD0);
  --panel-shadow:0 8px 24px rgba(15,23,42,.08);
  --f-head:"Noto Sans JP","Hiragino Sans",sans-serif;
}
body{background:var(--bg);font-family:var(--f-head)}
.wrap{max-width:1280px}
h1,h2,h3{font-family:var(--f-head);letter-spacing:.02em}

/* ヘッダー：白地・右にオレンジの角丸ボタン */
.top{background:#FFFFFF;border-radius:0 0 8px 8px;padding:12px 20px;border:0;box-shadow:var(--panel-shadow);margin-bottom:24px}
.logo .mark{border-radius:4px;background:var(--navy)}
.logo .name{font-family:var(--f-head);font-weight:900;letter-spacing:.01em}
.logo .tag{background:var(--grad-band);color:#FFFFFF;border:0;border-radius:3px;font-weight:700}

/* 左のメニュー：白い面。選んでいる項目はパープルの帯 */
.tabs.side-nav{background:#FFFFFF;border:0;border-radius:8px;box-shadow:var(--panel-shadow);padding:8px}
.side-nav a{border-radius:6px;color:var(--ink);font-weight:700}
.side-nav a:hover{background:#F4F2FA}
.side-nav a[aria-selected="true"]{background:var(--grad-band);color:#FFFFFF}
.sidecard{background:#FFFFFF;border:0;border-radius:8px;box-shadow:var(--panel-shadow);padding:16px}
.shell{grid-template-columns:210px minmax(0,1fr);gap:24px}

/* 面と見出し */
.card,.panel{background:#FFFFFF;border:0;border-radius:8px;box-shadow:var(--panel-shadow);padding:24px}
.sec-title{text-align:center;margin:44px 0 22px}
.sec-title h2{font-size:1.6rem;font-weight:900}
.sec-title h2::after{content:"";display:block;width:44px;height:3px;background:var(--navy);margin:14px auto 0}
.sec-title p{color:var(--sub);font-size:.9rem;margin-top:10px}
.band-head{background:var(--grad-band);color:#FFFFFF;font-weight:700;text-align:center;padding:8px 12px;border-radius:2px;letter-spacing:.06em}
.kpi{border:0;border-radius:8px;box-shadow:var(--panel-shadow);border-top:0}
.kpi .v2{font-weight:900}
.kpi.warn .v2,.kpi.alert .v2{color:var(--orange-ink)}
th{background:#F4F2FA}

/* ボタン：オレンジの四角、白地に枠 */
.btn{border-radius:4px;box-shadow:none;font-weight:900;letter-spacing:.04em}
.btn.big{min-width:260px;padding:15px 28px;font-size:1rem}
.btn.line{background:#FFFFFF;color:var(--orange-ink);border:2px solid var(--orange)}
.btn.ghost{border-radius:4px}

/* 大きな帯（ホームの上） */
.mv{position:relative;overflow:hidden;border-radius:8px;background:var(--grad);color:#FFFFFF;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:420px;isolation:isolate}
.mv::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 52%,rgba(255,255,255,.07) 52% 58%,transparent 58%);z-index:-1}
.mv .copy{padding:40px 36px 34px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.mv .lead{font-size:1.05rem;font-weight:700;opacity:.95}
.skew{display:inline-block;background:var(--navy);padding:4px 18px 6px;transform:skewX(-10deg);font-style:italic;font-weight:900;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.25;width:fit-content;max-width:100%}
.skew>span{display:inline-block;transform:skewX(10deg)}
.skew.accent{color:#FFB37A}
.mv .desc{font-size:.9rem;opacity:.9;font-weight:500}
.badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.badge-o{width:112px;height:112px;border-radius:50%;background:#FFFFFF;color:var(--ink);display:grid;place-content:center;text-align:center;box-shadow:0 0 0 5px rgba(255,255,255,.35)}
.badge-o small{font-size:.7rem;font-weight:700;color:var(--ink2)}
.badge-o b{font-style:italic;font-weight:900;font-size:1.55rem;color:var(--purple-deep);line-height:1.15}
.badge-o b.o{color:var(--orange-ink)}
.mv .collage{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:26px 26px 26px 0;align-content:center;transform:perspective(900px) rotateY(-8deg);transform-origin:left center}
.mv .collage .art{box-shadow:0 10px 24px rgba(0,0,0,.28)}
.cta-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;background:var(--navy);border-radius:0 0 8px 8px;padding:22px;margin-top:-6px}

/* バナー（講座のサムネイル） */
.art{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:4px;overflow:hidden;color:#FFFFFF;display:flex;flex-direction:column;justify-content:center;padding:10px 12px;background:linear-gradient(125deg,#2A2150,#6B4FA0 75%,#8A6CD0);isolation:isolate}
.art.v2{background:linear-gradient(125deg,#1D1B3A,#3E2F74 60%,#6B4FA0)}
.art.v3{background:linear-gradient(125deg,#3A2A70,#8A6CD0)}
.art::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 58%,rgba(255,255,255,.1) 58% 64%,transparent 64%);z-index:-1}
.art::after{content:"";position:absolute;right:-8%;bottom:-38%;width:42%;aspect-ratio:1;border-radius:50%;background:var(--orange);opacity:.35;z-index:-1}
.art .k{align-self:flex-start;background:#FFFFFF;color:var(--purple-deep);font-size:.64rem;font-weight:900;padding:1px 8px;border-radius:2px}
.art .t{margin-top:6px;font-weight:900;font-style:italic;font-size:1.05rem;line-height:1.3;text-shadow:0 2px 8px rgba(0,0,0,.25);text-wrap:balance}
.art .big{position:absolute;right:10px;bottom:-4px;font-weight:900;font-style:italic;font-size:4.6em;line-height:1;opacity:.18;z-index:-1}
.art .bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.3)}
.art .bar i{display:block;height:100%;background:var(--orange)}
.art .badge{position:absolute;right:8px;top:8px;font-size:.64rem;font-weight:900;border-radius:2px;padding:1px 7px;background:#FFFFFF;color:var(--purple-deep)}
.art .badge.now{background:var(--orange);color:#FFFFFF}
.art .badge.lock{background:rgba(0,0,0,.55);color:#FFFFFF}
.art.img{background-size:cover;background-position:center}
.art.img::after,.art.img::before{display:none}

/* 続きを見る：上に帯・大きな数字（DMM の事例カードの形） */
.slides{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,32%);gap:16px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory}
.slide{scroll-snap-align:start;background:#FFFFFF;border-radius:8px;overflow:hidden;box-shadow:var(--panel-shadow);color:var(--ink);text-decoration:none;display:flex;flex-direction:column}
.slide .hd{background:var(--grad-band);color:#FFFFFF;font-weight:700;text-align:center;padding:8px 10px;font-size:.9rem}
.slide .num{text-align:center;padding:12px 10px 10px;font-weight:900}
.slide .num b{font-size:2.2rem;font-style:italic;color:var(--orange-ink)}
.slide .art{border-radius:0}

/* 講座のバナーを格子に */
.grid-banners{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.grid-banners a{color:var(--ink);text-decoration:none;display:block}
.grid-banners .cap{margin-top:8px;font-weight:700;font-size:.86rem;line-height:1.45}
.grid-banners .sub2{font-size:.76rem;color:var(--sub)}
.grid-banners a:hover .art{filter:brightness(1.08)}

/* 今日のやること・今週の学習 */
.duo{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
.duo h3{margin-bottom:10px}
.todo{list-style:none;margin:0;padding:0}
.todo li{position:relative;padding:10px 0 10px 28px;border-bottom:1px dashed var(--edge)}
.todo li::before{content:"";position:absolute;left:0;top:14px;width:16px;height:16px;border-radius:3px;border:2px solid var(--purple)}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dd{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#EEEDF4;color:var(--sub);font-weight:700;font-size:.82rem}
.dd.on{background:var(--grad-band);color:#FFFFFF}
.dd.today{box-shadow:0 0 0 3px var(--orange)}
.help{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-top:16px}

/* 講座一覧：01／の番号と矢羽根 */
.lesson{background:#FFFFFF;border-radius:8px;box-shadow:var(--panel-shadow);padding:28px 30px;margin-bottom:20px}
.lesson-head{display:grid;grid-template-columns:auto minmax(0,1fr) 260px;gap:24px;align-items:center}
.no-big{font-weight:900;font-style:italic;font-size:4.2rem;line-height:1;background:var(--grad-band);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative;padding-right:30px}
.no-big::after{content:"";position:absolute;right:6px;top:10%;width:2px;height:80%;background:var(--purple);transform:skewX(-25deg)}
.lesson h2{font-size:1.45rem;font-weight:900}
.lesson .meta{font-size:.82rem;color:var(--sub);display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:6px}
.lesson .desc{font-size:.9rem;margin-top:8px;color:var(--ink2)}
.state{display:inline-block;font-size:.72rem;font-weight:900;border-radius:2px;padding:1px 8px;margin-right:8px}
.state.done{background:var(--purple-deep);color:#FFFFFF}
.state.doing{background:var(--orange);color:#FFFFFF}
.state.todo{background:#EEEDF4;color:var(--sub)}
.phases{display:flex;margin-top:22px;overflow-x:auto}
.phase{flex:1 1 0;min-width:120px;background:var(--grad-band);color:#FFFFFF;font-size:.78rem;font-weight:700;padding:7px 18px 7px 22px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%);margin-right:-6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phase:first-child{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%);padding-left:14px}
.phase.done{background:linear-gradient(90deg,#3E2F74,#6B4FA0)}
.phase.doing{background:linear-gradient(90deg,#E65000,#FF8A1F)}
.phase.todo{background:#CFCBDD;color:var(--ink2)}
.eps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.ep{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:10px;align-items:start;background:#FFFFFF;border:1px solid var(--edge);border-radius:6px;padding:12px;color:var(--ink);text-decoration:none;border-left:4px solid #CFCBDD}
.ep.done{border-left-color:var(--purple-deep)}
.ep.doing{border-left-color:var(--orange)}
.ep:hover{background:#FAF9FD}
.ep .nm{font-weight:900;font-size:.88rem;display:block}
.ep .d{font-size:.74rem;color:var(--sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}
.ep .st{font-size:.72rem;font-weight:900;display:block;margin-top:4px}
.ep .st.done{color:var(--purple-deep)} .ep .st.doing{color:var(--orange-ink)}
.ep .art{padding:4px 6px}
.ep .art .t,.ep .art .k{display:none}
.ep.current{background:#FFF6EE}
.chips-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:22px}
.chips-nav a{background:#FFFFFF;border-radius:4px;padding:8px 18px;font-weight:700;font-size:.86rem;color:var(--ink);text-decoration:none;box-shadow:var(--panel-shadow)}

/* 動画の画面 */
.theater .player{border-radius:8px}
.watch-head{margin-top:16px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:flex-start}
.watch-head h1{font-size:1.5rem;font-weight:900}
.watch-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;margin-top:18px;align-items:start}
.pause{background:#FFF6EE;border:0;border-left:4px solid var(--orange);border-radius:6px;padding:14px 18px;margin-bottom:14px}
.pause dt{color:var(--orange-ink)}
.upnext .eps{grid-template-columns:minmax(0,1fr)}
.eyebrow{color:var(--purple-deep);font-weight:900}

/* 宿題 */
.topic{border-radius:6px;background:#FFFFFF}
.topic[aria-pressed="true"]{border-color:var(--orange);background:#FFF6EE}

@container page (max-width:1000px){
  .mv{grid-template-columns:minmax(0,1fr)}
  .mv .collage{transform:none;padding:0 22px 26px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-banners{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lesson-head{grid-template-columns:auto minmax(0,1fr)}
  .lesson-head>.art-wrap{grid-column:1/-1}
  .eps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container page (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .sidecard{display:none}
  .tabs.side-nav{flex-direction:row;overflow-x:auto;border-radius:8px}
  .duo,.watch-grid{grid-template-columns:minmax(0,1fr)}
}
@container page (max-width:560px){
  .mv .copy{padding:26px 20px}
  .badge-o{width:92px;height:92px}
  .badge-o b{font-size:1.25rem}
  .mv .collage{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-banners{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slides{grid-auto-columns:82%}
  .eps{grid-template-columns:minmax(0,1fr)}
  .lesson{padding:20px 18px}
  .no-big{font-size:3rem}
  .btn.big{min-width:0;width:100%}
  .cta-bar{padding:16px}
}
/* 見出しが1文字だけ次の行に落ちないよう、2行目の帯は少し小さく */
.skew.accent{font-size:clamp(1.4rem,2.6vw,2.1rem)}
.mv .collage .art .t{font-size:.9rem}
@container page (max-width:560px){ .mv .collage .art .t{font-size:.72rem} .mv .collage .art .k{display:none} }