@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=BIZ+UDPGothic:wght@400;700&display=swap');

/* ══════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════ */
:root {
  /* Canvaブランドカラー */
  --cv-purple:  #FF6FA5;
  --cv-teal:    #2BA89A;
  --cv-grad:    linear-gradient(135deg, #FF8FB8 0%, #3DBFAE 100%);
  --cv-grad-r:  linear-gradient(135deg, #3DBFAE 0%, #FF8FB8 100%);

  /* UI colors */
  --gold:       #F5C518;
  --gold-lit:   #FFD23F;
  --green:      #10B981;
  --amber:      #F59E0B;
  --red:        #EF4444;

  /* Neutrals */
  --text:       #1A1D2E;
  --text2:      #5F6880;
  --text3:      #9DA3B4;
  --border:     rgba(26,29,46,.09);
  --border2:    rgba(26,29,46,.06);
  --bg:         #F4F5FB;
  --bg2:        #ECEEF7;
  --card:       #FFFFFF;

  /* Layout */
  --nav-h:      62px;
  --inst-h:     64px;
  --r:          16px;
  --r-sm:       10px;

  /* Typography（UDフォントで可読性優先。極太はNoto Sans JPで補強）*/
  --font:       'BIZ UDPGothic', 'Noto Sans JP', sans-serif;
  --font-head:  'BIZ UDPGothic', 'Noto Sans JP', sans-serif;
}

/* ══════════════════════════════════════
   RESET & BASE
══════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body {
  height: 100%; overflow: hidden;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ruby { ruby-align: center; }
rt {
  font-size: .58em;
  letter-spacing: .03em;
  color: inherit;   /* 親の文字色をそのまま継承 */
  opacity: 0.62;    /* 62%の透明度で自然に薄くなる */
}

strong { color: var(--cv-purple); font-weight: 700; }

kbd {
  background: #F1F2F7; border: 1px solid #D0D3DF;
  border-radius: 6px; padding: 2px 8px;
  font-size: .82em; font-weight: 700; font-family: monospace;
  box-shadow: 0 1px 0 rgba(0,0,0,.12);
}

/* ══════════════════════════════════════
   TOP NAV
══════════════════════════════════════ */
.top-nav {
  height: var(--nav-h);
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
  box-shadow: 0 1px 12px rgba(0,0,0,.06);
  flex-shrink: 0; z-index: 200;
  transition: height .3s ease, padding .3s ease, box-shadow .3s;
  overflow: hidden;
}
.top-nav.nav-hidden { height: 0; padding: 0; box-shadow: none; }

.nav-left  { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow: hidden; }
.nav-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.course-tag {
  background: var(--cv-grad);
  color: #fff; font-size: 12px; font-weight: 700;
  padding: 5px 11px; border-radius: 20px;
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap; flex-shrink: 0;
  font-family: var(--font-head);
}
.lesson-badge {
  background: var(--cv-grad-r);
  color: #fff; font-size: 13px; font-weight: 700;
  padding: 4px 12px; border-radius: 20px;
  white-space: nowrap; flex-shrink: 0;
  font-family: var(--font-head);
}
.lesson-title {
  font-size: 15px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  font-family: var(--font-head); color: var(--text);
}

/* Stars (nav) */
.stars-row { display: flex; gap: 3px; }
.star-icon  { font-size: 18px; color: var(--border2); filter: none; transition: all .4s; }
.star-icon.lit {
  color: var(--gold-lit);
  filter: drop-shadow(0 0 5px rgba(255,210,63,.6));
}

/* Progress (nav) */
.progress-info { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.progress-text { font-size: 12px; font-weight: 500; color: var(--text2); white-space: nowrap; }
.nav-bar { width: 88px; height: 6px; background: var(--bg2); border-radius: 10px; overflow: hidden; }
.nav-bar-fill { height: 100%; background: var(--cv-grad); border-radius: 10px; transition: width .5s; width: 0%; }

/* ══════════════════════════════════════
   LAYOUT
══════════════════════════════════════ */
.app {
  flex: 1; min-height: 0;
  display: flex; overflow: hidden;
}

.guide-panel {
  flex: 1 1 auto; width: 100%; min-width: 0; max-width: none;
  background: var(--bg); overflow-y: auto;
  display: flex; flex-direction: column;
}

/* ── Sticky progress sub-header ── */
.guide-sticky {
  position: sticky; top: 0; background: #fff; z-index: 50;
  padding: 11px 20px;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.progress-label-row {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px;
}
.progress-label-row span { font-size: 13px; font-weight: 500; color: var(--text2); }
.prog-bar  { height: 8px; background: var(--bg2); border-radius: 10px; overflow: hidden; }
.prog-fill { height: 100%; background: var(--cv-grad); border-radius: 10px; transition: width .5s; width: 0%; }

/* ── Guide content ── */
.guide-content {
  padding: 20px 0 calc(var(--inst-h) + 40px);
}

/* ══════════════════════════════════════
   SECTION CARD
══════════════════════════════════════ */
.sec-wrap {
  margin: 20px 16px 0;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: 0 2px 16px rgba(26,29,46,.08), 0 1px 4px rgba(26,29,46,.04);
  border: 1px solid var(--border2);
  overflow: hidden;
}

/* Section header — unified Canva gradient */
.sec-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: var(--cv-grad);
  color: #fff;
}
.sec-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.sec-text .sec-label {
  font-size: 10px; font-weight: 700; opacity: .75;
  letter-spacing: .8px; text-transform: uppercase;
}
.sec-text .sec-name {
  font-size: 17px; font-weight: 900; line-height: 1.25;
  font-family: var(--font-head);
}
.sec-badge {
  margin-left: auto; font-size: 22px;
  color: rgba(255,255,255,.22); transition: all .4s;
}
.sec-badge.done {
  color: rgba(255,255,255,.95);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.5));
}

/* bonus section header */
.sec-header.bonus {
  background: linear-gradient(135deg, #F5C518 0%, #FF6B35 60%, #FF4D6D 100%);
}
.sec-header.bonus .sec-badge { color: rgba(255,255,255,.3); }
.sec-header.bonus .sec-badge.done { color: rgba(255,255,255,.95); }

/* ══════════════════════════════════════
   STEP CARD
══════════════════════════════════════ */
.step-card {
  background: transparent;
  padding: 22px 22px 16px;
  border-top: 1px solid var(--border2);
  position: relative; overflow: hidden;
  transition: background .15s;
}
.step-card:hover { background: rgba(123,47,247,.025); }
.step-card.new-skill { border-top-color: rgba(123,47,247,.18); }

/* NEW SKILL ribbon */
.skill-ribbon {
  position: absolute; top: 0; right: 0;
  background: var(--cv-grad);
  color: #fff; font-size: 11px; font-weight: 700;
  padding: 5px 14px 5px 10px; border-radius: 0 var(--r) 0 10px;
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-head);
  animation: shimmer 2.8s ease-in-out infinite;
}
@keyframes shimmer { 0%,100%{opacity:1} 50%{opacity:.65} }

/* Challenge ribbon */
.challenge-ribbon {
  position: absolute; top: 0; left: 0; right: 0;
  background: linear-gradient(135deg, #F5C518, #FF6B35);
  color: #fff; font-size: 13px; font-weight: 700;
  padding: 7px 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-head);
}

.step-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.step-num {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; font-weight: 900;
  font-family: var(--font-head);
  background: var(--cv-grad);
}
.step-title {
  font-size: 17px; font-weight: 700; line-height: 1.4; padding-top: 5px;
  font-family: var(--font-head); color: var(--text);
}

.step-desc {
  font-size: 15px; line-height: 2.0; color: var(--text); margin-bottom: 12px;
}

/* ══════════════════════════════════════
   MEDIA
══════════════════════════════════════ */
.step-img {
  width: 100%; border-radius: var(--r-sm); display: block;
  margin: 10px 0; border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
}
/* デフォルトの枠線・影を消したいとき。
   .img-layout か .step-img に .no-border を付ける。
   例: <div class="img-layout img-center no-border"> / <img class="step-img no-border"> */
.no-border.step-img,
.no-border .step-img,
.no-border .img-cap-card .step-img {
  border: none !important;
  box-shadow: none !important;
}
.img-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.img-2col .step-img { margin: 0; }

/* 保存場所別の操作カード（ヘッダー＋画像＋説明）。
   主用途の1/3スナップ(540〜640px)では縦積み、640px以上の広い画面で横2col。 */
.img-cap-2col { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 12px 0; }
.img-cap-card {
  display: flex; flex-direction: column;
  background: #FBFAFF;
  border: 1px solid rgba(123,47,247,.16);
  border-radius: 12px; overflow: hidden;
}
.img-cap-head {
  display: flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, var(--cv-purple), #9D5BFF);
  color: #fff; font-weight: 700; font-size: 13.5px;
  padding: 8px 11px; line-height: 1.5;
}
.img-cap-head i { font-size: 14px; flex-shrink: 0; }
.img-cap-card .step-img { margin: 10px 10px 0; border-radius: 8px; width: calc(100% - 20px); }
.img-cap-text {
  padding: 9px 12px 12px; font-size: 14px; line-height: 1.85; color: var(--text);
}
.img-cap-text strong { color: var(--cv-purple); font-weight: 700; }
.img-cap-text i { color: var(--text2); font-size: .95em; }
@media(min-width:640px) {
  .img-cap-2col { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* Video wrapper */
.video-wrap {
  margin: 14px 0; border-radius: var(--r-sm); overflow: hidden;
  border: 1.5px solid rgba(123,47,247,.22);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.video-wrap-header {
  display: flex; align-items: center; gap: 8px;
  background: var(--cv-grad);
  padding: 9px 15px; color: #fff; font-size: 14px; font-weight: 700;
  font-family: var(--font-head);
}
.video-wrap-header .vw-tag {
  margin-left: auto; background: rgba(255,255,255,.2);
  border-radius: 20px; font-size: 11px; font-weight: 700; padding: 3px 10px;
}
.step-video { width: 100%; display: block; background: #111; margin: 0; border: none; border-radius: 0; }
/* YouTube等の埋め込み（16:9レスポンシブ） */
.video-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000;
}
.video-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
/* video-wrap内に置いた注意書きは、はみ出さないよう内側に余白 */
.video-wrap > .note-box { margin: 0; border-radius: 0; }

/* ══════════════════════════════════════
   INFO BOXES
══════════════════════════════════════ */
.hint-box {
  display: flex; gap: 10px; align-items: flex-start;
  background: #FFFAEB; border-left: 3px solid var(--amber);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 10px 14px; font-size: 14px; line-height: 1.75; color: #5C4200; margin: 10px 0;
}
.hint-box i { color: var(--amber); flex-shrink: 0; margin-top: 3px; font-size: 14px; }

.point-box {
  display: flex; gap: 10px; align-items: flex-start;
  background: #EFF9FF; border-left: 3px solid var(--cv-teal);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 10px 14px; font-size: 14px; line-height: 1.75; color: #003644; margin: 10px 0;
}
.point-box i { color: var(--cv-teal); flex-shrink: 0; margin-top: 3px; font-size: 14px; }

.example-box {
  background: #F5F0FF; border: 1px solid rgba(123,47,247,.16);
  border-radius: var(--r-sm); padding: 11px 15px;
  font-size: 15px; font-weight: 700; color: var(--cv-purple); margin: 10px 0;
}

.search-demo {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 2px solid var(--cv-purple);
  border-radius: 40px; padding: 11px 20px; margin: 12px 0;
  font-size: 16px; font-weight: 700; color: var(--cv-purple);
  box-shadow: 0 2px 10px rgba(123,47,247,.1);
}

.chips-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.chip {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  cursor: pointer; transition: transform .2s;
  border: 2px solid rgba(255,255,255,.75); box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.chip:hover { transform: scale(1.2); }
.chips-label { font-size: 13px; color: var(--text2); font-weight: 500; }

/* ══════════════════════════════════════
   SNAP BANNER
══════════════════════════════════════ */
.snap-banner {
  background: linear-gradient(135deg, #EFF9FF, #F3EEFF);
  border: 1.5px solid rgba(0,196,204,.3);
  border-radius: var(--r-sm); padding: 14px 16px; margin: 12px 0 4px;
}
.snap-diagram {
  display: flex; align-items: stretch; height: 50px; margin: 10px 0;
  background: #fff; border-radius: 10px;
  border: 1.5px solid var(--border); overflow: hidden;
}
.snap-canva {
  flex: 2; background: var(--cv-grad);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700; gap: 6px;
  font-family: var(--font-head);
}
.snap-grip {
  width: 7px; background: rgba(0,0,0,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5); font-size: 10px;
}
.snap-guide {
  flex: 1; background: var(--cv-grad-r);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700;
  text-align: center; line-height: 1.4; font-family: var(--font-head);
}
.canva-open-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--cv-grad);
  color: #fff; font-size: 14px; font-weight: 700;
  padding: 9px 18px; border-radius: 30px; text-decoration: none;
  transition: all .2s; box-shadow: 0 3px 12px rgba(123,47,247,.3);
  font-family: var(--font-head);
}
.canva-open-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(123,47,247,.4); }

/* ══════════════════════════════════════
   CHALLENGE ITEMS
══════════════════════════════════════ */
/* ── アイデアのひきだし：コルクボードに付箋を貼った見せ方 ── */
.challenge-items {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  margin: 16px 0;
  padding: 34px 16px 18px;
  border-radius: 14px;
  /* コルクボードの面：淡いコルク色＋細かな点描テクスチャ */
  background:
    radial-gradient(circle at 20% 30%, rgba(180,130,70,.07) 0 2px, transparent 2px) 0 0/14px 14px,
    radial-gradient(circle at 60% 70%, rgba(180,130,70,.06) 0 2px, transparent 2px) 7px 7px/14px 14px,
    linear-gradient(135deg, #E9D5B5, #E2C9A3);
  border: 1px solid rgba(140,100,55,.35);
  box-shadow: inset 0 2px 6px rgba(120,80,40,.18), inset 0 -2px 5px rgba(120,80,40,.12);
}
/* ボード上部の見出しラベル（貼り紙風）*/
.challenge-items::before {
  content: "アイデアのひきだし";
  position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #FFF6D8, #FFEFB8);
  color: #8A5A12; font-weight: 700; font-size: 13px; letter-spacing: .04em;
  padding: 4px 16px; border-radius: 0 0 10px 10px;
  border: 1px solid rgba(180,130,40,.30); border-top: none;
  box-shadow: 0 2px 4px rgba(120,80,30,.2);
}
.ch-item {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  background: linear-gradient(170deg, #FFF7CE 0%, #FFF0AE 100%);
  border: none; border-radius: 3px;
  padding: 12px 14px 12px 13px;
  font-size: 15px; font-weight: 600; color: #4A3B12; line-height: 1.9;
  /* 付箋が浮いて見える影（下方向＋少しにじみ）*/
  box-shadow: 1px 3px 7px rgba(80,55,15,.22), 0 1px 0 rgba(255,255,255,.5) inset;
}
.ch-item::before {
  content: "";
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(-1.5deg);
  width: 52px; height: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(210,225,235,.42));
  border: 1px solid rgba(150,170,185,.35);
  box-shadow: 0 1px 2px rgba(60,70,80,.12);
}
.ch-item i { color: #C28A1E; font-size: 15px; flex-shrink: 0; }
/* テキストを1つの塊にして自然に折り返させる（flex内で文字が散るのを防ぐ）*/
.ch-item .ch-text { flex: 1 1 0%; min-width: 0; }
/* 付箋ごとに色味を少しだけ変えて単調さを防ぐ（黄系で統一、彩度のみ変化）*/
.ch-item:nth-child(3n+2) { background: linear-gradient(170deg, #FFF1D6 0%, #FFE6AE 100%); }
.ch-item:nth-child(3n)   { background: linear-gradient(170deg, #FEFAD2 0%, #FCF2A8 100%); }
.chal-card { padding-top: 44px; }

/* ══════════════════════════════════════
   SECTION CHECK BUTTON （独立ピルボタン）
══════════════════════════════════════ */
.btn-wrap {
  padding: 16px 22px 24px;
  display: flex; justify-content: center;
}
.sec-check-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 40px;
  border: none; border-radius: 50px;
  color: #fff; font-size: 17px; font-weight: 700; letter-spacing: .3px;
  cursor: pointer; font-family: var(--font-head);
  background: var(--cv-grad);
  box-shadow: 0 4px 20px rgba(123,47,247,.35), 0 1px 4px rgba(0,0,0,.1);
  transition: all .22s cubic-bezier(.175,.885,.32,1.275);
  position: relative; overflow: hidden;
}
/* inner gloss */
.sec-check-btn::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  border-radius: 50px 50px 0 0; pointer-events: none;
}
.sec-check-btn:not(:disabled):hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 28px rgba(123,47,247,.45), 0 2px 8px rgba(0,0,0,.1);
}
.sec-check-btn:not(:disabled):active { transform: translateY(-1px) scale(.99); }
.sec-check-btn:disabled {
  background: linear-gradient(135deg, #9BABB0, #7A8D92) !important;
  cursor: default; transform: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* challenge button (gold accent) */
.sec-check-btn.challenge-btn {
  background: linear-gradient(135deg, #F5C518 0%, #FF6B35 60%, #FF4D6D 100%);
  box-shadow: 0 4px 20px rgba(245,197,24,.4), 0 1px 4px rgba(0,0,0,.1);
}
.sec-check-btn.challenge-btn:not(:disabled):hover {
  box-shadow: 0 8px 28px rgba(245,197,24,.5), 0 2px 8px rgba(0,0,0,.1);
}

/* ══════════════════════════════════════
   XP POPUP
══════════════════════════════════════ */
.xp-popup {
  position: fixed; bottom: calc(var(--inst-h) + 16px); right: 22px; z-index: 999;
  background: var(--cv-grad);
  color: #fff; font-size: 18px; font-weight: 700;
  padding: 10px 20px; border-radius: 30px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 20px rgba(123,47,247,.4);
  opacity: 0; pointer-events: none; font-family: var(--font-head);
}
.xp-popup.show { animation: xpFloat 2s ease forwards; }
@keyframes xpFloat {
  0%   { opacity:0; transform:translateY(14px); }
  16%  { opacity:1; transform:translateY(-10px); }
  68%  { opacity:1; transform:translateY(-10px); }
  100% { opacity:0; transform:translateY(-30px); }
}

/* ══════════════════════════════════════
   COMPLETION OVERLAY
══════════════════════════════════════ */
.completion-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(10,8,28,.78); align-items: center; justify-content: center;
  overflow-y: auto;
}
.completion-overlay.show { display: flex; }
.completion-box {
  position: relative;
  background: var(--card); border-radius: 24px;
  padding: 40px 36px; text-align: center;
  max-width: 380px; width: 92%; margin: 20px auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  animation: popIn .4s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes popIn { from{transform:scale(.6);opacity:0} to{transform:scale(1);opacity:1} }

.comp-icon { font-size: 52px; color: var(--gold-lit); margin-bottom: 8px; }
.comp-title { font-size: 26px; font-weight: 900; font-family: var(--font-head); margin-bottom: 6px; }
.comp-sub   { font-size: 14px; color: var(--text2); margin-bottom: 14px; }
.comp-stars { display: flex; justify-content: center; gap: 7px; margin: 12px 0; }
.comp-stars i { font-size: 28px; color: var(--gold-lit); animation: starPop .4s cubic-bezier(.175,.885,.32,1.275) both; }
.comp-stars i:nth-child(2){animation-delay:.08s;}
.comp-stars i:nth-child(3){animation-delay:.16s;}
.comp-stars i:nth-child(4){animation-delay:.24s;}
.comp-stars i:nth-child(5){animation-delay:.32s;}
@keyframes starPop { from{transform:scale(0) rotate(-30deg)} to{transform:scale(1) rotate(0)} }

.comp-msg { font-size: 15px; color: var(--text2); line-height: 1.7; margin: 10px 0 16px; }
.comp-xp {
  background: var(--cv-grad);
  color: #fff; font-size: 17px; font-weight: 700; font-family: var(--font-head);
  padding: 9px 24px; border-radius: 30px; display: inline-block; margin-bottom: 20px;
}
.next-lesson-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 15px; border: none; border-radius: 50px;
  background: var(--cv-grad);
  color: #fff; font-size: 17px; font-weight: 700;
  cursor: pointer; font-family: var(--font-head);
  box-shadow: 0 4px 18px rgba(123,47,247,.35);
  transition: all .2s;
}
.next-lesson-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(123,47,247,.45); }

/* ══════════════════════════════════════
   INSTRUCTOR BAR
══════════════════════════════════════ */
.inst-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
  height: var(--inst-h);
  background: rgba(16,12,36,.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(123,47,247,.35);
  display: flex; align-items: center;
  padding: 0 20px; gap: 20px;
}

.inst-stars { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.inst-star { font-size: 26px; color: rgba(255,255,255,.15); transition: all .5s; }
.inst-star.lit { color: var(--gold-lit); filter: drop-shadow(0 0 8px rgba(255,210,63,.65)); }

.inst-divider { width: 1px; height: 32px; background: rgba(255,255,255,.12); flex-shrink: 0; }

.inst-sec {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
}
.inst-sec-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--cv-grad);
  color: #fff; font-size: 12px; font-weight: 700; font-family: var(--font-head);
  padding: 3px 11px; border-radius: 20px; white-space: nowrap; flex-shrink: 0;
}
.inst-sec-name {
  font-size: 14px; font-weight: 500; color: rgba(255,255,255,.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-head);
}

.inst-times { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.inst-time-block { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.inst-time-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.4); letter-spacing: .6px; text-transform: uppercase; }
.inst-time-val   { font-size: 20px; font-weight: 900; color: #fff; font-family: var(--font-head); letter-spacing: .5px; line-height: 1; }
.inst-time-val.warn   { color: #F59E0B; }
.inst-time-val.danger { color: #EF4444; animation: blink .8s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ══════════════════════════════════════
   CONFETTI CANVAS
══════════════════════════════════════ */
canvas#confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 999; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

/* 1/3スナップ・スマホ（〜520px） */
@media(max-width:520px) {
  :root { --nav-h: 52px; --inst-h: 54px; }
  .lesson-title { display: none; }
  .stars-row { display: none; }
  .sec-wrap { margin: 12px 8px 0; border-radius: 12px; }
  .step-card { padding: 14px 12px 12px; }
  .sec-header { padding: 11px 12px; }
  .sec-text .sec-name { font-size: 15px; }
  .step-title { font-size: 15px; }
  .step-desc { font-size: 14px; line-height: 1.85; }
  .btn-wrap { padding: 10px 12px 18px; }
  .sec-check-btn { font-size: 15px; padding: 13px 24px; }
  .guide-sticky { padding: 9px 12px; }
  .img-2col { grid-template-columns: 1fr; }
  .substep { padding: 10px 11px; }
  .substep-title { font-size: 13px; }
  .substep-desc { font-size: 12px; }
  .hint-box, .point-box, .note-box { font-size: 13px; padding: 9px 11px; }
  .example-box { font-size: 13px; padding: 9px 12px; }
  .sub-heading { font-size: 13px; }
  .inst-sec-name { display: none; }
  .inst-star { font-size: 17px; }
  .inst-stars { gap: 4px; }
  .inst-time-val { font-size: 16px; }
  .inst-times { gap: 10px; }
}

/* 中間幅（521〜860px） */
@media(min-width:521px) and (max-width:860px) {
  .sec-wrap { margin: 20px 14px 0; }
  .step-card { padding: 20px 18px 16px; }
}

/* 広い画面（861px〜） */
@media(min-width:861px) {
  .guide-content {
    max-width: 880px;
    margin-left: auto; margin-right: auto;
    padding-left: 24px; padding-right: 24px;
  }
  .guide-sticky { padding: 13px 28px; }
  .sec-wrap { margin: 26px 0 0; }
  .sec-header { padding: 16px 22px; }
  .sec-icon { width: 42px; height: 42px; font-size: 18px; }
  .sec-text .sec-name { font-size: 20px; }
  .sec-badge { font-size: 26px; }
  .step-card { padding: 26px 26px 20px; }
  .step-num { width: 38px; height: 38px; font-size: 16px; }
  .step-title { font-size: 19px; padding-top: 6px; }
  .step-desc { font-size: 16px; line-height: 2.05; }
  .hint-box, .point-box { font-size: 15px; padding: 11px 15px; }
  .example-box { font-size: 16px; }
  .search-demo { font-size: 17px; }
  .ch-item { font-size: 16px; }
  .btn-wrap { padding: 18px 26px 28px; }
  .sec-check-btn { font-size: 18px; padding: 16px 48px; }
  .video-wrap-header { font-size: 15px; }
  kbd { font-size: 13px; }
  .inst-star { font-size: 30px; }
  .inst-time-val { font-size: 22px; }
  .inst-sec-badge { font-size: 13px; }
  .inst-sec-name { font-size: 15px; }
}

/* さらに広い（1200px〜） */
@media(min-width:1200px) {
  .guide-content { max-width: 940px; }
}

/* ══════════════════════════════════════
   はじめにブロック
══════════════════════════════════════ */
.intro-block {
  margin: 20px 16px 0;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: 0 2px 16px rgba(26,29,46,.08), 0 1px 4px rgba(26,29,46,.04);
  border: 1px solid var(--border2);
  overflow: hidden;
  padding: 24px 22px 26px;
}

.intro-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
/* 「時間があまった人へ」グループ枠（おまけ課題をまとめてくくる・控えめブルー系）*/
.extra-group {
  margin: 24px 22px 4px;
  padding: 14px 16px 16px;
  background: linear-gradient(180deg, #F1F4FB, #EAEFF8);
  border: 1px solid rgba(80,110,180,.22);
  border-radius: 16px;
}
.extra-header {
  display: flex; align-items: center; gap: 11px;
  padding: 6px 4px 12px;
}
.extra-header .extra-icon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #7E94C4, #9AAAD0);
  color: #fff; font-size: 15px;
}
.extra-header .extra-texts { min-width: 0; }
.extra-label {
  font-family: var(--font-head); font-weight: 800; font-size: 16px;
  color: #44567E; line-height: 1.4; letter-spacing: .02em;
}
.extra-sub {
  margin-top: 2px; font-size: 12.5px; color: var(--text2); line-height: 1.6;
}
/* 枠内のおまけ課題。各課題を白い独立カードにして区切りを明確化。
   step-cardの左右カラー枠（is-current時の紫ボーダー）はそのまま機能する。 */
.extra-body {
  display: flex; flex-direction: column; gap: 10px;
  padding: 0;
}
.extra-group .extra-body > .step-card {
  margin: 0;
  background: #fff;
  border: 1px solid rgba(80,110,180,.18);
  border-top: 1px solid rgba(80,110,180,.18);
  border-radius: 12px;
  padding: 16px 18px 14px;
}
.extra-body > .step-card:hover { background: #fff; }
.intro-label {
  display: inline-flex; align-items: center;
  background: var(--cv-grad);
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; padding: 4px 12px; border-radius: 20px;
  font-family: var(--font-head);
}
.intro-title {
  font-size: 22px; font-weight: 900; font-family: var(--font-head); color: var(--text);
}

.intro-desc {
  font-size: 15px; line-height: 2.0; color: var(--text); margin-bottom: 18px;
}

/* 特長グリッド */
.feature-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.feature-card {
  border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--border2);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  background: var(--card);
}
.feature-img-wrap {
  width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--bg2);
}
.feature-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.feature-label {
  padding: 8px 12px;
  font-size: 13px; font-weight: 700; color: var(--text);
  font-family: var(--font-head);
  display: flex; align-items: center; gap: 7px;
  border-top: 1px solid var(--border2);
}
.feature-label i { color: var(--cv-purple); font-size: 13px; }

/* ── 1ディスプレイ スキップ案内 ── */
.single-display-note {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 2px;
  background: linear-gradient(135deg, #EFF9FF, #F3EEFF);
  border-left: 3px solid var(--cv-teal);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 12px 16px;
  font-size: 14px; line-height: 1.75; color: var(--text);
}
.single-display-note i {
  color: var(--cv-teal); flex-shrink: 0; margin-top: 3px; font-size: 18px;
}
.skip-link {
  color: var(--cv-purple); font-weight: 700; text-decoration: underline;
  text-underline-offset: 2px;
}
.skip-link:hover { opacity: .75; }

/* ── Canvaを開くボタン ── */
.open-canva-wrap {
  display: flex; justify-content: center; margin: 16px 0;
}
.open-canva-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--cv-grad);
  color: #fff; font-size: 17px; font-weight: 700;
  padding: 15px 36px; border-radius: 50px; border: none;
  cursor: pointer; font-family: var(--font-head);
  box-shadow: 0 4px 20px rgba(123,47,247,.35), 0 1px 4px rgba(0,0,0,.1);
  transition: all .22s cubic-bezier(.175,.885,.32,1.275);
  position: relative; overflow: hidden;
}
.open-canva-btn::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  border-radius: 50px 50px 0 0; pointer-events: none;
}
.open-canva-btn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 28px rgba(123,47,247,.45);
}
.open-canva-btn:active { transform: translateY(-1px) scale(.99); }

/* ── 代替方法カード ── */
.method-fallback {
  background: #FFFAEB; border: 1.5px solid var(--amber);
  border-radius: var(--r-sm); padding: 14px 16px; margin-top: 10px;
}
.method-fallback-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: #5C4200; margin-bottom: 12px;
}
.method-fallback-title i { color: var(--amber); }
.method-cards { display: flex; flex-direction: column; gap: 12px; }
.method-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--card); border-radius: var(--r-sm);
  border: 1px solid var(--border2); padding: 14px;
}
.method-num {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--cv-grad);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; font-weight: 900; font-family: var(--font-head);
}
.method-body { flex: 1; min-width: 0; }
.method-title {
  font-size: 15px; font-weight: 700; font-family: var(--font-head); margin-bottom: 6px;
}
.method-desc { font-size: 14px; line-height: 1.75; color: var(--text2); }

/* ── サブステップ ── */
.substep-list {
  display: flex; flex-direction: column;
  margin: 12px 0; border-radius: var(--r-sm);
  border: 1px solid var(--border2); overflow: hidden;
  background: var(--card);
}
.substep {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border2);
}
.substep-last { border-bottom: none; }

.substep-num {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--cv-grad);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 900; font-family: var(--font-head);
  margin-top: 2px;
}
.substep-num-done {
  background: linear-gradient(135deg, var(--green), #059669);
}
.substep-body {
  flex: 1; min-width: 0; padding: 0;
}
.substep-title {
  font-size: 14px; font-weight: 700; font-family: var(--font-head);
  color: var(--text); margin-bottom: 5px; line-height: 1.5;
}
.substep-desc {
  font-size: 13px; line-height: 1.75; color: var(--text2); margin-bottom: 6px;
}

/* ── responsive additions ── */
@media(max-width:520px) {
  .intro-block { margin: 16px 10px 0; padding: 18px 14px 20px; }
  .intro-title { font-size: 19px; }
  .feature-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .feature-label { font-size: 11px; padding: 6px 9px; }
  .open-canva-btn { font-size: 15px; padding: 13px 28px; }
  .substep-num { width: 36px; font-size: 15px; }
  .substep-body { padding: 14px 12px 14px 10px; }
}

@media(min-width:861px) {
  .intro-block { margin: 26px 0 0; padding: 32px 28px 34px; }
  .intro-title { font-size: 26px; }
  .intro-desc { font-size: 16px; }
  .feature-label { font-size: 14px; padding: 9px 14px; }
  .open-canva-btn { font-size: 18px; padding: 17px 44px; }
  .substep-num { width: 52px; font-size: 20px; }
  .substep-title { font-size: 16px; }
  .substep-desc { font-size: 15px; }
  .method-title { font-size: 16px; }
  .method-desc { font-size: 15px; }
  .single-display-note { font-size: 15px; }
}

/* ══════════════════════════════════════
   ハンバーガーボタン（ナビ内）
══════════════════════════════════════ */
.hamburger-btn {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(123,47,247,.1); border: 1px solid rgba(123,47,247,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--cv-purple);
  cursor: pointer; transition: all .2s; flex-shrink: 0;
}
.hamburger-btn:hover { background: rgba(123,47,247,.18); }

/* ══════════════════════════════════════
   ハンバーガーオーバーレイ＆パネル
══════════════════════════════════════ */
.hamburger-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(10,8,28,.55);
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.hamburger-overlay.open {
  opacity: 1; pointer-events: auto;
}

.hamburger-panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 300px; max-width: 85vw;
  background: #16112E;
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow: 4px 0 32px rgba(0,0,0,.5);
}
.hamburger-overlay.open .hamburger-panel {
  transform: translateX(0);
}

/* ── パネルヘッダー ── */
.hamburger-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  height: var(--nav-h);
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.hamburger-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 700; color: #fff;
  font-family: var(--font-head);
}
.hamburger-title i { color: var(--cv-teal); }
.hamburger-close {
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(255,255,255,.08); border: none;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7); font-size: 16px;
  cursor: pointer; transition: background .2s;
}
.hamburger-close:hover { background: rgba(255,255,255,.16); }

/* ── メニューリスト ── */
.hamburger-list {
  flex: 1; overflow-y: auto; padding: 10px 10px 30px;
}

.hm-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 12px; margin-bottom: 4px;
  cursor: pointer; transition: background .15s;
  text-decoration: none;
}
.hm-item:hover { background: rgba(255,255,255,.07); }
.hm-item.active { background: rgba(123,47,247,.3); }

.hm-num {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--cv-grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; color: #fff;
  font-family: var(--font-head);
  opacity: .45; transition: opacity .3s;
}
.hm-item.done .hm-num,
.hm-item.active .hm-num { opacity: 1; }
.hm-item.done .hm-num {
  background: linear-gradient(135deg, var(--green), #059669);
}

.hm-body { flex: 1; min-width: 0; }
.hm-name {
  font-size: 14px; font-weight: 700; color: rgba(255,255,255,.55);
  font-family: var(--font-head); line-height: 1.3;
  transition: color .3s;
}
.hm-item.done .hm-name,
.hm-item.active .hm-name { color: rgba(255,255,255,.92); }
.hm-min {
  font-size: 12px; color: rgba(255,255,255,.3);
  margin-top: 2px;
}
.hm-item.done .hm-min { color: rgba(255,255,255,.45); }

.hm-check {
  font-size: 15px; color: var(--green);
  opacity: 0; transition: opacity .3s; flex-shrink: 0;
}
.hm-item.done .hm-check { opacity: 1; }

/* ── インストバー：進捗グループ ── */
.inst-progress-group {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex-shrink: 0;
}
.inst-prog-text {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 15px; font-weight: 900; color: #fff;
  font-family: var(--font-head); line-height: 1;
}
.inst-prog-label { font-size: 11px; color: rgba(255,255,255,.5); font-weight: 500; }
.inst-xp {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: var(--gold-lit);
  font-family: var(--font-head);
}
.inst-xp i { font-size: 11px; }

/* ── nav: xp-pill 削除対応（念のため非表示） ── */
.xp-pill { display: none; }
.nav-bar, .nav-bar-fill, .progress-info { display: none; }

/* responsive: ハンバーガーパネル幅 */
@media(max-width:520px) {
  .hamburger-panel { width: 280px; }
  .hm-name { font-size: 13px; }
}

/* ══ 補足カード（折りたたみ） ══ */
.supplement-card { margin:14px 0; border:1.5px solid rgba(123,47,247,.18); border-radius:var(--r-sm); overflow:hidden; background:#F9F7FF; }
.supplement-card > summary { display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding:12px 16px; font-size:14px; font-weight:700; font-family:var(--font-head); color:var(--cv-purple); cursor:pointer; list-style:none; user-select:none; transition:background .15s; }
.supplement-card > summary:hover { background:rgba(123,47,247,.06); }
.supplement-card > summary::after { content:'\f078'; font-family:'Font Awesome 6 Free'; font-weight:900; margin-left:auto; font-size:11px; opacity:.6; transition:transform .2s; }
.supplement-card[open] > summary::after { transform:rotate(180deg); }
.supplement-card > summary::-webkit-details-marker { display:none; }
.supplement-body { padding:14px 16px 16px; border-top:1px solid rgba(123,47,247,.12); font-size:14px; line-height:1.85; color:var(--text); }

/* ══ 小見出し ══ */
.sub-heading { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; font-family:var(--font-head); color:var(--cv-purple); margin:18px 0 6px; padding-bottom:6px; border-bottom:1.5px solid rgba(123,47,247,.15); }

/* ══ 注記ボックス ══ */
.note-box { display:flex; gap:8px; align-items:flex-start; background:rgba(123,47,247,.05); border-left:3px solid var(--cv-purple); border-radius:0 var(--r-sm) var(--r-sm) 0; padding:9px 13px; font-size:13px; line-height:1.7; color:var(--text2); margin:8px 0; }
.note-box i { color:var(--cv-purple); flex-shrink:0; margin-top:2px; }

@media(min-width:861px){
  .supplement-card > summary { font-size:15px; padding:13px 18px; }
  .supplement-body { font-size:15px; padding:16px 18px 18px; }
  .sub-heading { font-size:15px; }
  .note-box { font-size:14px; }
}

/* ── ステップ内：テキストと画像の視覚的分離 ── */
.step-desc + .step-img,
.step-desc + .img-2col,
.note-box + .step-img,
.note-box + .img-2col,
.hint-box + .step-img,
.point-box + .step-img {
  margin-top: 12px;
}

/* ── step-card 内の段落間隔 ── */
.step-card p + p { margin-top: 10px; }

/* ── substep-body 内の画像は上マージン ── */
.substep-body .step-img { margin-top: 8px; }
.substep-body .img-2col { margin-top: 8px; }

/* ── note-box / hint-box を画像の直後に置く場合 ── */
.step-img + .note-box,
.step-img + .hint-box,
.step-img + .point-box { margin-top: 10px; }

/* ── guide-content 最下部のパディング（インストバー分） ── */
.guide-content { padding-bottom: calc(var(--inst-h) + 48px); }

/* ── sub-heading の上スペースを統一 ── */
.sub-heading:first-child { margin-top: 4px; }

/* ── step-card 内のネストした step-card（例：えんぴつ追加など） ── */
.step-card > .step-card {
  margin: 10px 0 0;
  border: 1px solid var(--border2);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  background: rgba(123,47,247,.03);
}

/* ── search-demo を狭い画面でも折り返さない ── */
.search-demo { flex-wrap: nowrap; overflow-x: auto; }

/* ── canva-open-btn：中央寄せボタンのラッパー ── */
.canva-btn-center {
  display: flex; justify-content: center; margin: 14px 0;
}

/* ── 動画プレースホルダー（画像PHと区別） ── */
.video-ph {
  background: linear-gradient(135deg, #1A103A, #2A1F50) !important;
  border-color: var(--cv-purple) !important;
  min-height: 72px;
}
.video-ph .ph-icon { color: rgba(255,255,255,.6) !important; font-size: 28px; }
.video-ph .ph-label { color: rgba(255,255,255,.55) !important; font-size: 13px; }


/* ════════════════════════════════════════
   v7 追加CSS
════════════════════════════════════════ */

/* ─ STEPバッジ（step-numの代替デザイン） ─ */
.step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cv-grad);
  color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .8px;
  padding: 5px 14px; border-radius: 20px;
  white-space: nowrap; flex-shrink: 0;
  font-family: var(--font-head);
  box-shadow: 0 2px 8px rgba(123,47,247,.3);
}
.step-h {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 2px solid var(--border2);
}

/* ─ substep-num: 正円固定（楕円防止） ─ */
.substep-num {
  width: 28px !important; height: 28px !important;
  min-width: 28px !important; min-height: 28px !important;
  flex-shrink: 0 !important; flex-grow: 0 !important;
  align-self: flex-start !important;
  border-radius: 50% !important;
  background: var(--cv-grad);
  display: inline-flex !important;
  align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 900; font-family: var(--font-head);
  margin-top: 2px; overflow: hidden; padding: 0 !important; line-height: 1;
}
.substep-num-done { background: linear-gradient(135deg, var(--green), #059669) !important; }

/* ─ 情報ボックス内テキスト（table-cell方式） ─ */
.note-box, .hint-box, .point-box {
  display: table !important; width: 100%; table-layout: fixed;
  border-collapse: separate;
}
.note-box  > i, .hint-box  > i, .point-box  > i {
  display: table-cell !important;
  width: 22px; vertical-align: top; padding-top: 3px;
  white-space: nowrap;
}
.box-text {
  display: table-cell !important;
  vertical-align: top; padding-left: 2px;
  overflow-wrap: break-word; word-break: break-word;
}
.hint-box  .box-text { color: #5C4200; font-size: 14px; line-height: 1.85; }
.point-box .box-text { color: #003644; font-size: 14px; line-height: 1.85; }
.note-box  .box-text { color: var(--text2); font-size: 13px; line-height: 1.8; }
.box-text ruby  { margin: 0; padding: 0; }
.box-text strong { color: inherit; }

/* ─ ruby 間隔抑制 ─ */
.step-desc ruby, .substep-title ruby, .substep-desc ruby,
.box-text ruby, .step-title ruby, p ruby {
  margin: 0; padding: 0; word-spacing: normal;
}
rt { letter-spacing: 0; }

/* ─ supplement-card をボタンらしく ─ */
.supplement-card:not([open]) {
  background: linear-gradient(135deg, rgba(123,47,247,.06), rgba(0,196,204,.04));
  border-color: rgba(123,47,247,.3);
}
.sum-hint {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: #fff;
  background: var(--cv-grad); padding: 4px 11px; border-radius: 20px;
  box-shadow: 0 2px 8px rgba(123,47,247,.3); white-space: nowrap;
}

/* ─ コピーボタン ─ */
.copy-btn {
  margin-left: auto; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--cv-grad); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px;
  box-shadow: 0 2px 8px rgba(123,47,247,.3);
  transition: transform .15s;
}
.copy-btn:hover { transform: scale(1.1); }
.copy-btn.copied { background: linear-gradient(135deg, var(--green), #059669); }
.copy-toast {
  position: fixed; bottom: calc(var(--inst-h) + 20px); left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #1A1D2E; color: #fff; font-size: 14px; font-weight: 700;
  padding: 10px 20px; border-radius: 30px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 900;
}
.copy-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.copy-toast i { color: var(--green); }

/* ─ video placeholder ─ */
.video-ph {
  background: linear-gradient(135deg,#1A103A,#2A1F50) !important;
  border-color: var(--cv-purple) !important; min-height: 72px;
}
.video-ph .ph-icon { color:rgba(255,255,255,.6) !important; font-size:26px; }
.video-ph .ph-label { color:rgba(255,255,255,.5) !important; font-size:13px; }

/* ─ sub-step-badge（補足内の手順番号） ─ */
.sub-step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--cv-grad); color: #fff;
  font-size: 11px; font-weight: 900; font-family: var(--font-head);
  margin-right: 4px; vertical-align: middle; flex-shrink: 0;
}

/* ─ open-step：ひらく(details)内の手順見出し ─
   入れ子カードを増やさずに見出しを締めるため、淡い帯＋左ボーダー＋番号バッジ。
   下ボーダーだけの sub-heading が「宙に浮く」問題を解消する。 */
.open-step {
  display: flex; align-items: center; gap: 9px;
  margin: 18px 0 8px; padding: 9px 12px;
  background: rgba(123,47,247,.06);
  border-left: 4px solid var(--cv-purple);
  border-radius: 8px;
  font-family: var(--font-head); font-weight: 700;
  font-size: 14px; color: var(--text); line-height: 1.5;
}
.open-step:first-child { margin-top: 4px; }
.open-step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--cv-grad); color: #fff;
  font-size: 13px; font-weight: 900; font-family: var(--font-head);
  flex-shrink: 0;
}
.open-step-text { flex: 1 1 0%; min-width: 0; }
.open-step-text ruby rt { font-weight: 600; }
@media(max-width:640px) {
  .open-step { font-size: 13.5px; padding: 8px 10px; gap: 8px; }
  .open-step-badge { width: 22px; height: 22px; font-size: 12px; }
}

/* ─ canva-btn-wrap ─ */
.canva-btn-wrap {
  display: flex; justify-content: center; margin: 18px 0 24px;
}

/* ════ 1/3幅（640px以下）小学生向けUI ════ */
@media(max-width:640px) {
  .guide-content { padding-left: 0; padding-right: 0; padding-bottom: calc(var(--inst-h) + 60px); }
  .sec-wrap { margin: 18px 8px 0; border-radius: 14px; box-shadow: 0 3px 18px rgba(26,29,46,.1); }
  .sec-header { padding: 13px 16px; }
  .sec-icon   { width: 38px; height: 38px; font-size: 17px; }
  .sec-text .sec-name { font-size: 17px; }
  .step-card { padding: 20px 16px 16px; }
  .step-card + .step-card { border-top: 2px solid var(--border2); padding-top: 22px; }
  .step-badge { font-size: 10px; padding: 4px 11px; }
  .step-title { font-size: 16px; font-weight: 800; }
  .step-desc  { font-size: 16px; line-height: 2.1; margin-bottom: 14px; }
  .substep { padding: 13px 14px; gap: 11px; }
  .substep-title { font-size: 15px; line-height: 1.5; }
  .substep-desc  { font-size: 14px; line-height: 1.85; }
  .note-box, .hint-box, .point-box { font-size: 13px; padding: 10px 13px; margin: 10px 0; }
  .box-text { font-size: 13px !important; line-height: 1.85 !important; }
  .example-box { font-size: 14px; padding: 11px 14px; }
  .search-demo { font-size: 15px; padding: 11px 16px; margin: 14px 0; }
  .sub-heading { font-size: 14px; margin: 16px 0 8px; }
  .img-2col { grid-template-columns: 1fr !important; }
  .btn-wrap { padding: 18px 12px 26px; border-top: 2px dashed rgba(123,47,247,.2); }
  .sec-check-btn { font-size: 17px; padding: 16px 20px; border-radius: 50px; box-shadow: 0 5px 20px rgba(123,47,247,.4); }
  .supplement-card, .intro-block { margin-left: 8px; margin-right: 8px; }
  .supplement-card > summary { font-size: 14px; padding: 13px 14px; }
  .supplement-body { font-size: 14px; padding: 14px 14px 16px; }
  .guide-sticky { padding: 10px 16px; }
  .prog-bar { height: 9px; }
  .intro-block { margin: 16px 8px 0; padding: 20px 16px 22px; }
  .intro-title { font-size: 20px; }
  .intro-desc  { font-size: 15px; line-height: 2.0; }
  .feature-label { font-size: 11.5px; padding: 7px 10px; }
  .canva-open-btn { font-size: 14px; padding: 10px 16px; }
  .lesson-title { display: none; }
  .stars-row { display: none; }
}

.note-box, .hint-box, .point-box { display: flex !important; flex-direction: row; align-items: flex-start; gap: 8px; }
.note-box > i, .hint-box > i, .point-box > i { flex: 0 0 auto; font-size: 14px; margin-top: 2px; }
.box-text { flex: 1 1 0% !important; min-width: 0 !important; overflow-wrap: break-word; word-break: break-word; line-height: 1.85; }

/* ════════════════════════════════════════
   画像レイアウトパターン（4種）
   ① .img-full      横幅いっぱい
   ② .img-center    中央に1枚
   ③ .img-2col-sm   2枚横並び（矢印なし）
   ④ .img-2col-arrow 2枚横並び（矢印あり）
════════════════════════════════════════ */

/* 共通ラッパー */
.img-layout { margin: 14px 0; }
.img-layout .step-img { margin: 0; display: block; }

/* ① 横幅いっぱい */
.img-full .step-img {
  width: 100%;
}

/* ② 中央に1枚（70%幅・中央寄せ） */
.img-center {
  display: flex;
  justify-content: center;
}
.img-center .step-img {
  width: 70%;
  max-width: 480px;
}

/* ③ 2枚横並び */
.img-2col-sm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

/* ④ 2枚横並び＋矢印 */
.img-2col-arrow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.img-2col-arrow .step-img {
  flex: 1 1 0%;
  min-width: 0;
  width: auto;
}
.img-arrow-icon {
  font-size: 24px;
  color: var(--cv-purple);
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(123,47,247,.3));
  transition: transform .3s;
}

/* 1/3幅（640px以下）でのレスポンシブ変化 */
@media(max-width: 640px) {
  /* ③ 縦1列＋70%中央（img-centerと幅を統一） */
  .img-2col-sm {
    grid-template-columns: 1fr;
    gap: 10px;
    justify-items: center;
  }
  .img-2col-sm .step-img {
    width: 70%;
    max-width: 480px;
  }
  /* ④ 縦並び＋矢印を90度回転（→が↓に）。画像は70%中央でimg-centerと統一 */
  .img-2col-arrow {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .img-2col-arrow .step-img {
    width: 70%;
    max-width: 480px;
    flex: 0 0 auto;
  }
  .img-arrow-icon {
    transform: rotate(90deg);
    align-self: center;
    margin: 2px 0;
    font-size: 20px;
  }
}


/* ════════════════════════════════════════════════════════
   v8 追加：現在地スポットライト ＆ 手順の視覚的階層
   ねらい：1/3幅の縦長スクロールで「今どこを操作中か」を
   　　　　 はっきり示す。子ども（小2〜3年）向けに分かりやすさ優先。
   ──────────────────────────────────────────────────────── */

/* ── ① 現在地スポットライト ────────────────────────────
   IntersectionObserver で .is-current が付いたカードを強調。
   ・左に太いアクセントバー
   ・わずかに浮き上がる
   ・周囲（.is-dimmed）はほんの少しだけ沈める（隠さない） */
.step-card {
  /* ハイライト遷移をなめらかに */
  transition: background .25s ease, box-shadow .25s ease,
              opacity .25s ease, transform .25s ease;
  border-left: 4px solid transparent;   /* 通常は透明 */
  border-right: 4px solid transparent;  /* 通常は透明（現在地で色づく）*/
}

.step-card.is-current {
  background: rgba(123,47,247,.045);
  border-left-color: var(--cv-purple);
  border-right-color: var(--cv-purple);
  box-shadow: inset 0 0 0 1px rgba(123,47,247,.10),
              0 6px 22px rgba(123,47,247,.12);
  opacity: 1;
}
/* ホバーの薄い背景より現在地を優先 */
.step-card.is-current:hover { background: rgba(123,47,247,.06); }

/* 現在地カード左上の「いまここ」ピル */
.step-card.is-current::before {
  content: "いまここ";
  position: absolute;
  top: 10px; left: 0;
  transform: translateX(-2px);
  background: var(--cv-grad);
  color: #fff;
  font-size: 10px; font-weight: 700;
  font-family: var(--font-head);
  letter-spacing: .5px;
  padding: 3px 9px 3px 8px;
  border-radius: 0 999px 999px 0;
  box-shadow: 0 2px 8px rgba(123,47,247,.3);
  z-index: 3;
  pointer-events: none;
  animation: hereGlow 2.4s ease-in-out infinite;
}
@keyframes hereGlow {
  0%,100% { box-shadow: 0 2px 8px rgba(123,47,247,.3); }
  50%     { box-shadow: 0 2px 14px rgba(123,47,247,.55); }
}
/* 「いまここ」ピルぶんだけ現在地カードの本文を少し下げて重なり回避 */
.step-card.is-current > .step-h:first-child,
.step-card.is-current > .step-desc:first-child,
.step-card.is-current > .sub-heading:first-child,
.step-card.is-current > .substep-list:first-child {
  margin-top: 6px;
}

/* 周囲のカードをほんの少しだけ沈める（隠さない＝不安にさせない） */
.step-card.is-dimmed { opacity: .62; }

/* チャレンジ／補足カードでは「いまここ」を出さない（演出の競合回避） */
.chal-card.is-current::before { display: none; }

/* ── ② STEPバッジの大型化＋タイムライン ──────────────────
   step-h の STEP バッジを丸く大きくし、カード内の連続性を示す */
.step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 11px;
  border-radius: 999px;
  background: var(--cv-grad);
  color: #fff; font-size: 12px; font-weight: 800;
  font-family: var(--font-head); letter-spacing: .3px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(123,47,247,.25);
}
.step-h { align-items: center; }

/* sub-heading（フォントの変更／文字色の変更 等の中見出し）を
   左アクセント付きで強調し、画像群との境目を明確化 */
.sub-heading {
  border-left: 3px solid var(--cv-purple);
  padding-left: 10px;
  margin: 16px 0 8px;
}

/* ── ③ 画像とテキストの分離 ──────────────────────────
   画像ブロックに薄い面と余白を与え、文章と視覚的に切り分ける */
.img-layout {
  background: rgba(123,47,247,.03);
  border-radius: var(--r-sm);
  padding: 10px;
  margin: 12px 0;
}
.img-layout .step-img {
  box-shadow: 0 2px 12px rgba(26,29,46,.10);
}
/* substep 内の画像は面を二重にしない（すっきり見せる） */
.substep-body .img-layout {
  background: transparent;
  padding: 0;
}

/* ── ④ セクション完了時の見た目（達成感の固定表示）────── */
.sec-wrap.sec-done .sec-header {
  filter: saturate(.85);
}
.sec-wrap.sec-done .sec-header .sec-icon {
  background: rgba(255,255,255,.4);
}

/* ── 1/3幅での微調整 ──────────────────────────────── */
@media(max-width:640px) {
  .step-card.is-current::before { font-size: 9px; padding: 2px 8px 2px 7px; }
  .step-badge { min-width: 28px; height: 28px; font-size: 11px; padding: 0 9px; }
  .img-layout { padding: 8px; }
}


/* ════════════════════════════════════════════════════════
   v9 追加：注釈と折りたたみのメリハリ
   ねらい：統一感は保ちつつ、note/hint/point と details を
   　　　　 「見落とさない」強さに。アイコンを丸バッジ化し、
   　　　　 折りたたみは“ボタンらしさ”を上げる。PC前提で文言も調整。
   ──────────────────────────────────────────────────────── */

/* ── 注釈ボックス共通：左バーを太く＋アイコンを丸バッジ化 ── */
.note-box, .hint-box, .point-box {
  border-left-width: 5px;
  padding-top: 11px; padding-bottom: 11px;
  align-items: center;
  box-shadow: 0 1px 5px rgba(26,29,46,.05);
}
/* アイコンを塗りつぶしの丸バッジにして視認性UP */
.note-box > i, .hint-box > i, .point-box > i {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff !important; font-size: 12px; margin-top: 0;
  flex: 0 0 24px;
}
.note-box  > i { background: var(--cv-purple); }
.hint-box  > i { background: var(--amber); }
.point-box > i { background: var(--cv-teal); }

/* note は控えめ（補足情報）／hint・point は強め（やってほしい/大事）に
   ＝ 3種でメリハリ。色は既存のまま、面の濃さで強弱をつける */
.hint-box  { background: #FFF4D6; border-left-color: var(--amber); }
.point-box { background: #E3F7FB; border-left-color: var(--cv-teal); }

/* ラベル（種別）を小さく出して役割を明示 */
.note-box .box-text::before,
.hint-box .box-text::before,
.point-box .box-text::before {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 10px; font-weight: 800;
  letter-spacing: .5px;
  padding: 1px 7px; border-radius: 999px;
  margin-right: 7px; vertical-align: 2px;
  color: #fff;
}
.note-box  .box-text::before { content: "メモ";   background: var(--cv-purple); }
.hint-box  .box-text::before { content: "ヒント"; background: var(--amber); }
.point-box .box-text::before { content: "ポイント"; background: var(--cv-teal); }

/* ── 折りたたみ（details）を“押せるボタン”として強調 ── */
.supplement-card {
  border-width: 2px;
  box-shadow: 0 2px 10px rgba(123,47,247,.08);
}
.supplement-card > summary {
  background: rgba(123,47,247,.07);
  position: relative;
  padding-left: 44px;          /* 左の丸アイコン分の余白 */
}
/* summary 左端に「＋」の丸バッジ（開くと×印に） */
.supplement-card > summary::before {
  content: '\f067';            /* fa-plus */
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--cv-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  box-shadow: 0 2px 6px rgba(123,47,247,.3);
}
.supplement-card[open] > summary::before {
  content: '\f068';            /* fa-minus */
}
.supplement-card[open] > summary {
  background: rgba(123,47,247,.12);
}
/* もとの右側シェブロンは残す（開閉方向の手がかり） */

/* 「クリックで開く」ヒントピル（PC前提の文言・sum-hint） */
.sum-hint {
  margin-left: auto;
  font-size: 11px; font-weight: 700;
  color: var(--cv-purple);
  background: #fff;
  border: 1px solid rgba(123,47,247,.3);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.supplement-card > summary { row-gap: 6px; }
.supplement-card > summary .sum-hint {
  margin-left: 0; flex-basis: 100%; order: 3;
  width: fit-content; align-self: flex-start !important;
}
.supplement-card[open] .sum-hint { opacity: .5; }

/* ── 1/3幅での微調整 ── */
@media(max-width:640px) {
  .note-box > i, .hint-box > i, .point-box > i { width: 22px; height: 22px; flex-basis: 22px; font-size: 11px; }
  .supplement-card > summary { padding-left: 52px; }
  .sum-hint { font-size: 10px; padding: 2px 8px; }
}

/* v9：動画 poster（サムネ）をきれいに表示 */
.step-video { object-fit: cover; aspect-ratio: 16 / 9; background: #1A1D2E; }


/* ════════════════════════════════════════════════════════
   v10 追加：仕上げ調整（後勝ちで v8/v9 を上書き）
   ・「いまここ」ピル廃止（浮き出しは維持）
   ・箱を radius 付き完全囲みに
   ・sub-heading を大きく
   ・注釈は Font Awesome アイコンのみ＋radius囲み（文字ラベル廃止）
   ・文字級数を少し拡大、余白も拡大（詰まり過ぎ回避）
   ・Canvaを開くボタンを大きく＆ティールで「できた!」と差別化
   ──────────────────────────────────────────────────────── */

/* ── ①「いまここ」ピルを廃止 ── */
.step-card.is-current::before { content: none !important; display: none !important; }

/* ── ② step-card の現在地：浮き出しのみ（左バーは残し、本文の下げ補正は不要に） ── */
.step-card.is-current > .step-h:first-child,
.step-card.is-current > .step-desc:first-child,
.step-card.is-current > .sub-heading:first-child,
.step-card.is-current > .substep-list:first-child {
  margin-top: 0;
}

/* ── ③ substep を radius 付き完全囲みに（線区切り → カード化）── */
.substep-list {
  border: none;
  background: transparent;
  display: flex; flex-direction: column;
  gap: 12px;                 /* 箱どうしの間隔 */
  margin: 14px 0;
  overflow: visible;
}
.substep {
  border: 1.5px solid rgba(123,47,247,.16);
  border-bottom: 1.5px solid rgba(123,47,247,.16);   /* 線区切りの打ち消し */
  border-radius: var(--r-sm);
  background: var(--card);
  padding: 14px 15px;
  gap: 12px;
  box-shadow: 0 1px 6px rgba(26,29,46,.05);
}
.substep-last { border-bottom: 1.5px solid rgba(123,47,247,.16); }

/* 番号バッジを少し大きく＆見やすく */
.substep-num {
  width: 30px; height: 30px; font-size: 13px;
  align-self: flex-start;
}

/* ── ④ 文字級数を少し拡大（詰まり過ぎ回避・行間ゆったり）── */
.substep-title { font-size: 15.5px; line-height: 1.6; margin-bottom: 6px; }
.substep-desc  { font-size: 14px;   line-height: 1.85; }
.step-desc     { font-size: 15.5px; line-height: 2.0; }

/* ── ⑤ sub-heading を大きく・存在感アップ ── */
.sub-heading {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 800;
  font-family: var(--font-head); color: var(--cv-purple);
  margin: 22px 0 12px; padding: 0 0 0 12px;
  border-left: 5px solid var(--cv-purple);
  border-bottom: none;
}
.sub-heading i {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--cv-grad); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.sub-heading:first-child { margin-top: 6px; }

/* ── ⑥ 注釈：アイコンのみ＋radius完全囲み（文字ラベル廃止）── */
/* 種別ラベル（メモ/ヒント/ポイント）を消す */
.note-box .box-text::before,
.hint-box .box-text::before,
.point-box .box-text::before { content: none !important; display: none !important; }

/* 左バーをやめて全周ボーダーの角丸カードに */
.note-box, .hint-box, .point-box {
  border: 1.5px solid;
  border-left-width: 1.5px;
  border-radius: var(--r-sm);
  padding: 12px 14px;
  gap: 11px;
  align-items: center;
  box-shadow: 0 1px 6px rgba(26,29,46,.05);
}
.note-box  { background: #F3F0FF; border-color: rgba(123,47,247,.30); }
.hint-box  { background: #FFF4D6; border-color: rgba(245,158,11,.35); }
.point-box { background: #E3F7FB; border-color: rgba(0,196,204,.35); }

/* アイコンは丸バッジのまま、種別が直感で分かるものに（HTML側でアイコン差し替え） */
.note-box > i, .hint-box > i, .point-box > i {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff !important; font-size: 13px; margin-top: 0;
  flex: 0 0 28px;
}
.note-box  > i { background: var(--cv-purple); }
.hint-box  > i { background: var(--amber); }
.point-box > i { background: var(--cv-teal); }

/* 本文の級数も少し拡大 */
.note-box  .box-text { font-size: 14px; line-height: 1.8; }
.hint-box  .box-text { font-size: 14px; line-height: 1.8; }
.point-box .box-text { font-size: 14px; line-height: 1.8; }

/* ── ⑦ 折りたたみ summary の「＋」バッジを Font Awesome 正常表示に ── */
.supplement-card > summary::before {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
}

/* ── ⑧ Canvaを開くボタン：大きく＆ティールで「できた!」と差別化 ── */
.canva-btn-wrap { display: flex; justify-content: center; margin: 16px 0; }
.canva-open-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, #00C4CC, #0098B3);   /* ティール系＝外部へ行く行動 */
  color: #fff; font-size: 17px; font-weight: 800;
  padding: 15px 32px; border-radius: 50px; text-decoration: none;
  font-family: var(--font-head); letter-spacing: .3px;
  box-shadow: 0 4px 18px rgba(0,196,204,.4), 0 1px 4px rgba(0,0,0,.08);
  transition: all .22s cubic-bezier(.175,.885,.32,1.275);
}
.canva-open-btn i:first-child { font-size: 18px; }
.canva-open-btn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 26px rgba(0,196,204,.5), 0 2px 8px rgba(0,0,0,.1);
}
/* スタプレを開くボタン（Canva＝ティールと区別して赤系に） */
.staple-open-btn {
  background: linear-gradient(135deg, #F0506E, #D6334F);
  box-shadow: 0 4px 18px rgba(214,51,79,.38), 0 1px 4px rgba(0,0,0,.08);
}
.staple-open-btn:hover {
  box-shadow: 0 8px 26px rgba(214,51,79,.48), 0 2px 8px rgba(0,0,0,.1);
}

/* ── ⑨ 1/3幅での微調整（v10）── */
@media(max-width:640px) {
  .sub-heading { font-size: 16px; margin: 18px 0 10px; }
  .sub-heading i { width: 27px; height: 27px; font-size: 14px; }
  .substep-title { font-size: 15px; }
  .step-desc { font-size: 15px; }
  .note-box > i, .hint-box > i, .point-box > i { width: 26px; height: 26px; flex-basis: 26px; font-size: 12px; }
  .canva-open-btn { font-size: 16px; padding: 14px 26px; width: 100%; }
}


/* ════════════════════════════════════════════════════════
   v11 追加：矢印強調 / sub-heading / ボタン色再設計 / できた演出
   ──────────────────────────────────────────────────────── */

/* ── ① img-2col-arrow の矢印を ● で囲み＋動き ── */
.img-arrow-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--cv-grad);
  color: #fff !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(123,47,247,.35);
  filter: none;
  animation: arrowNudge 1.4s ease-in-out infinite;
}
/* 横並び時：右へすっすっと動く */
@keyframes arrowNudge {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(4px); }
}
/* 縦並び（1/3幅）時：90度回転を保ったまま下へ動く */
@media(max-width:640px) {
  .img-2col-arrow .img-arrow-icon {
    transform: rotate(90deg);
    width: 34px; height: 34px; font-size: 15px;
    animation: arrowNudgeV 1.4s ease-in-out infinite;
  }
  @keyframes arrowNudgeV {
    0%,100% { transform: rotate(90deg) translateX(0); }
    50%     { transform: rotate(90deg) translateX(4px); }
  }
}
@media(prefers-reduced-motion: reduce) {
  .img-arrow-icon { animation: none !important; }
}

/* ── ② sub-heading を sec-header 風の“帯”に（ただし差別化）──
   sec-header＝フルグラデ帯。sub-heading＝淡い面＋左に縦バー＋
   アイコンは小帯。彩度を抑えて「セクションの中の小見出し」と分かる差。 */
.sub-heading {
  display: flex; align-items: baseline; gap: 11px;
  font-size: 15px; font-weight: 700;
  font-family: var(--font-head); color: #3C3489;
  margin: 22px 0 12px; padding: 12px 16px;
  background: linear-gradient(135deg, #FAF8FF, #F0FBFC);
  border: none;
  border-bottom: 1px solid rgba(123,47,247,.10);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  box-shadow: 0 1px 6px rgba(123,47,247,.06);
}
.sub-heading i {
  align-self: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--cv-grad); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(123,47,247,.25);
}
.sub-heading:first-child { margin-top: 6px; }

/* ── ③ できた!ボタン（sec-check-btn）をゴールド系に ──
   見出し（紫）と色を分け、達成＝ゴールドの祝福カラーに。
   視認性のためゴールドは濃いめ＋文字に軽い影。 */
.sec-check-btn {
  background: linear-gradient(135deg, #FFB300 0%, #FF8F00 55%, #F57C00 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(120,60,0,.35);
  box-shadow: 0 4px 18px rgba(255,143,0,.42), 0 1px 4px rgba(0,0,0,.12);
}
.sec-check-btn::after {
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
}
.sec-check-btn:not(:disabled):hover {
  box-shadow: 0 8px 28px rgba(255,143,0,.5), 0 2px 8px rgba(0,0,0,.12);
}
.sec-check-btn:disabled {
  background: linear-gradient(135deg, #B7A98F, #97896F) !important;
  text-shadow: none;
}

/* ── ④ challenge-btn をレッド系に（できた!と差別化）── */
.sec-check-btn.challenge-btn {
  background: linear-gradient(135deg, #FF5252 0%, #E53935 55%, #C62828 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(120,0,0,.35);
  box-shadow: 0 4px 20px rgba(229,57,53,.45), 0 1px 4px rgba(0,0,0,.12);
}
.sec-check-btn.challenge-btn:not(:disabled):hover {
  box-shadow: 0 8px 28px rgba(229,57,53,.55), 0 2px 8px rgba(0,0,0,.12);
}

/* ── ⑤「できた」演出：中央に星がふわっと浮かんで消える ── */
.done-star-burst {
  position: fixed;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  font-size: 90px;
  color: #FFC107;
  filter: drop-shadow(0 4px 16px rgba(255,193,7,.6));
  animation: doneStar 1.1s cubic-bezier(.17,.67,.4,1) forwards;
}
@keyframes doneStar {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.3) rotate(-20deg); }
  35%  { opacity: 1; transform: translate(-50%,-50%) scale(1.15) rotate(8deg); }
  60%  { opacity: 1; transform: translate(-50%,-60%) scale(1.05) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%,-130%) scale(.9) rotate(0deg); }
}
/* まわりに散る小さな星 */
.done-spark {
  position: fixed;
  left: 50%; top: 42%;
  pointer-events: none; z-index: 9998;
  font-size: 22px; color: #FFD54F;
  filter: drop-shadow(0 2px 6px rgba(255,193,7,.5));
  animation: doneSpark .95s ease-out forwards;
}
@keyframes doneSpark {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); }
}
@media(prefers-reduced-motion: reduce) {
  .done-star-burst, .done-spark { animation-duration: .01s !important; }
}


/* ════════════════════════════════════════════════════════
   v12 追加：狭幅の崩れ対策＋フッター重なり＋STEP表記
   ──────────────────────────────────────────────────────── */

/* ── ① sub-heading のテキストを正しく折り返す ──
   flex内のテキストノードが1文字ずつ縦に潰れるのを防ぐ。
   テキストは <span class="sh-text"> で包み、flex:1 min-width:0 を与える。 */
.sub-heading {
  align-items: baseline;
  flex-wrap: nowrap;
}
.sub-heading > i {
  align-self: center;
}
.sub-heading .sh-text {
  flex: 1 1 0%;
  min-width: 0;
  line-height: 1.45;
  overflow-wrap: break-word;
  word-break: normal;
}
.sub-heading i,
.sub-heading .sub-step-badge {
  flex: 0 0 auto;
}

/* ── ② img-layout の狭幅対策（画像が枠から溢れない）── */
.img-layout { max-width: 100%; box-sizing: border-box; }
.img-layout .step-img { max-width: 100%; height: auto; }
/* 矢印付き2枚を狭幅で縦積みにしたとき、●矢印が画像幅を押し広げないように */
@media(max-width:640px) {
  .img-2col-arrow { width: 100%; box-sizing: border-box; }
  .img-2col-arrow .step-img { max-width: 70%; }
}

/* ── ③ フッター（インストラクターバー）との重なり防止 ──
   guide-content 末尾に十分な余白を確保（バー高さ＋ゆとり）。
   challenge等の最後の sec-wrap が隠れないように。 */
.guide-content {
  padding-bottom: calc(var(--inst-h) + 56px) !important;
}
@media(max-width:640px) {
  .guide-content { padding-bottom: calc(var(--inst-h) + 64px) !important; }
}
/* 最後のグループ下に余白を足して、できた!ボタンがバーに食い込まない */
.sec-wrap:last-of-type { margin-bottom: 8px; }


/* ════════════════════════════════════════════════════════
   v13 追加：注釈アイコンの確実な丸バッジ化＋左余白除去（最終上書き）
   過去版の重複定義を後勝ちで完全に上書きする。
   ──────────────────────────────────────────────────────── */
.note-box, .hint-box, .point-box {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border: 1.5px solid !important;
  border-radius: var(--r-sm) !important;
}
.note-box  { background: #F3F0FF !important; border-color: rgba(123,47,247,.30) !important; }
.hint-box  { background: #FFF4D6 !important; border-color: rgba(245,158,11,.40) !important; }
.point-box { background: #E3F7FB !important; border-color: rgba(0,196,204,.40) !important; }

/* アイコン＝白文字の丸バッジ。サイズ・色・中央寄せを明示し、左余白を作らない */
.note-box > i, .hint-box > i, .point-box > i {
  flex: 0 0 30px !important;
  width: 30px !important; height: 30px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: #fff !important;
}
.note-box  > i { background: var(--cv-purple) !important; }
.hint-box  > i { background: var(--amber)     !important; }
.point-box > i { background: var(--cv-teal)   !important; }

/* テキストは残り幅いっぱい（左余白の正体＝flex計算ズレを防ぐ） */
.note-box .box-text, .hint-box .box-text, .point-box .box-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}


/* ════════════════════════════════════════════════════════
   v14 追加：見出しの3階層デザイン ＋ details調整
   L1 = sec-header（グループ帯・濃いグラデ）※既存
   L2 = level2-heading（操作単位・タイトルらしく：白地＋太枠＋影）
   L3 = sub-heading（小分け・控えめ：うすいティール帯・小さめ）
   ──────────────────────────────────────────────────────── */

/* ── L2：操作単位の見出し（タイトル見出しらしく）── */
.level2-heading {
  display: flex; align-items: center; gap: 12px;
  font-size: 18px; font-weight: 800;
  font-family: var(--font-head); color: #3C3489;
  margin: 24px 0 14px; padding: 13px 16px;
  background: #fff;
  border: 2px solid var(--cv-purple);
  border-radius: var(--r-sm);
  box-shadow: 0 2px 12px rgba(123,47,247,.14);
}
.level2-heading .sh-text { flex: 1 1 0%; min-width: 0; line-height: 1.4; }
.level2-heading i {
  flex: 0 0 32px; width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--cv-grad); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  box-shadow: 0 2px 6px rgba(123,47,247,.3);
}
.level2-heading:first-child { margin-top: 8px; }
/* L2 が step-card 先頭に来たときの余白調整 */
.step-card > .level2-heading:first-child { margin-top: 4px; }

/* ── L3：小分けの見出し（控えめ・ティール系で L2 と区別）── */
.sub-heading {
  display: flex; align-items: baseline; gap: 11px;
  font-size: 15px; font-weight: 700;
  font-family: var(--font-head); color: #3C3489;
  margin: 22px 0 12px; padding: 12px 16px;
  background: linear-gradient(135deg, #FAF8FF, #F0FBFC);
  border: none;
  border-bottom: 1px solid rgba(123,47,247,.10);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  box-shadow: 0 1px 6px rgba(123,47,247,.06);
}
.sub-heading .sh-text { flex: 1 1 0%; min-width: 0; line-height: 1.4; }
.sub-heading i {
  align-self: center;
  flex: 0 0 30px; width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--cv-grad); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(123,47,247,.25);
}

/* ── details の「クリックで開く」ピルを廃止（＋アイコンがあるので不要）── */
.sum-hint { display: none !important; }
/* summary 右端のシェブロンは残す（開閉の手がかり） */

/* ── 1/3幅での微調整 ── */
@media(max-width:640px) {
  .level2-heading { font-size: 16px; padding: 11px 13px; margin: 20px 0 12px; }
  .level2-heading i { flex-basis: 29px; width: 29px; height: 29px; font-size: 14px; }
  .sub-heading { font-size: 13.5px; padding: 7px 11px; }
  .sub-heading i { flex-basis: 24px; width: 24px; height: 24px; font-size: 12px; }
}

/* v14：details内の画像レイアウトを substep 内と同じ扱いに統一（横幅・余白を揃える）*/
.supplement-body .img-layout {
  background: transparent;
  padding: 0;
  margin: 10px 0;
}
.supplement-body .img-layout .step-img { max-width: 100%; }
/* details内の img-center も substep と同じ 70% 中央に */
.supplement-body .img-center .step-img { width: 70%; max-width: 480px; }
@media(max-width:640px){
  .supplement-body .img-2col-arrow .step-img,
  .supplement-body .img-2col-sm .step-img { max-width: 70%; }
}

/* v14：薄くなりすぎ調整（見えているカードは沈めない＝JS側で制御。沈めるときも控えめに）*/
.step-card.is-dimmed { opacity: .78 !important; }


/* ════════════════════════════════════════════════════════
   v15 追加：左テキスト・右画像レイアウト ＋ note-box を控えめに
   ──────────────────────────────────────────────────────── */

/* ── 左テキスト・右画像（img-side）── */
.img-side {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 10px 0;
}
.img-side-text { flex: 1 1 0%; min-width: 0; }
.img-side-text p { margin: 0; line-height: 1.85; }

/* point-box の装飾はそのまま使い、本文＋小画像を横並びにする派生 */
.point-box-side { align-items: flex-start !important; }
.point-box-side > i { align-self: flex-start !important; margin-top: 2px !important; }
.point-box-side .point-box-side-body {
  flex: 1 1 auto !important; min-width: 0;
  display: flex; align-items: flex-start; gap: 14px;
}
.point-box-side .point-box-side-body .box-text {
  flex: 1 1 0% !important; min-width: 0;
}
.point-box-side-img { flex: 0 0 auto; max-width: 44%; }
.point-box-side-img .step-img {
  width: 100%; max-width: 240px; border-radius: var(--r-sm);
  box-shadow: 0 2px 12px rgba(26,29,46,.12); display: block;
}
@media(max-width:640px) {
  .point-box-side .point-box-side-body { flex-direction: column; align-items: stretch; gap: 10px; }
  .point-box-side-img { max-width: 100%; align-self: center; }
  .point-box-side-img .step-img { max-width: 70%; margin: 0 auto; }
}

/* caution-box：操作ミスしやすい所への「やさしい注意」。
   こわくない程度の赤オレンジ系。テキストが上、その下に画像（2col-arrow等）。 */
.caution-box {
  background: #FDECE7;
  border: 1.5px solid rgba(216,90,48,.45);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin: 10px 0;
  box-shadow: 0 1px 6px rgba(26,29,46,.05);
}
.caution-box-head {
  display: flex; align-items: flex-start; gap: 10px;
}
.caution-box-head > i {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #D85A30; color: #fff; font-size: 14px; line-height: 1;
}
.caution-box-head .box-text {
  flex: 1 1 0%; min-width: 0;
  color: #7A2E14; font-size: 14px; line-height: 1.8;
}
.caution-box .caution-box-img { margin-top: 10px; }

.img-side-img {
  flex: 0 0 auto;
  max-width: 48%;
}
.img-side-img .step-img {
  width: 100%;
  max-width: 260px;
  border-radius: var(--r-sm);
  box-shadow: 0 2px 12px rgba(26,29,46,.12);
}
/* 狭幅（1/3幅）では縦積みに切り替え、画像は中央70% */
@media(max-width:640px) {
  .img-side { flex-direction: column; gap: 10px; }
  .img-side-img { max-width: 100%; align-self: center; }
  .img-side-img .step-img { max-width: 70%; display: block; margin: 0 auto; }
}

/* ── note-box（メモ）を控えめに：薄いグレー・小さめ ──
   hint/point は目立つまま、note だけ「メモ書き程度」に抑えてメリハリ。 */
.note-box {
  background: #F4F5F7 !important;
  border: 1px solid #E2E5EA !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  gap: 9px !important;
  box-shadow: none !important;
}
.note-box > i {
  flex: 0 0 22px !important;
  width: 22px !important; height: 22px !important;
  background: #AEB4BE !important;       /* グレーの丸バッジ＝控えめ */
  font-size: 11px !important;
}
.note-box .box-text {
  font-size: 13px !important;
  color: #5A616B !important;            /* やや淡いテキスト */
  line-height: 1.7 !important;
}
.note-box .box-text strong { color: #3A3F47 !important; }
@media(max-width:640px) {
  .note-box .box-text { font-size: 12.5px !important; }
}


/* ════════════════════════════════════════════════════════
   v16 追加：1/3幅では substep の番号を「上中央」に置き、
   　　　　   テキスト・画像が横幅をフル活用できるようにする
   ──────────────────────────────────────────────────────── */
@media(max-width:640px) {
  .substep {
    flex-direction: column;
    align-items: stretch;       /* body を全幅に */
    gap: 10px;
    padding: 14px 14px 15px;
  }
  /* 番号バッジを上中央に。少し大きめにして節の見出しらしく */
  .substep-num {
    align-self: center;
    width: 34px !important; height: 34px !important;
    font-size: 15px !important;
    margin-top: 0 !important;
    box-shadow: 0 2px 8px rgba(123,47,247,.3);
  }
  .substep-num-done {
    box-shadow: 0 2px 8px rgba(16,185,129,.35);
  }
  /* body は横幅いっぱい */
  .substep-body {
    width: 100%;
    padding: 0 !important;
  }
  /* タイトルは番号の下なので中央寄せにせず左揃えのまま読みやすく */
  .substep-title { text-align: left; }
  /* 上中央番号の直後、タイトルとの間に少し余白 */
  .substep-num + .substep-body,
  .substep-body { margin-top: 0; }
  /* 画像も全幅活用（img-center は従来通り70%だが、ここでは少し広く85%に）*/
  .substep-body .img-center .step-img { width: 85%; }
}

/* v16：note-box の fa-info（細いiグリフ）をバッジ内でバランスよく */
.note-box > i.fa-info { font-size: 12px !important; }


/* ════════════════════════════════════════════════════════
   v17 追加：Canvaを開くボタンを2段ラベルに
   メイン「Canvaを開く」＋サブ「右クリックで新しいウィンドウ」
   ──────────────────────────────────────────────────────── */
.canva-open-btn { align-items: center; gap: 12px; padding: 13px 30px; }
.canva-btn-labels {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  line-height: 1.2;
}
.canva-btn-main { font-size: 17px; font-weight: 800; }
.canva-btn-sub {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.18);
  padding: 2px 8px; border-radius: 999px;
}
.canva-btn-sub i { font-size: 10px; }
.canva-open-btn > i:first-child { font-size: 20px; }
.canva-btn-sub ruby rt { color: rgba(255,255,255,.75); }
@media(max-width:640px) {
  .canva-open-btn { padding: 12px 20px; gap: 10px; }
  .canva-btn-main { font-size: 16px; }
  .canva-btn-sub { font-size: 10px; }
}


/* ════════════════════════════════════════════════════════
   v18 追加：時間表示をヘッダー（nav-right）に配置
   ──────────────────────────────────────────────────────── */
.nav-times {
  display: flex; align-items: center; gap: 10px;
  background: rgba(123,47,247,.06);
  border: 1px solid rgba(123,47,247,.14);
  border-radius: 10px;
  padding: 5px 12px;
}
.nav-time-block { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.nav-time-label { font-size: 9px; font-weight: 700; color: var(--text2); white-space: nowrap; }
.nav-time-label i { font-size: 9px; margin-right: 2px; }
.nav-time-val {
  font-size: 16px; font-weight: 800; font-family: var(--font-head);
  color: var(--cv-purple); letter-spacing: .5px;
}
.nav-time-val.warn   { color: var(--amber); }
.nav-time-val.danger { color: var(--cv-pink, #FF4D6D); }
.nav-time-sep { width: 1px; height: 24px; background: rgba(123,47,247,.18); }

/* 1/3幅：ラベルは出すがコンパクトに（星は元々非表示なので場所は十分） */
@media(max-width:640px) {
  .nav-times { gap: 8px; padding: 4px 10px; }
  .nav-time-val { font-size: 14px; }
  .nav-time-label { font-size: 8px; }
}


/* ════════════════════════════════════════════════════════
   v19 追加：時間を進捗バー右へ（常時表示）＋ヘッダーにTOP導線
   ──────────────────────────────────────────────────────── */

/* 進捗バー＋時間を横並びに */
.prog-row { display: flex; align-items: center; gap: 12px; }
.prog-row .prog-bar { flex: 1 1 auto; }

/* 進捗バー右の時間表示 */
.prog-times {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.prog-time-block { display: flex; align-items: center; gap: 4px; }
.prog-time-label i { font-size: 11px; color: var(--text2); }
.prog-time-val {
  font-size: 14px; font-weight: 800; font-family: var(--font-head);
  color: var(--cv-purple); letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}
.prog-time-val.warn   { color: var(--amber); }
.prog-time-val.danger { color: var(--cv-pink, #FF4D6D); }
.prog-time-sep { width: 1px; height: 16px; background: rgba(123,47,247,.2); }

/* ヘッダーの TOP（一覧へ）導線 */
.nav-top-link {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none;
  background: rgba(123,47,247,.08);
  border: 1px solid rgba(123,47,247,.2);
  color: var(--cv-purple);
  font-size: 13px; font-weight: 700; font-family: var(--font-head);
  padding: 7px 14px; border-radius: 999px;
  transition: all .2s ease;
}
.nav-top-link:hover {
  background: var(--cv-purple); color: #fff;
  border-color: var(--cv-purple);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(123,47,247,.3);
}
.nav-top-link i { font-size: 13px; }

/* 1/3幅の調整 */
@media(max-width:640px) {
  .prog-row { gap: 9px; }
  .prog-times { gap: 6px; }
  .prog-time-val { font-size: 13px; }
  .prog-time-label i { font-size: 10px; }
  /* 狭幅では「一覧へ」テキストを省略しアイコンのみ */
  .nav-top-text { display: none; }
  .nav-top-link { padding: 7px 11px; }
}

/* v19：img-side で画像の枠線（影）を消すバリエーション */
.img-side-noshadow .img-side-img .step-img { box-shadow: none; border: none; border-radius: var(--r-sm); }

/* v19：img-side-noshadow（スナップ説明イメージ）は画像を小さめに */
.img-side-noshadow .img-side-img { max-width: 40%; }
.img-side-noshadow .img-side-img .step-img { max-width: 200px; }
@media(max-width:640px) {
  .img-side-noshadow .img-side-img .step-img { max-width: 60%; }
}


/* ════════════════════════════════════════════════════════
   v20 追加：search-demo を Canva の検索ボックス風に
   白背景・うすいグレー枠・角丸・黒い虫メガネ
   ──────────────────────────────────────────────────────── */
.search-demo {
  background: #fff !important;
  border: 1.5px solid #E2E5EA !important;
  border-radius: 12px !important;
  color: #3A3F47 !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
  padding: 12px 14px !important;
}
/* 虫メガネは黒（濃いグレー）に */
.search-demo > i.fa-magnifying-glass {
  color: #3A3F47 !important;
}
/* 検索ワードのテキスト */
.search-demo > span { flex: 1 1 auto; color: #3A3F47; }

/* コピーボタンは紫のまま（押せる操作だと分かるように）少し目立たせる */
.copy-btn {
  background: var(--cv-grad) !important;
  color: #fff !important;
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════
   v21 追加：2col画像のレスポンシブ段階を再設計
   ・641px以上     ：横並び（arrowは横）
   ・541〜640px    ：横並びを維持（1/3表示でも2カラム）
   ・540px以下     ：すべて縦積み（arrowは下向き）
   過去の「640px以下で縦積み」を打ち消す。
   ──────────────────────────────────────────────────────── */

/* --- 541〜640px：横並びを強制（旧640px縦積みの打ち消し）--- */
@media(min-width:541px) and (max-width:640px) {
  .img-2col-sm {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    justify-items: stretch !important;
  }
  .img-2col-sm .step-img { width: 100% !important; max-width: 100% !important; }

  .img-2col-arrow {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .img-2col-arrow .step-img { width: auto !important; max-width: 100% !important; flex: 1 1 0% !important; }
  /* arrowは横向き（横にすっすっ動く） */
  .img-2col-arrow .img-arrow-icon {
    animation: arrowNudge 1.4s ease-in-out infinite !important;
  }
  /* details内も横並び維持 */
  .supplement-body .img-2col-arrow .step-img,
  .supplement-body .img-2col-sm .step-img { max-width: 100% !important; }
}

/* --- 540px以下：すべて縦積み（上下）、arrowは下向き --- */
@media(max-width:540px) {
  .img-2col-sm {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    justify-items: center !important;
  }
  .img-2col-sm .step-img { width: 70% !important; max-width: 480px !important; }

  .img-2col-arrow {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .img-2col-arrow .step-img { width: 70% !important; max-width: 480px !important; flex: 0 0 auto !important; }
  /* arrowは下向き（回転＋下に動く。回転はkeyframe側で保持） */
  .img-2col-arrow .img-arrow-icon {
    animation: arrowNudgeV 1.4s ease-in-out infinite !important;
  }
  .supplement-body .img-2col-arrow .step-img,
  .supplement-body .img-2col-sm .step-img { max-width: 70% !important; }
}

/* v21：arrowNudgeV をトップレベルにも定義（メディアクエリ外から参照するため）*/
@keyframes arrowNudgeV {
  0%,100% { transform: rotate(90deg) translateX(0); }
  50%     { transform: rotate(90deg) translateX(4px); }
}


/* ════════════════════════════════════════════════════════
   v22 追加：img-center の一回り小さい 50%版（img-center-sm）
   ──────────────────────────────────────────────────────── */
.img-center-sm { display: flex; justify-content: center; }
.img-center-sm .step-img { width: 50% !important; max-width: 340px !important; }
/* substep内・details内でも 50% を維持（既存の85%/70%上書きに勝つ）*/
.substep-body .img-center-sm .step-img { width: 50% !important; }
.supplement-body .img-center-sm .step-img { width: 50% !important; max-width: 340px !important; }
/* 1/3幅では少し広げて見やすく（60%）*/
@media(max-width:640px) {
  .img-center-sm .step-img { width: 60% !important; }
  .substep-body .img-center-sm .step-img { width: 60% !important; }
}


/* ════════════════════════════════════════════════════════
   v23 追加：「できた!」ボタンを押したくなる仕掛け
   ・横幅を内容ぶんに（見出しに見えないボタンらしさ）
   ・星アイコンを追加
   ・そのグループを最後まで見たら .btn-attention で弾む＋光る
   ・指アイコンが「ここ押して」とちょんちょん指す
   ──────────────────────────────────────────────────────── */

/* ボタンを内容幅に。最大幅を設けて全幅＝見出し化を防ぐ */
.btn-wrap { align-items: center !important; }
.sec-check-btn {
  max-width: 300px !important;
  width: auto !important;
}
@media(max-width:640px) {
  .sec-check-btn { max-width: 300px !important; width: auto !important; padding: 14px 28px !important; }
}

/* ボタン内の星アイコン（押すとプログレスの星が光る、を予感させる）*/
.sec-check-btn .btn-star { font-size: 15px; }

/* ── 注目アニメ：最後まで見たら弾む＋光る ── */
@keyframes btnAttention {
  0%, 100% { transform: translateY(0) scale(1); }
  15%      { transform: translateY(-7px) scale(1.05); }
  30%      { transform: translateY(0) scale(1); }
  42%      { transform: translateY(-4px) scale(1.03); }
  55%      { transform: translateY(0) scale(1); }
}
@keyframes btnGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(255,143,0,.42), 0 1px 4px rgba(0,0,0,.12); }
  50%      { box-shadow: 0 6px 30px rgba(255,143,0,.75), 0 0 0 4px rgba(255,179,0,.25); }
}
.sec-check-btn.btn-attention:not(:disabled) {
  animation: btnAttention 1.6s ease-in-out 1, btnGlow 1.8s ease-in-out infinite;
}
/* challenge（レッド）用のグロー */
@keyframes btnGlowRed {
  0%, 100% { box-shadow: 0 4px 20px rgba(229,57,53,.45), 0 1px 4px rgba(0,0,0,.12); }
  50%      { box-shadow: 0 6px 30px rgba(229,57,53,.8), 0 0 0 4px rgba(255,82,82,.25); }
}
.sec-check-btn.challenge-btn.btn-attention:not(:disabled) {
  animation: btnAttention 1.6s ease-in-out 1, btnGlowRed 1.8s ease-in-out infinite;
}

/* ── 指アイコン：ボタンの上で「ここ押して」とちょんちょん ── */
.btn-wrap { position: relative; flex-direction: column; gap: 0; }
.btn-poke {
  display: none;
  font-size: 22px;
  color: var(--amber);
  margin-bottom: 4px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
  animation: pokeBounce 1s ease-in-out infinite;
}
.btn-wrap.show-poke .btn-poke { display: block; }
@keyframes pokeBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}
/* 「ここを押そう！」の吹き出しラベル */
.btn-poke-label {
  display: none;
  font-size: 12px; font-weight: 800; color: var(--amber);
  font-family: var(--font-head);
  margin-bottom: 2px;
}
.btn-wrap.show-poke .btn-poke-label { display: block; }

@media(prefers-reduced-motion: reduce) {
  .sec-check-btn.btn-attention:not(:disabled),
  .btn-poke { animation: none !important; }
}


/* ════════════════════════════════════════════════════════
   v24 追加：チャレンジの作例ギャラリー（画像＋工夫ポイント）
   ──────────────────────────────────────────────────────── */
.example-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0;
}
.ex-card {
  background: #fff;
  border: 1.5px solid rgba(123,47,247,.15);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(26,29,46,.07);
  display: flex; flex-direction: column;
}
.ex-card .step-img {
  width: 100%; margin: 0; border: none; border-radius: 0;
  box-shadow: none; display: block;
}
.ex-cap { padding: 10px 12px; }
.ex-cap-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 800;
  font-family: var(--font-head); color: var(--cv-purple);
  margin-bottom: 5px;
}
.ex-cap-title i { color: var(--amber); font-size: 13px; }
.ex-cap-text { font-size: 12.5px; line-height: 1.6; color: var(--text2); }

/* 狭幅では縦積み */
@media(max-width:640px) {
  .example-gallery { grid-template-columns: 1fr; gap: 14px; }
  .ex-cap-title { font-size: 14px; }
  .ex-cap-text { font-size: 13px; }
}


/* ════════════════════════════════════════════════════════
   v25 追加：できたボタン拡大＋改行禁止 / ロゴ / details差別化 / 画像余白
   ──────────────────────────────────────────────────────── */

/* ── ① できた!ボタン：大きく・改行させない ── */
.sec-check-btn {
  max-width: none !important;
  width: auto !important;
  white-space: nowrap !important;
  font-size: 19px !important;
  padding: 18px 46px !important;
}
.sec-check-btn .btn-star { font-size: 18px; }
@media(max-width:640px) {
  .sec-check-btn {
    max-width: 94% !important;
    white-space: nowrap !important;
    font-size: 17px !important;
    padding: 17px 28px !important;
  }
}

/* ── ② ヘッダーの講座名をグラデのロゴ風に ── */
.course-logo {
  background: var(--cv-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 900 !important;
  font-family: var(--font-head);
  letter-spacing: .2px;
}
.course-logo i {
  -webkit-text-fill-color: var(--cv-purple);   /* アイコンは塗りを戻す */
  color: var(--cv-purple);
}
/* ルビ（こうざ等）はグラデ転写で透明になるため塗りを戻す。
   「講座」本体はグラデ終点（水色）付近なので、ルビも水色に合わせる */
.course-logo ruby rt {
  -webkit-text-fill-color: var(--cv-teal);
  color: var(--cv-teal);
}

/* ── ③ 展開（details）を「押せるボタン」と分かるデザインに ──
   note/hint/point と違い、summary に色面＋「ひらく」ピル＋＋アイコン */
.supplement-card {
  border: 2px solid rgba(123,47,247,.28) !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(123,47,247,.08);
}
.supplement-card > summary {
  background: linear-gradient(135deg, rgba(123,47,247,.10), rgba(0,196,204,.08)) !important;
  padding: 12px 16px 12px 52px !important;   /* 左16px余白＋バッジ＋間隔 */
  position: relative;
}
.supplement-card > summary::before {
  content: '\f067';                 /* fa-plus */
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cv-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  box-shadow: 0 2px 6px rgba(123,47,247,.3);
}
.supplement-card[open] > summary::before { content: '\f068'; }   /* fa-minus */
.supplement-card[open] > summary {
  background: linear-gradient(135deg, rgba(123,47,247,.16), rgba(0,196,204,.12)) !important;
}
/* 右端に「ひらく/とじる」ピル */
.supplement-card > summary::after {
  content: 'ひらく';
  font-family: var(--font-head);
  font-weight: 800; font-size: 11px;
  color: var(--cv-purple);
  background: #fff;
  border: 1px solid rgba(123,47,247,.3);
  border-radius: 999px;
  padding: 2px 10px;
  margin: 0 auto 0 0;
  flex: 0 0 auto;
  order: 3;
  transform: none !important;
  opacity: 1 !important;
  align-self: flex-start;
  flex-shrink: 0;
}
.supplement-card > summary::before { order: 0; }
.supplement-card[open] > summary::after { content: 'とじる'; }
/* 見出しが長く折り返すときは「ひらく」を次の行の右へ落とす */
.supplement-card > summary { row-gap: 6px; }

/* ── ④ details内の画像の左右余白を揃える（はみ出し防止）── */
.supplement-body { padding: 14px 16px 16px !important; box-sizing: border-box; }
.supplement-body .img-layout { margin-left: 0; margin-right: 0; max-width: 100%; }
.supplement-body .img-side { gap: 14px; }
.supplement-body .step-img { max-width: 100%; }


/* ════════════════════════════════════════════════════════
   v26 追加：スナップ説明（img-side-noshadow）は
   　　　　   100%でも1/3でも常にテキスト左・画像右の横並びを維持
   v27 調整：画像を一回り小さく＋上端をテキストにそろえ、
   　　　　   テキスト上に余白が出ないようにする
   ──────────────────────────────────────────────────────── */
.img-side-noshadow {
  flex-direction: row !important;   /* 縦積みにしない */
  align-items: flex-start !important;  /* 上端そろえ（上の余白防止）*/
  gap: 12px !important;
}
.img-side-noshadow .img-side-img {
  max-width: 38% !important;
  align-self: flex-start !important;
}
.img-side-noshadow .img-side-img .step-img {
  width: 100% !important;
  max-width: 165px !important;       /* 220→165：一回り小さく */
  margin: 0 !important;
  display: block !important;
}
/* 1/3幅ではもう少し画像を小さく（横並びは維持）*/
@media(max-width:640px) {
  .img-side-noshadow .img-side-img { max-width: 36% !important; }
  .img-side-noshadow .img-side-img .step-img { max-width: 140px !important; }
}
@media(max-width:540px) {
  .img-side-noshadow .img-side-img .step-img { max-width: 140px !important; }
}


/* ════════════════════════════════════════════════════════
   v27 追加：できたかな？ラベル拡大／下向き指／ボタンとの間隔
   ──────────────────────────────────────────────────────── */
/* ラベルを大きく */
.btn-poke-label {
  font-size: 15px !important;
  margin-bottom: 4px !important;
  color: var(--amber) !important;
}
/* 下向き指：少し大きく、下にマージンを取ってボタンと被らない */
.btn-poke {
  font-size: 26px !important;
  margin-bottom: 12px !important;   /* ボタンとの間隔 */
  animation: pokeBounceDown 1s ease-in-out infinite !important;
}
/* 下向きにちょんちょん（下方向に動く）*/
@keyframes pokeBounceDown {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@media(prefers-reduced-motion: reduce) {
  .btn-poke { animation: none !important; }
}


/* ════════════════════════════════════════════════════════
   v28→修正：展開ボタンは閉じても開いても同じ幅（全幅）
   ・幅を絞らない＝「ひらく」が常に右端に来る
   ──────────────────────────────────────────────────────── */
.supplement-card,
.supplement-card:not([open]),
.supplement-card[open] {
  max-width: none;
  width: auto;
}


/* ════════════════════════════════════════════════════════
   v29 追加：進行前（画面外・先）のコンテンツを「白く薄く」→「暗く」
   ・opacity（白っぽく薄く）をやめ、brightnessで暗くする
   ・うっすら暗め（読める程度）／対象は画面外・先のものだけ（JS制御済み）
   ──────────────────────────────────────────────────────── */
.step-card.is-dimmed {
  opacity: 1 !important;                /* 透明化はやめる */
  filter: brightness(.82) saturate(.92);/* うっすら暗め */
  transition: filter .3s ease;
}
/* 現在地カードは常に明るく（念のため明示）*/
.step-card.is-current {
  filter: none !important;
}


/* ════════════════════════════════════════════════════════
   v30 追加：カード個別の暗化をやめ、「未完了領域」を面のグラデで暗く
   ──────────────────────────────────────────────────────── */
/* v29のカード個別暗化を無効化（まだら模様をやめる）*/
.step-card.is-dimmed {
  filter: none !important;
  opacity: 1 !important;
}

/* 未完了領域を覆うグラデオーバーレイ（guide-panel基準でfixed）*/
#progress-veil {
  position: fixed;
  left: 0; right: 0;
  pointer-events: none;        /* 下のコンテンツは操作できる（飛ばせはする）*/
  z-index: 5;
  /* 均一な暗さ（グラデなし）で「ここから下はまだ」をはっきり示す */
  background: rgba(38, 33, 64, 0.34);
  opacity: 0;
  transition: opacity .3s ease, top .25s ease;
}
#progress-veil.show { opacity: 1; }

/* v28：グループ外(sec-wrap直下)に置かれた補足detailsを
   step-cardの内側余白と左右を揃える（card自体に明示） */
.standalone-supplement { margin: 0; }
.standalone-supplement > .supplement-card {
  margin-left: 16px !important;
  margin-right: 16px !important;
}
@media(min-width:641px) {
  .standalone-supplement > .supplement-card {
    margin-left: 26px !important;
    margin-right: 26px !important;
  }
}


/* ════════════════════════════════════════════════════════
   v31 追加：note-box内に「左テキスト・右画像」を配置するパターン
   ──────────────────────────────────────────────────────── */
.note-box-img { align-items: flex-start !important; }
.note-box-img > i { align-self: flex-start !important; margin-top: 2px !important; }
.note-img-body {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.note-img-body .box-text { flex: 1 1 0%; min-width: 0; }
.note-img {
  flex: 0 0 auto;
  width: 38%;
  max-width: 200px;
  border-radius: 8px;
  display: block;
}
/* 狭幅（1/3幅）でも左右を維持。画像は小さめにして横並びを保つ */
@media(max-width:640px) {
  .note-img-body { flex-direction: row; align-items: flex-start; gap: 8px; }
  .note-img { width: 38%; max-width: 150px; align-self: flex-start; }
}

/* hint/note/point-box が note-img を直接子に持つ場合は上揃え（中央揃えの!important上書きを覆す）。
   box-text と画像を左右に並べ、アイコン・テキスト・画像すべて上端そろえにする。 */
.note-box:has(> .note-img),
.hint-box:has(> .note-img),
.point-box:has(> .note-img) { align-items: flex-start !important; }
.note-box:has(> .note-img) > i,
.hint-box:has(> .note-img) > i,
.point-box:has(> .note-img) > i { align-self: flex-start !important; margin-top: 2px !important; }
.hint-box > .note-img,
.note-box > .note-img,
.point-box > .note-img { align-self: flex-start !important; margin-left: 4px; }
/* :has 非対応ブラウザ向けフォールバック：明示クラスでも同じ挙動 */
.hint-box-img, .note-box-img, .point-box-img { align-items: flex-start !important; }
.hint-box-img > i, .note-box-img > i, .point-box-img > i { align-self: flex-start !important; margin-top: 2px !important; }
.hint-box-img > .note-img, .note-box-img > .note-img, .point-box-img > .note-img { align-self: flex-start !important; margin-left: 4px; }

/* v31：フッター★をクリック可能に（押し忘れ箇所へジャンプ）*/
.inst-star { cursor: pointer; }
.inst-star:hover { transform: scale(1.25); color: var(--gold-lit); }
.inst-star:not(.lit):hover { color: rgba(255,210,63,.6); }   /* 未完了はうっすら金色プレビュー */


/* ════════════════════════════════════════════════════════
   v34→v35：veilシャッター演出（横帯がパタパタ開く・突破感）
   ──────────────────────────────────────────────────────── */
.veil-slat {
  position: fixed;
  z-index: 6;
  pointer-events: none;
  background: rgba(38, 33, 64, 0.34);   /* veilと同色 */
  transform-origin: top center;          /* 上端を軸にパタッと開く */
  backface-visibility: hidden;
  animation: veilSlat .5s cubic-bezier(.5,.0,.4,1) forwards;
}
@keyframes veilSlat {
  0%   { transform: perspective(600px) rotateX(0deg);   opacity: 1; }
  60%  { transform: perspective(600px) rotateX(-78deg); opacity: 1; }
  100% { transform: perspective(600px) rotateX(-95deg); opacity: 0; }
}
/* 帯が開く瞬間、下端を走る光のフラッシュ（紫×水色）*/
.veil-slat-flash {
  position: fixed;
  z-index: 7;
  pointer-events: none;
  height: 4px;
  background: linear-gradient(90deg,
    rgba(123,47,247,0) 0%,
    rgba(123,47,247,.95) 22%,
    rgba(0,196,204,1) 50%,
    rgba(123,47,247,.95) 78%,
    rgba(123,47,247,0) 100%);
  box-shadow: 0 0 18px rgba(0,196,204,.9), 0 0 8px rgba(123,47,247,.85);
  border-radius: 2px;
  opacity: 0;
  animation: veilSlatFlash .5s ease-out forwards;
}
@keyframes veilSlatFlash {
  0%   { opacity: 0; transform: scaleX(.6); }
  30%  { opacity: 1; transform: scaleX(1); }
  70%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
@media(prefers-reduced-motion: reduce) {
  .veil-slat, .veil-slat-flash { animation-duration: .01s !important; }
}


/* ════════════════════════════════════════════════════════
   v33 追加：UDフォントの字間・行間をゆったりさせて読みやすく
   ──────────────────────────────────────────────────────── */
/* 全体の基本字間を少し広げる */
body, .guide-content {
  letter-spacing: .04em;
}
/* 本文系：字間＋行間をゆったり */
.step-desc, .substep-desc, .substep-title, .box-text,
.note-img-body .box-text, .supplement-body p, .comp-msg,
.intro-text, .lesson-desc {
  letter-spacing: .05em;
  line-height: 1.95;
}
/* 見出し・ボタン・UI：字間を少し広げる（行間は詰めめ維持）*/
.sec-name, .level2-heading .sh-text, .sub-heading .sh-text,
.sec-check-btn, .course-logo, .lesson-title, .intro-title,
.supplement-card > summary, .comp-title {
  letter-spacing: .06em;
}


/* ════════════════════════════════════════════════════════
   v36 追加：remember-box（必ず覚えてほしい注意・オレンジ系で目立たせる）
   ──────────────────────────────────────────────────────── */
.remember-box {
  margin: 14px 0;
  border: 2px solid var(--amber, #FF8F00);
  border-radius: 12px;
  background: linear-gradient(135deg, #FFF8E8, #FFEFD6);
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(255,143,0,.18);
}
.remember-head {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #FFB300, #FF8F00);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  padding: 10px 14px;
  letter-spacing: .04em;
}
.remember-head i { font-size: 16px; }
.remember-body {
  padding: 12px 14px 14px;
}
.remember-body .box-text {
  display: block;
  font-size: 14px;
  line-height: 1.9;
  color: #5a4527;
  letter-spacing: .04em;
}
.remember-body .box-text strong { color: #C75B00; }
.remember-body .box-text i { color: #FF8F00; }
@media(max-width:640px) {
  .remember-head { font-size: 14px; }
  .remember-body .box-text { font-size: 13.5px; }
}


/* ════════════════════════════════════════════════════════
   v37 追加：parts-grid（削除対象イラストの一覧・薄グレー背景で透過PNGを見やすく）
   ──────────────────────────────────────────────────────── */
.parts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.parts-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: #EEF0F3;                  /* 薄いグレー（透過PNGが見やすい）*/
  border: 1px solid rgba(123,47,247,.12);
  border-radius: 10px;
  padding: 8px 4px 6px;
}
.parts-item img {
  width: 100%;
  max-width: 60px;
  height: 56px;
  object-fit: contain;
  display: block;
}
.parts-item span {
  font-size: 11px;
  color: var(--text2);
  text-align: center;
  line-height: 1.4;
  font-weight: 500;
}
/* 1/3幅では2列に */
@media(max-width:640px) {
  .parts-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .parts-item { padding: 7px 3px 5px; }
  .parts-item img { max-width: 100%; height: 44px; }
  .parts-item span { font-size: 10.5px; }
}
@media(max-width:480px) {
  .parts-grid { grid-template-columns: repeat(3, 1fr); }
  .parts-item img { height: 48px; }
}

/* img-2col-arrow.force-col：横幅の違う画像が並ぶ箇所用。
   ・ウィンドウいっぱい（広い）→ 横並び＋高さ揃え（固定高さで揃える）
   ・1/3スナップ（680px以下）→ 縦並び */
.img-2col-arrow.force-col {
  align-items: center !important;     /* 矢印を縦中央に */
}
.img-2col-arrow.force-col .step-img {
  height: 210px !important;           /* 2枚とも同じ高さに固定 → 高さが揃う */
  width: auto !important;             /* 幅は縦横比に応じて可変 */
  max-width: 46% !important;          /* 幅が広がりすぎないように */
  object-fit: contain !important;
  flex: 0 1 auto !important;
}
.img-2col-arrow.force-col .img-arrow-icon {
  align-self: center !important;      /* 矢印は中央固定 */
  flex: 0 0 auto !important;
}
@media(max-width:680px) {
  .img-2col-arrow.force-col {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .img-2col-arrow.force-col .step-img {
    width: 70% !important;
    max-width: 420px !important;
    height: auto !important;          /* 縦並びでは高さ固定を解除 */
    object-fit: contain !important;
    flex: 0 0 auto !important;
  }
  .img-2col-arrow.force-col .img-arrow-icon {
    animation: arrowNudgeV 1.4s ease-in-out infinite !important;
  }
}

/* force-col-tall：縦長画像を横並びで大きく見せる派生。
   高さ固定を外し、幅基準で各画像をカード内いっぱいに広げる。 */
.img-2col-arrow.force-col.force-col-tall .step-img {
  height: auto !important;            /* 高さ固定を解除 */
  width: auto !important;
  max-width: 47% !important;          /* 2枚＋矢印で横いっぱい */
  max-height: none !important;
  flex: 1 1 0% !important;
  object-fit: contain !important;
}
@media(max-width:680px) {
  /* 1/3スナップでは通常のforce-col同様、縦並びで大きく */
  .img-2col-arrow.force-col.force-col-tall .step-img {
    width: 80% !important;
    max-width: 420px !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }
}


/* ════════════════════════════════════════════════════════
   v38 追加：note-box-block（アイコン＋本文＋画像を収める注意ボックス）
   ──────────────────────────────────────────────────────── */
.note-box-block { align-items: flex-start !important; }
.note-block-body { flex: 1 1 0%; min-width: 0; }
.note-block-body .box-text { display: block; }
.note-block-body .img-layout { margin-top: 10px; margin-bottom: 0; }
.note-block-body .img-center .step-img { width: 85%; max-width: 360px; }
@media(max-width:640px) {
  .note-block-body .img-center .step-img { width: 92%; }
}


/* ════════════════════════════════════════════════════════
   v39 追加：summary内のルビ位置を揃える（「いろ」が下がる問題の修正）
   ──────────────────────────────────────────────────────── */
.supplement-card > summary ruby {
  ruby-align: center;
  vertical-align: baseline;
}
.supplement-card > summary ruby rt {
  font-size: 0.5em;
  line-height: 1;
}
/* flexの子としてのテキスト全体を下端ではなくベースラインで揃える */
.supplement-card > summary {
  align-items: baseline;
  flex-wrap: wrap;
  row-gap: 6px;
}
/* ただしアイコンとhintはbaselineだと崩れるので個別にセンター寄せ */
.supplement-card > summary > i { align-self: center; }
/* 見出しが長いとき「ひらく」ピルを次の行の左端へ確実に落とす */
.supplement-card > summary .sum-hint {
  margin-left: 0 !important;
  flex-basis: 100%;
  order: 3;
  width: fit-content;
  align-self: flex-start !important;
}
.supplement-card > summary .sum-hint { align-self: center; }
.supplement-card > summary::before { align-self: center; }
.supplement-card > summary::after { align-self: flex-start; }


/* ════════════════════════════════════════════════════════
   v40 追加：ルビが入ると文字が下に沈む問題の修正（ch-item等）
   align-items:center のflex内で、ルビ付き文字のベースラインを揃える
   ──────────────────────────────────────────────────────── */
.ch-item {
  align-items: baseline;       /* ルビ付き文字とアイコンのベースラインを揃える */
}
.ch-item i {
  align-self: center;          /* アイコンだけは中央に保つ */
}
.ch-item ruby {
  vertical-align: baseline;
  ruby-align: center;
}
.ch-item ruby rt {
  font-size: 0.5em;
  line-height: 1;
}
.ch-item .nowrap { white-space: nowrap; }


/* ════════════════════════════════════════════════════════
   v41 追加：今日のまとめ（summary-list）
   ──────────────────────────────────────────────────────── */
.summary-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 14px 0 4px;
}
.summary-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 6px;
  border-bottom: 1px solid rgba(123,47,247,.10);
}
.summary-item:last-child { border-bottom: none; }
.summary-icon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--cv-grad);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  box-shadow: 0 3px 10px rgba(123,47,247,.25);
}
.summary-body { flex: 1 1 0%; min-width: 0; }
.summary-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  letter-spacing: .04em;
  margin-bottom: 3px;
}
.summary-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text2);
  letter-spacing: .03em;
}
@media(max-width:640px) {
  .summary-item { gap: 10px; padding: 11px 2px; }
  .summary-icon { width: 34px; height: 34px; font-size: 14px; }
  .summary-title { font-size: 14px; }
  .summary-desc { font-size: 12.5px; }
}


/* ════════════════════════════════════════════════════════
   v42 追加：ルビが入ると文字が下がる問題の全体修正
   アイコン＋ルビ付きテキストが横並びの見出し/ラベルで、
   テキストのベースラインを揃え、アイコンは中央維持する。
   ──────────────────────────────────────────────────────── */
.level2-heading,
.point-box, .hint-box, .note-box,
.remember-head,
.ex-cap-title,
.method-fallback-title,
.canva-open-btn, .open-canva-btn, .canva-btn-sub,
.feature-label, .intro-label,
.summary-title {
  align-items: baseline;
}
/* これらの中のアイコン・バッジは中央維持（baselineだと上にずれるため）*/
.level2-heading > i,
.point-box > i, .hint-box > i, .note-box > i,
.remember-head > i,
.ex-cap-title > i,
.method-fallback-title > i,
.canva-open-btn > i, .open-canva-btn > i,
.feature-label > i, .intro-label > i {
  align-self: center;
}
/* ルビ付きテキスト共通：ベースライン揃え＋rtを小さく */
.level2-heading ruby, .point-box ruby, .hint-box ruby, .note-box ruby,
.remember-head ruby, .ex-cap-title ruby, .summary-title ruby,
.sub-heading ruby, .summary-desc ruby {
  vertical-align: baseline;
}
.ch-item ruby { vertical-align: baseline; }
.level2-heading ruby rt, .point-box ruby rt, .hint-box ruby rt, .note-box ruby rt,
.remember-head ruby rt, .ex-cap-title ruby rt, .summary-title ruby rt,
.sub-heading ruby rt, .ch-item ruby rt, .summary-desc ruby rt {
  font-size: 0.5em;
  line-height: 1;
}



/* ════════════════════════════════════════════════════════
   v45 追加：sub-heading と直後の手順の隙間を詰めて一体感を出す
   （枠で囲わず、マージンだけ詰める。左右はstep-cardのpaddingに任せる）
   ──────────────────────────────────────────────────────── */
.sub-heading {
  margin-bottom: 0 !important;
  border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
}
.sub-heading + .substep-list,
.sub-heading + .step-desc,
.sub-heading + p {
  margin-top: 0 !important;
  padding-top: 12px;
}
/* substep-list内の最初のsubstepの上余白も詰める */
.sub-heading + .substep-list > .substep:first-child {
  margin-top: 0;
}

/* ════════════════════════════════════════════════════════
   v46 追加：見出しをsubstepカードの中にヘッダーとして埋め込む
   （帯を独立要素にせず、最初の手順カードと一体化。隙間が出ない）
   ──────────────────────────────────────────────────────── */
.substep.substep-has-head {
  flex-wrap: wrap;          /* card-headを全幅で上に、その下に番号＋body */
  padding-top: 0;           /* ヘッダーをカード上端にぴったり付ける */
  overflow: hidden;
}
.substep-card-head {
  flex: 0 0 calc(100% + 30px);   /* カード左右padding(15px×2)ぶん広げる */
  margin-left: -15px;            /* 左に15px寄せて左端を合わせる（右は幅で合う）*/
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 11px;
  padding: 12px 16px;
  box-sizing: border-box;
  font-size: 15px; font-weight: 700;
  font-family: var(--font-head); color: #3C3489;
  background: linear-gradient(135deg, #FAF8FF, #F0FBFC);
  border-bottom: 1px solid rgba(123,47,247,.12);
}
.substep-card-head i {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--cv-grad); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.substep-card-head ruby rt { font-size: 0.5em; }
/* カード見出し直下の説明文（その機能のかんたんな説明） */
.substep-card-note {
  flex: 0 0 100%;
  margin: -4px 0 12px;
  font-size: 13.5px; line-height: 1.8; color: var(--text2);
}
/* has-headのカードは上のpaddingをheadが担うので、番号とbodyは通常通り */
.substep.substep-has-head > .substep-num { margin-top: 0; }

/* ════════════════════════════════════════════════════════
   v47 追加：sec-header に所要時間バッジ
   ──────────────────────────────────────────────────────── */
.sec-time {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}
.sec-time i { font-size: 11px; opacity: .9; }
@media(max-width:640px) {
  .sec-time { font-size: 11px; padding: 4px 9px; gap: 4px; }
}

/* ════════════════════════════════════════════════════════
   v48 追加：チャレンジのサンプル2カテゴリ（ためしてみよう / ほんかくアレンジ）
   ──────────────────────────────────────────────────────── */
.sample-group {
  margin: 16px 0;
  border-radius: var(--r-md, 16px);
  overflow: hidden;
}
.sample-group.group-easy {
  border: 2px solid rgba(0,180,140,.28);
  background: rgba(43,196,160,.04);
}
.sample-group.group-pro {
  border: 2px solid rgba(229,57,53,.30);
  background: rgba(229,57,53,.04);
}
.sample-group-head {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 15px;
  margin-bottom: 0;
}
.sample-group-head.sample-easy {
  background: linear-gradient(135deg, #E8F7F0, #DFF3FF);
  border-bottom: 1px solid rgba(0,180,140,.2);
}
.sample-group-head.sample-pro {
  background: linear-gradient(135deg, #FFEBEE, #FFE0E6);
  border-bottom: 1px solid rgba(229,57,53,.22);
}
.sample-group > .example-gallery {
  padding: 13px 14px;
  margin: 0;
}
.sample-group-icon {
  flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px;
}
.sample-easy .sample-group-icon { background: linear-gradient(135deg, #2BC4A0, #00A6C4); }
.sample-pro .sample-group-icon  { background: linear-gradient(135deg, #F4511E, #E53935); }
.sample-group-text { flex: 1 1 0%; min-width: 0; }
.sample-group-title {
  font-family: var(--font-head); font-weight: 800;
  font-size: 15px; color: #2A2550; letter-spacing: .04em;
}
.sample-easy .sample-group-title { color: #0C7A5E; }
.sample-pro .sample-group-title { color: #C62828; }
.sample-group-sub {
  font-size: 12px; color: var(--text2); line-height: 1.6; margin-top: 2px;
}
.sample-group-sub ruby rt { font-size: 0.5em; }

/* ════════════════════════════════════════════════════════
   v49 追加：ルビの統一正規化（最終）
   ・文字が下がる問題：ruby を baseline 揃え、rt の行送りを0に
   ・左右の空き：ruby-align を複数指定（ブラウザ差吸収）、rt のはみ出し許可
   ──────────────────────────────────────────────────────── */
ruby {
  ruby-align: center;
  ruby-position: over;
  vertical-align: baseline;     /* 行内で沈まないようベースライン基準 */
  line-height: 1;
}
rt {
  ruby-align: center;
  line-height: 1;
  white-space: nowrap;          /* ふりがなを折り返さない */
  text-align: start;
}
/* flex/grid内のテキストでルビが沈むのを防ぐ共通ルール：
   ルビを含みうる見出し・ラベルはベースライン揃え、アイコンは中央 */
.level2-heading, .sub-heading, .substep-card-head,
.ch-item, .summary-title, .summary-item,
.point-box, .hint-box, .note-box, .remember-head,
.ex-cap-title, .sample-group-head, .sec-name {
  align-items: baseline;
}
.level2-heading > i, .sub-heading > i, .substep-card-head > i,
.ch-item > i, .point-box > i, .hint-box > i, .note-box > i,
.remember-head > i, .ex-cap-title > i, .sample-group-head > .sample-group-icon {
  align-self: center;
}
/* 付箋（アイデアのひきだし）は折返し時もアイコンを縦中央に保つ。
   上の baseline 指定（ルビ沈み対策）より具体度を上げて上書き。 */
.challenge-items .ch-item { align-items: center; }
.challenge-items .ch-item > i { align-self: center; }

/* ════════════════════════════════════════════════════════
   v50 追加：動画ヘッダー・できたボタンのルビ沈み修正
   ──────────────────────────────────────────────────────── */
.video-wrap-header {
  align-items: baseline;
}
.video-wrap-header > i,
.video-wrap-header .vw-tag {
  align-self: center;
}
.sec-check-btn {
  align-items: baseline !important;
}
.sec-check-btn > i,
.sec-check-btn .btn-star {
  align-self: center;
}
.sec-check-btn ruby { vertical-align: baseline; }

/* ════════════════════════════════════════════════════════
   v51 追加：完了モーダルの導線変更
   ・×（右上で閉じる）・トップへ戻る（メイン）・次の回へ（控えめサブ）
   ──────────────────────────────────────────────────────── */
.comp-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.05); border: none; border-radius: 50%;
  color: var(--text2); font-size: 18px; cursor: pointer;
  transition: all .15s;
}
.comp-close:hover { background: rgba(0,0,0,.12); color: var(--text); transform: rotate(90deg); }

/* メイン：トップページに戻る */
.comp-top-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 16px; border: none; border-radius: 50px;
  background: var(--cv-grad);
  color: #fff; font-size: 17px; font-weight: 700;
  cursor: pointer; font-family: var(--font-head); text-decoration: none;
  box-shadow: 0 4px 18px rgba(123,47,247,.35);
  transition: all .2s;
}
.comp-top-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(123,47,247,.45); }
.comp-top-btn ruby rt { font-size: 0.5em; }

/* サブ：次の回へ（控えめ） */
.comp-next-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 14px; padding: 8px 18px;
  background: none; border: none;
  color: var(--text2); font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: var(--font-head);
  border-radius: 30px; transition: all .15s;
}
.comp-next-link:hover { color: var(--cv-purple); background: rgba(123,47,247,.06); }
.comp-next-link ruby rt { font-size: 0.5em; }

/* ════════════════════════════════════════════════════════
   v52 追加：完了モーダルのレベルアップ演出
   ──────────────────────────────────────────────────────── */
.comp-levelup { margin: 4px 0 18px; }
.levelup-row {
  display: flex; align-items: center; gap: 14px;
  margin-top: 12px;
}
.level-badge {
  flex: 0 0 auto;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--cv-grad);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 4px 16px rgba(123,47,247,.4);
  line-height: 1;
}
.level-badge .level-lv { font-size: 12px; font-weight: 700; opacity: .85; font-family: var(--font-head); }
.level-badge .level-num { font-size: 28px; font-weight: 900; font-family: var(--font-head); }
.level-badge.pop { animation: lvBadgePop .4s cubic-bezier(.175,.885,.32,1.275); }
@keyframes lvBadgePop {
  0% { transform: scale(1); }
  45% { transform: scale(1.28); box-shadow: 0 6px 24px rgba(123,47,247,.6); }
  100% { transform: scale(1); }
}
.level-bar-wrap { flex: 1 1 0%; min-width: 0; text-align: left; }
.level-bar-track {
  height: 16px; border-radius: 10px;
  background: rgba(123,47,247,.12); overflow: hidden;
}
.level-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #FFB300, #FF6B9D, #7B2FF7);
  border-radius: 10px;
}
.level-bar-label {
  font-size: 12.5px; color: var(--text2); margin-top: 6px; font-weight: 600;
}
.levelup-flash {
  margin-top: 14px;
  font-size: 22px; font-weight: 900; font-family: var(--font-head);
  background: var(--cv-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: scale(.5);
}
.levelup-flash.show { animation: lvFlash .8s ease both; }
@keyframes lvFlash {
  0% { opacity: 0; transform: scale(.5) translateY(6px); }
  35% { opacity: 1; transform: scale(1.1) translateY(0); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1) translateY(-6px); }
}

/* ════════════════════════════════════════════════════════
   v53 追加：フッターにレベルバッジ＋1/3で現在セクション非表示
   ──────────────────────────────────────────────────────── */
/* XPとLvを横並びにして縦の高さを増やさない */
.inst-progress-group {
  flex-direction: column;
}
.inst-xp {
  /* XPの後ろにLvが続くので、XP自体は据え置き */
}
.inst-level {
  display: inline-flex; align-items: baseline; gap: 2px;
  font-family: var(--font-head); font-weight: 900;
  color: #fff;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 20px;
  padding: 2px 10px;
  line-height: 1.2;
  margin-left: 8px;
}
.inst-lv-tag { font-size: 10px; font-weight: 700; opacity: .8; }
#inst-lv-val { font-size: 14px; }
.inst-level.lv-up { animation: instLvUp .5s cubic-bezier(.175,.885,.32,1.275); }
@keyframes instLvUp {
  0% { transform: scale(1); }
  40% { transform: scale(1.3); background: rgba(255,210,63,.4); }
  100% { transform: scale(1); }
}
/* XPとLvを1行に並べるラッパ的挙動：inst-xp と inst-level を横並びに */
.inst-progress-group .inst-xp { display: inline-flex; }
.inst-progress-group {
  /* クリア数（上） / XP・Lv（下、横並び） */
}
.inst-xp-level-row {
  display: flex; align-items: center; justify-content: center;
}

/* 1/3（狭い）では現在セクション（inst-sec）グループと、その手前の区切り線を非表示 */
@media(max-width:640px) {
  .inst-sec { display: none; }
  .inst-bar .inst-divider:last-of-type { display: none; }
  .inst-level { padding: 2px 8px; margin-left: 6px; }
  #inst-lv-val { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════
   v28 追加：調整バーのはたらき（左・中央・右の3枚見本）
   ──────────────────────────────────────────────────────── */
/* 1項目ぶんのブロック */
.adjust3 {
  margin: 14px 0;
  padding: 12px;
  background: #faf8ff;
  border: 1px solid rgba(123,47,247,.12);
  border-radius: 12px;
}
.adjust3-name {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-weight: 700;
  font-size: 14px; color: var(--cv-purple);
  margin-bottom: 10px;
}
.adjust3-name i { font-size: 15px; }
/* 3枚の写真を横並び */
.adjust3-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  align-items: start;
}
.adjust3-col { text-align: center; }
.adjust3-col img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 8px; border: 1px solid rgba(26,29,46,.12);
  display: block; transition: border-color .15s;
}
/* 写真の枠：スライダーで選ばれた1枚に紫枠（JSが is-active を付ける）。
   初期は中央（まんなか）に枠。 */
.adjust3-col.is-active img { border: 2px solid var(--cv-purple); }

/* ほかにもある調整（おまけ）：カテゴリ見出し（カラー調整／テクスチャー） */
.adjust3-cat {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-weight: 700;
  font-size: 14px; color: var(--cv-purple);
  margin: 8px 0 6px;
}
.adjust3-cat i { font-size: 15px; }
.adjust3-dir {
  margin-top: 6px; font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.adjust3-col.is-left  .adjust3-dir { color: #185FA5; }
.adjust3-col.is-right .adjust3-dir { color: #BA7517; }
.adjust3-col.is-center .adjust3-dir { color: var(--text-sub); }
.adjust3-cap { font-size: 11.5px; color: var(--text-sub); line-height: 1.5; margin-top: 2px; }

/* 3段階スライダー（左・まんなか・右） */
.adjust3-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; margin: 14px 0 0;
  border-radius: 999px; border: 1px solid rgba(26,29,46,.1);
  cursor: pointer; outline: none;
}
.adjust3-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid var(--cv-purple);
  box-shadow: 0 1px 5px rgba(26,29,46,.25); cursor: pointer;
}
.adjust3-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid var(--cv-purple);
  box-shadow: 0 1px 5px rgba(26,29,46,.25); cursor: pointer;
}
.adjust3-bar-labels {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-sub); margin-top: 4px;
}
/* バーの色（項目ごと）：range のトラック背景に適用 */
.bar-temp     { background: linear-gradient(90deg,#85B7EB,#dde0ea,#EF9F27); }
.bar-tint     { background: linear-gradient(90deg,#97C459,#dde0ea,#ED93B1); }
.bar-bright   { background: linear-gradient(90deg,#5f5e5a,#dde0ea,#fff7e0); }
.bar-contrast { background: linear-gradient(90deg,#b4b2a9,#dde0ea,#2C2C2A); }
.bar-mono     { background: linear-gradient(90deg,#888780,#dde0ea,#f1efe8); }
@media(max-width:540px) {
  .adjust3 { padding: 10px; }
  .adjust3-row { gap: 6px; }
  .adjust3-dir { font-size: 11.5px; }
  .adjust3-cap { font-size: 11px; }
}

/* ════════════════════════════════════════════════════════
   v29 追加：ほかにもある調整のトグル（反転）＆スタイルマッチ例
   ──────────────────────────────────────────────────────── */
/* 反転などのトグル：normal(OFF)と加工後(ON)の2枚＋トグルスイッチ */
.adjust-toggle { margin: 14px 0; padding: 12px; background: #faf8ff;
  border: 1px solid rgba(123,47,247,.12); border-radius: 12px; }
.adjust-toggle-name { display: flex; align-items: center; gap: 7px;
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  color: var(--cv-purple); margin-bottom: 10px; }
.adjust-toggle-name i { font-size: 15px; }
.adjust-toggle-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; justify-content: center; max-width: 67%; margin: 0 auto; }
.adjust-toggle-col { text-align: center; }
.adjust-toggle-col img { width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 8px; border: 2px solid transparent; display: block; transition: border-color .15s; }
.adjust-toggle-col.is-active img { border-color: var(--cv-purple); }
.adjust-toggle-cap { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-sub); }
.adjust-toggle-col.is-active .adjust-toggle-cap { color: var(--cv-purple); }
/* トグルスイッチ本体 */
.toggle-switch-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.toggle-switch-label { font-size: 12.5px; font-weight: 700; color: var(--text-sub); }
.toggle-switch { position: relative; width: 52px; height: 28px; flex-shrink: 0;
  border: none; padding: 0; cursor: pointer; border-radius: 999px;
  background: #cfd2da; transition: background .2s; }
.toggle-switch.is-on { background: var(--cv-purple); }
.toggle-switch::after { content: ''; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.toggle-switch.is-on::after { transform: translateX(24px); }

/* スタイルマッチ例：normal1枚＋加工例グリッド */
.stylematch-normal { text-align: center; margin: 6px 0 14px; }
.stylematch-normal img { width: 60%; max-width: 220px; aspect-ratio: 4/3;
  object-fit: cover; border-radius: 10px; border: 1px solid rgba(26,29,46,.12); }
.stylematch-normal .sm-cap { margin-top: 6px; font-size: 12.5px; color: var(--text-sub); font-weight: 700; }
.sm-lead { font-size: 13.5px; line-height: 1.7; color: var(--text2); margin: 4px 0 10px; }
.stylematch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stylematch-item { text-align: center; }
.stylematch-item img { width: 100%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: 8px; border: 1px solid rgba(26,29,46,.12); display: block; }
.stylematch-item .sm-name { margin-top: 4px; font-size: 11px; color: var(--text2); line-height: 1.35; }
/* 調整とスタイルマッチの区切り線 */
.sm-divider { height: 0; border-top: 2px dashed rgba(123,47,247,.25); margin: 20px 0 4px; }
/* スタイルマッチ内のサブグループ見出し（ハンドメイド／人気／リアル） */
.sm-group-name { font-family: var(--font-head); font-weight: 700; font-size: 13px;
  color: var(--text-sub); margin: 14px 0 7px; padding-left: 2px; }
@media(max-width:640px) {
  .stylematch-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .stylematch-item .sm-name { font-size: 11px; }
  .adjust-toggle-row { max-width: 100%; gap: 7px; }
}

/* ════════════════════════════════════════════════════════
   試験用フィードバックパネル（test_feedback.php）
   リリース時は $test_mode=false で丸ごと非表示
   ──────────────────────────────────────────────────────── */
.test-wrap { border: 2px dashed rgba(123,47,247,.35); }
.test-card { background: #fff; border-radius: 14px; padding: 16px; margin-bottom: 14px;
  box-shadow: 0 2px 12px rgba(26,29,46,.06); }
.test-head { display: flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 17px;
  color: var(--cv-purple); margin-bottom: 8px; }
.test-head i { color: var(--gold, #f5b400); }
.test-lead { font-size: 14px; line-height: 1.9; color: var(--text2); margin: 0 0 12px; }

/* 子ども用：質問＋顔ボタン */
.tq { margin: 14px 0; }
.tq-text { font-size: 15px; font-weight: 700; line-height: 1.7; margin-bottom: 8px; }
.faces { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.face { display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 4px; font-size: 30px; cursor: pointer;
  background: #faf8ff; border: 2px solid rgba(123,47,247,.15); border-radius: 12px;
  transition: transform .12s, border-color .12s, background .12s; }
.face span { font-size: 12px; font-weight: 700; color: var(--text-sub); }
.face:hover { transform: translateY(-2px); }
.face.is-sel { border-color: var(--cv-purple); background: rgba(123,47,247,.1);
  box-shadow: 0 2px 10px rgba(123,47,247,.2); }
.face.is-sel span { color: var(--cv-purple); }

/* 大人用：観察フォーム */
.test-adult > summary { cursor: pointer; font-family: var(--font-head); font-weight: 700;
  font-size: 14px; color: #3C3489; display: flex; align-items: center; gap: 8px; list-style: none; }
.test-adult > summary::-webkit-details-marker { display: none; }
.test-adult > summary::before { content: '\f0fe'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--cv-purple); }
.test-adult[open] > summary::before { content: '\f146'; }
.test-adult-body { margin-top: 12px; }
.ta-sec { font-family: var(--font-head); font-weight: 700; font-size: 13px;
  color: var(--cv-purple); margin: 14px 0 6px; padding-bottom: 4px;
  border-bottom: 1.5px solid rgba(123,47,247,.15); }
.ta-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; font-size: 13px; }
.ta-row.col { flex-direction: column; align-items: stretch; gap: 4px; }
.ta-row label { flex: 0 0 42%; color: var(--text2); font-weight: 600; }
.ta-row.col label { flex: none; }
.ta-row input, .ta-row select, .ta-row textarea {
  flex: 1 1 0%; min-width: 0; font: inherit; font-size: 13px;
  padding: 7px 10px; border: 1px solid #D0D3DF; border-radius: 8px; background: #fff; }
.ta-row textarea { resize: vertical; }

/* 送信 */
.test-submit-wrap { text-align: center; margin-top: 6px; }
.test-submit-btn { font-family: var(--font-head); font-weight: 700; font-size: 15px;
  color: #fff; background: var(--cv-grad, linear-gradient(135deg,#7b2ff7,#00c4cc));
  border: none; border-radius: 999px; padding: 13px 30px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  box-shadow: 0 4px 16px rgba(123,47,247,.3); transition: transform .12s; }
.test-submit-btn:hover { transform: translateY(-2px); }
.test-submit-btn:disabled { opacity: .6; cursor: default; transform: none; }
.test-status { margin-top: 10px; font-size: 13px; font-weight: 700; min-height: 1.2em; }
.test-status.ok { color: #1a9c4e; }
.test-status.err { color: #d6334f; }
@media(max-width:640px) {
  .ta-row { flex-direction: column; align-items: stretch; gap: 3px; }
  .ta-row label { flex: none; }
  .face { font-size: 26px; padding: 10px 2px; }
}

/* 試験フィードバック：分離版の追加スタイル */
.req { font-size: 11px; font-weight: 700; color: #d6334f;
  background: rgba(214,51,79,.1); border-radius: 6px; padding: 1px 7px; margin-left: 4px; }
.tname { margin-bottom: 14px; }
.tname label { font-size: 15px; font-weight: 700; }
.tname input { font-size: 15px; padding: 10px 12px; }
.test-head-adult { color: #3C3489; font-size: 15px; }
.test-adult-card { border-left: 4px solid var(--cv-purple); }

/* 試験フィードバック：タブ切替 */
.test-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.test-tab { flex: 1 1 0%; font-family: var(--font-head); font-weight: 700; font-size: 14px;
  padding: 11px 8px; cursor: pointer; border: 2px solid rgba(123,47,247,.18);
  background: #faf8ff; color: var(--text-sub); border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: all .15s; }
.test-tab i { font-size: 15px; }
.test-tab.is-active { background: var(--cv-grad, linear-gradient(135deg,#7b2ff7,#00c4cc));
  color: #fff; border-color: transparent; box-shadow: 0 3px 12px rgba(123,47,247,.25); }
/* パネルはタブで出し分け（両方表示時のみ）。片方のみ表示時は常時表示 */
.test-wrap .test-panel { display: none; }
.test-wrap .test-panel.is-active { display: block; }
/* タブが無い（片方のみ）場合は必ず見せる */
.test-wrap:not(:has(.test-tabs)) .test-panel { display: block; }

/* 試験パネルをveil対象外の独立ブロックに（sec-wrap除去後の見た目を維持） */
.test-standalone { margin: 24px 0; padding: 18px; border-radius: 16px;
  border: 2px dashed rgba(123,47,247,.35); background: rgba(123,47,247,.02);
  position: relative; z-index: 6; }

/* ════════════════════════════════════════════════════════
   adjust-list：レイヤーの動かし方一覧（展開コンテンツ内）
   子どもが見やすいようカード状に。今回使うものを強調。
   ──────────────────────────────────────────────────────── */
.layer-list-lead { margin: 14px 0 8px !important; font-weight: 700; color: var(--text); }
.adjust-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.adjust-item {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1.5px solid var(--border2, #E3E6F0);
  border-radius: var(--r-sm); padding: 10px 14px;
}
.adjust-name {
  flex: 0 0 auto; min-width: 150px;
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; color: var(--cv-purple); font-size: 14px;
}
.adjust-name > i {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cv-purple); color: #fff; font-size: 13px;
}
.adjust-desc { flex: 1 1 0%; min-width: 0; color: var(--text); font-size: 14px; line-height: 1.7; }
.adjust-item-now {
  background: #FFF9E6; border-color: var(--gold);
  box-shadow: 0 2px 10px rgba(245,197,24,.22);
}
.adjust-item-now .adjust-name { color: #8a6d00; }
.adjust-item-now .adjust-name > i { background: var(--gold); color: #fff; }
.adjust-item-now .adjust-desc strong { color: #8a6d00; }
@media(max-width:640px) {
  .adjust-item { flex-direction: column; align-items: flex-start; gap: 5px; }
  .adjust-name { min-width: 0; }
}

/* ════════════════════════════════════════════════════════
   layer-demo：レイヤーパネル方式（Photoshop風）
   (1)3枚を確認 (2)レイヤーパネル(サムネ縦積み) (3)大きな結果
   ──────────────────────────────────────────────────────── */
.layer-demo {
  background: linear-gradient(135deg,#F7F4FF,#EEF9FC);
  border: 1.5px solid var(--border2,#E3E6F0);
  border-radius: var(--r-md,16px); padding: 16px 14px; margin: 10px 0 4px;
}
.layer-intro-label, .layer-panel-label, .layer-result-label {
  font-weight: 700; color: var(--text); font-size: 13px;
  display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
}
.layer-intro-label > i { color: var(--cv-purple); }
.layer-intro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.layer-intro-card {
  background: #fff; border: 1.5px solid var(--border2,#E3E6F0);
  border-radius: 10px; padding: 6px; text-align: center;
}
.layer-intro-card img {
  width: 100%; height: auto; aspect-ratio: 7/5; object-fit: contain;
  border-radius: 6px; background: #FAFAFD; display: block; margin-bottom: 4px;
}
.layer-intro-card span { font-size: 12px; font-weight: 700; color: var(--text2); }
.layer-work { display: flex; gap: 14px; margin-top: 14px; align-items: flex-start; }
.layer-panel { flex: 0 0 168px; }
.layer-panel-label > i { color: var(--cv-purple); }
.layer-panel-label { position: relative; }
.layer-panel-hint { margin-left: auto; font-size: 11px; font-weight: 700;
  color: var(--text3); background: #fff; border-radius: 6px; padding: 2px 7px; }
.layer-rows { display: flex; flex-direction: column; gap: 6px; }
.layer-row {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid var(--border2,#E3E6F0);
  border-radius: 9px; padding: 6px;
}
.layer-row-thumb {
  flex: 0 0 auto; width: 56px; height: 40px; border-radius: 5px;
  overflow: hidden; background: #FAFAFD; border: 1px solid #EEE;
}
.layer-row-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.layer-row-name { flex: 1 1 0%; min-width: 0; font-size: 13px; font-weight: 700; color: var(--text); }
.layer-row-moves { flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; }
.layer-row-btn {
  width: 26px; height: 20px; border-radius: 5px; cursor: pointer;
  background: var(--cv-grad); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  transition: transform .1s, opacity .15s;
}
.layer-row-btn:active { transform: scale(.9); }
.layer-row-btn:disabled { opacity: .3; cursor: default; background: #C8CCDA; }
.layer-result { flex: 1 1 0%; min-width: 0;
  background: #fff; border: 1.5px solid var(--border2,#E3E6F0);
  border-radius: var(--r-sm); padding: 10px; }
.layer-result-label > i { color: var(--cv-teal); }
.layer-stack {
  position: relative; width: 100%; aspect-ratio: 7 / 5; margin: 0 auto;
}
.layer-stack-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; border-radius: 6px;
}
.layer-hint {
  margin-top: 14px; background: #FFF9E6; border: 1.5px solid var(--gold);
  border-radius: 10px; padding: 9px 12px; font-size: 13px; color: #8a6d00;
  display: flex; align-items: center; gap: 8px; line-height: 1.85;
}
.layer-hint > i { color: var(--gold); flex: 0 0 auto; }
.layer-hint > span { flex: 1 1 auto; display: block; }
.layer-hint.is-cleared { background: #E9FBF0; border-color: #34C759; color: #1a7a3a; }
.layer-hint.is-cleared > i { color: #34C759; }
@media(max-width:640px) {
  .layer-work { flex-direction: column; }
  .layer-panel { flex: none; width: 100%; }
  .layer-result { width: 100%; }
}

/* ════════════════════════════════════════════════════════
   fx-gallery：エフェクトのサンプル一覧（時間あまった人へ）
   横幅に応じて自動で列数が変わるグリッド。
   ──────────────────────────────────────────────────────── */
.fx-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin: 10px 0 4px;
}
.fx-card {
  background: #fff; border: 1.5px solid var(--border2,#E3E6F0);
  border-radius: 10px; padding: 8px; text-align: center;
}
.fx-card img {
  width: 100%; height: auto; display: block; border-radius: 6px;
  margin-bottom: 6px;
}
.fx-card span {
  display: block; font-size: 12px; font-weight: 700; color: var(--text2);
}
@media(max-width:640px) {
  .fx-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
/* 「なし」を1枚だけ大きく見せる */
.fx-gallery-solo { grid-template-columns: 1fr; max-width: 360px; }
.fx-gallery-solo .fx-card span { font-size: 13px; }

/* ════════════════════════════════════════════════════════
   fx-list：エフェクト一覧（1行1枚＝画像左・説明右）
   第3回のエフェクト紹介で使用。画像が大きく見やすい。
   ──────────────────────────────────────────────────────── */
.fx-list { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 4px; }
.fx-row {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  background: #fff; border: 1.5px solid var(--border2,#E3E6F0);
  border-radius: 10px; padding: 10px;
}
.fx-row img {
  width: 100%; height: auto; max-height: 200px; object-fit: contain;
  border-radius: 6px; display: block; background: #FAFAFD;
}
.fx-row-text { display: flex; flex-direction: column; gap: 3px; padding: 0 2px 2px; }
.fx-row-name { font-weight: 800; color: var(--text); font-size: 15px; }
.fx-row-desc { color: var(--text2); font-size: 13px; line-height: 1.7; }

/* ════════════════════════════════════════════════════════
   dl-card：素材写真のダウンロード（プレビュー＋ボタン）
   サイトから都度ダウンロードして使う方式。
   ──────────────────────────────────────────────────────── */
.dl-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: #fff; border: 1.5px solid var(--border2,#E3E6F0);
  border-radius: var(--r-sm); padding: 14px; margin: 10px 0 4px;
}
.dl-preview { width: 100%; max-width: 360px; }
.dl-preview img {
  width: 100%; height: auto; border-radius: 8px; display: block;
  box-shadow: 0 2px 10px rgba(26,29,46,.12);
}
.dl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--cv-grad); color: #fff; text-decoration: none;
  font-weight: 800; font-size: 15px; padding: 12px 22px; border-radius: 12px;
  box-shadow: 0 4px 14px rgba(123,47,247,.3);
  transition: transform .12s, box-shadow .2s;
}
.dl-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(123,47,247,.4); }
.dl-btn:active { transform: scale(.97); }
.dl-btn > i { font-size: 17px; }

/* ════════════════════════════════════════════════════════
   align-demo：配置（整列）をためすインタラクティブ体験
   枠の中で写真が9通りの位置にそろう。上下×左右を組み合わせ。
   ──────────────────────────────────────────────────────── */
.align-demo {
  background: linear-gradient(135deg,#F7F4FF,#EEF9FC);
  border: 1.5px solid var(--border2,#E3E6F0);
  border-radius: var(--r-md,16px); padding: 16px 14px; margin: 10px 0 4px;
}
.align-stage { display: flex; justify-content: center; }
.align-frame {
  position: relative; width: 260px; max-width: 100%; aspect-ratio: 5 / 7;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 11px,#EFEFF4 11px,#EFEFF4 12px),
    #fff;
  border: 2px solid #C8CCDA; border-radius: 8px; overflow: hidden;
}
.align-obj {
  position: absolute; width: 52%; aspect-ratio: 7 / 5;
  transition: top .4s cubic-bezier(.34,1.2,.5,1), left .4s cubic-bezier(.34,1.2,.5,1),
              transform .4s cubic-bezier(.34,1.2,.5,1);
}
.align-obj img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 5px;
  box-shadow: 0 2px 8px rgba(26,29,46,.25); display: block;
}
/* 縦位置 */
.align-obj[data-v="top"]    { top: 6px; }
.align-obj[data-v="middle"] { top: 50%; }
.align-obj[data-v="bottom"] { top: auto; bottom: 6px; }
/* 横位置 */
.align-obj[data-h="left"]   { left: 6px; }
.align-obj[data-h="center"] { left: 50%; }
.align-obj[data-h="right"]  { left: auto; right: 6px; }
/* 中央のときだけ transform で半分ずらして真の中央に */
.align-obj[data-v="middle"][data-h="center"] { transform: translate(-50%, -50%); }
.align-obj[data-v="middle"]:not([data-h="center"]) { transform: translateY(-50%); }
.align-obj[data-h="center"]:not([data-v="middle"]) { transform: translateX(-50%); }

.align-controls { display: flex; gap: 12px; margin-top: 14px; }
.align-group { flex: 1 1 0%; min-width: 0; }
.align-group-label {
  font-weight: 700; color: var(--text); font-size: 12px;
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.align-group-label > i { color: var(--cv-purple); }
.align-btns { display: flex; flex-direction: column; gap: 6px; }
.align-btn {
  background: #fff; border: 1.5px solid var(--border2,#E3E6F0);
  border-radius: 9px; padding: 9px 8px; font-weight: 700; font-size: 13px;
  color: var(--text); cursor: pointer; transition: all .15s;
}
.align-btn:hover { border-color: var(--cv-purple); }
.align-btn.is-active {
  background: var(--cv-purple); color: #fff; border-color: var(--cv-purple);
}
.align-hint {
  margin-top: 14px; background: #FFF9E6; border: 1.5px solid var(--gold);
  border-radius: 10px; padding: 9px 12px; font-size: 13px; color: #8a6d00;
  display: flex; align-items: center; gap: 8px; line-height: 1.85;
}
.align-hint > i { color: var(--gold); flex: 0 0 auto; }
.align-hint > span { flex: 1 1 auto; }
.align-hint.is-cleared { background: #E9FBF0; border-color: #34C759; color: #1a7a3a; }
.align-hint.is-cleared > i { color: #34C759; }

/* ════════════════════════════════════════════════════════
   ms-grid：写真素材サンプルのダウンロード一覧（展開式）
   ──────────────────────────────────────────────────────── */
.ms-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px; margin: 10px 0 4px;
}
.ms-card {
  background: #fff; border: 1.5px solid var(--border2,#E3E6F0);
  border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 7px;
}
.ms-preview { width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: #FAFAFD; }
.ms-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--cv-grad); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 12.5px; padding: 7px 6px; border-radius: 8px;
  box-shadow: 0 2px 8px rgba(123,47,247,.25); transition: transform .12s;
}
.ms-btn:hover { transform: translateY(-1px); }
.ms-btn:active { transform: scale(.96); }
.ms-btn > i { font-size: 12px; }
@media(max-width:640px) {
  .ms-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ════════════════════════════════════════════════════════
   stock-grid：写真素材サンプルのダウンロード一覧（展開式）
   ──────────────────────────────────────────────────────── */
.stock-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; margin: 10px 0 4px;
}
.stock-card {
  background: #fff; border: 1.5px solid var(--border2,#E3E6F0);
  border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 8px;
}
.stock-thumb {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden;
  background: #FAFAFD;
}
.stock-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stock-dl {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--cv-grad); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 13px; padding: 8px 6px; border-radius: 8px;
  box-shadow: 0 2px 8px rgba(123,47,247,.25); transition: transform .12s;
}
.stock-dl:hover { transform: translateY(-1px); }
.stock-dl:active { transform: scale(.96); }
.stock-dl > i { font-size: 13px; }
@media(max-width:640px) {
  .stock-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stock-dl { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════
   idea-box：アイデアのひきだし（3ページ目への誘導＋素材展開）
   ──────────────────────────────────────────────────────── */
.idea-box {
  background: linear-gradient(135deg,#FFF7E6,#FFFDF5);
  border: 1.5px solid #FFE3A3; border-radius: var(--r-sm);
  padding: 14px; margin: 14px 0 4px;
}
.idea-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; color: #9a6b00; font-size: 15px; margin-bottom: 8px;
}
.idea-head > i { color: var(--gold); }
.idea-lead { color: var(--text); font-size: 13.5px; line-height: 1.85; margin: 0 0 8px; }
.idea-box .ms-details { margin-top: 10px; }

/* 移動アイコン（画像）：フォント基準で大きさが追従。行内にきれいに収まる */
.move-icon {
  height: 1.25em; width: auto; vertical-align: -0.28em;
  display: inline-block; margin: 0 2px;
}

/* ════════════════════════════════════════════════════════
   substep「今ここ」ハイライト（読み飛ばし対策・任意の補助）
   ・hover：うっすら色づく（押せるサイン）
   ・click（.is-here）：はっきり色づいて現在地を固定
   ・クリックしなくても読み進められる。進行はブロックしない。
   ──────────────────────────────────────────────────────── */
.substep {
  border-radius: 10px;
  transition: background-color .18s, box-shadow .18s;
}
.substep:hover {
  background: rgba(123,47,247,.035);
}
.substep.is-here {
  background: rgba(123,47,247,.10) !important;
  border-color: var(--cv-purple) !important;
  box-shadow: 0 2px 12px rgba(123,47,247,.22) !important;
}
/* 現在地の番号：呼吸するように拡大縮小＋広がる光の輪でしっかり目立つ */
.substep.is-here .substep-num {
  position: relative; z-index: 1;
  animation: substepPop .45s ease, substepBreathe 1.8s ease-in-out .45s infinite;
}
.substep.is-here .substep-num::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  pointer-events: none; z-index: -1;
  background: var(--cv-purple);
  animation: substepRing 1.8s ease-out infinite;
}
@keyframes substepPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.28); }
  70%  { transform: scale(.95); }
  100% { transform: scale(1); }
}
@keyframes substepBreathe {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.12); }
}
@keyframes substepRing {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(2.1); opacity: 0; }
}
/* 「いまここ」ラベル：番号の右に絶対配置（substep基準）*/
.substep { position: relative; }
.here-label {
  position: absolute; z-index: 3;
  background: var(--cv-purple); color: #fff;
  font-size: 11px; font-weight: 800; font-family: var(--font-head);
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  animation: hereLabel .3s ease;
  left: 46px; top: 14px;
}
/* フル幅：タイトル先頭にインライン挿入（本文が右へずれ、かぶらない）*/
.here-label.here-label-inline {
  position: static; display: inline-block; vertical-align: middle;
  margin-right: 8px; left: auto; top: auto;
}
@keyframes hereLabel {
  0%   { opacity: 0; transform: translateX(-4px) scale(.8); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@media(max-width:640px) { .here-label { left: 62px; top: 16px; } }
@media(prefers-reduced-motion: reduce) {
  .substep { transition: none; }
  .substep.is-here .substep-num { animation: none; }
  .substep.is-here .substep-num::after { animation: none; opacity: 0; }
  .here-label { animation: none; }
}

/* ══ 素材写真の拡大モーダル ══ */
.ms-preview img { cursor: zoom-in; transition: transform .12s; }
.ms-preview img:hover { transform: scale(1.03); }
.img-modal {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(20,10,40,.82);
  align-items: center; justify-content: center;
  padding: 24px; box-sizing: border-box;
  backdrop-filter: blur(2px);
}
.img-modal.is-open { display: flex; animation: imgModalIn .18s ease; }
@keyframes imgModalIn { from { opacity: 0; } to { opacity: 1; } }
.img-modal-img {
  max-width: min(92vw, 720px); max-height: 82vh;
  border-radius: 14px; box-shadow: 0 12px 48px rgba(0,0,0,.5);
  background: #fff; object-fit: contain;
}
.img-modal-cap {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 15px;
  background: rgba(0,0,0,.45); padding: 6px 16px; border-radius: 999px;
  white-space: nowrap;
}
.img-modal-close {
  position: absolute; top: 16px; right: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--cv-purple);
  font-size: 20px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
  transition: transform .12s, background .12s;
}
.img-modal-close:hover { transform: scale(1.08); background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .img-modal.is-open { animation: none; }
  .ms-preview img:hover { transform: none; }
}

/* ══════════════════════════════════════
   情報リテラシー講座 追加コンポーネント
   （quiz-card / choice-card / chara-line / land-record-box）
   既存デザイントークン（--cv-purple 等）に準拠
══════════════════════════════════════ */

/* キャラクターの吹き出し */
.chara-line{display:flex;gap:12px;align-items:flex-start;margin:16px 0;}
.chara-line img{width:56px;height:56px;border-radius:50%;flex-shrink:0;background:var(--bg2);object-fit:cover;}
.chara-line .cl-bubble{background:var(--bg2);border-radius:var(--r-sm);padding:12px 16px;font-size:15px;line-height:1.7;color:var(--text);}
.chara-line .cl-name{font-weight:700;font-size:12px;color:var(--cv-purple);margin-bottom:2px;}

/* クイズカード */
.quiz-card{border:2px solid var(--border);border-radius:var(--r);padding:18px;margin:16px 0;background:var(--card);}
.quiz-card .qc-q{font-weight:700;font-size:16px;margin-bottom:14px;color:var(--text);}
.quiz-card .qc-opts{display:flex;flex-direction:column;gap:10px;}
.quiz-card .qc-opt{border:2px solid var(--border);background:var(--card);border-radius:var(--r-sm);padding:12px 14px;text-align:left;font-size:14px;font-family:var(--font);cursor:pointer;transition:.15s;color:var(--text);}
.quiz-card .qc-opt:hover:not(:disabled){border-color:var(--cv-purple);}
.quiz-card .qc-opt:disabled{cursor:default;opacity:.85;}
.quiz-card .qc-opt.correct{border-color:var(--green);background:rgba(16,185,129,.08);}
.quiz-card .qc-opt.wrong{border-color:var(--red);background:rgba(239,68,68,.08);}
.quiz-card .qc-result{margin-top:12px;padding:12px;border-radius:var(--r-sm);background:var(--bg);font-size:14px;line-height:1.7;color:var(--text2);display:none;}

/* 分岐ロールプレイ（選択カード） */
.choice-card{border:2px solid var(--border);border-radius:var(--r);padding:18px;margin:16px 0;background:var(--card);}
.choice-card .cc-scene{margin-bottom:14px;}
.choice-card .cc-opts{display:flex;flex-direction:column;gap:10px;}
.choice-card .cc-opt{border:2px solid var(--border);background:var(--card);border-radius:var(--r-sm);padding:12px 14px;text-align:left;font-size:14px;font-family:var(--font);cursor:pointer;color:var(--text);}
.choice-card .cc-opt.picked{border-color:var(--cv-purple);background:rgba(123,47,247,.06);}
.choice-card .cc-feedback{margin-top:12px;padding:12px;border-radius:var(--r-sm);background:var(--bg);font-size:14px;line-height:1.7;color:var(--text2);display:none;}

/* Interland等のスコア記録欄（冒険手帳 連携予定・現状UIのみ） */
.land-record-box{border:2px dashed rgba(123,47,247,.35);border-radius:var(--r);padding:16px;margin-top:16px;background:var(--bg);}
.land-record-box label{font-size:13px;font-weight:700;display:block;margin-bottom:6px;color:var(--text);}
.land-record-box input{width:100%;max-width:200px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-sm);font-size:14px;font-family:var(--font);}

/* ══════════════════════════════════════
   ノベルゲーム風シーン進行エンジン用スタイル
   （夜空×パステルのミックス、キャラ表情バスト、チャット送信ボタン）
══════════════════════════════════════ */
.scene-player{
  border-radius:20px;overflow:hidden;position:relative;
  background:linear-gradient(160deg, #FFE9D6 0%, #FFD1E0 45%, #C9F3E6 100%);
  margin:16px 0;
}
.sp-progress{display:flex;gap:6px;justify-content:center;padding:14px 16px 0;position:relative;z-index:2;}
.sp-progress span{width:18px;height:4px;border-radius:99px;background:rgba(255,255,255,.55);}
.sp-progress span.done{background:#fff;}
.sp-progress span.current{background:var(--cv-purple);}

.sp-stage{position:relative;min-height:280px;display:flex;flex-direction:column;justify-content:flex-end;padding:0;}
.sp-illust{position:relative;display:flex;align-items:flex-end;min-height:190px;padding:0 8px;}
.sp-illust.two{justify-content:flex-start;}
.sp-illust.one{justify-content:center;}
.sp-bust-wrap{width:150px;flex-shrink:0;opacity:.4;transition:.25s;filter:drop-shadow(0 6px 8px rgba(0,0,0,.15));}
.sp-bust-wrap.active{opacity:1;transform:scale(1.05);}
.sp-bust-wrap.two:first-child{margin-right:-24px;z-index:1;}
.sp-bust-wrap.two:last-child{z-index:2;}
.sp-bust{width:100%;display:block;border-radius:0;background:none;box-shadow:none;}
.sp-illust-empty{height:16px;}

.sp-panel{background:rgba(255,255,255,.97);border-radius:18px 18px 0 0;padding:14px 18px 18px;position:relative;margin-top:-16px;z-index:3;}
.chat-name-row{margin-bottom:6px;}
.chat-name{font-size:11px;font-weight:900;color:var(--cv-purple);}
.chat-text{font-size:15px;line-height:1.7;color:var(--text);min-height:44px;}

.send-row{display:flex;justify-content:flex-end;margin-top:12px;}
.send-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--text);color:#fff;border:none;
  padding:9px 18px;border-radius:99px;font-size:13px;font-weight:700;
  font-family:var(--font);cursor:pointer;
}
.send-btn .plane{color:#FF8FB8;}

.choice-q{font-size:14px;font-weight:700;color:var(--text);margin-bottom:12px;}
.choice-opts{display:flex;flex-direction:column;gap:8px;}
.choice-opt{
  border:2px solid var(--border);background:var(--card);border-radius:10px;
  padding:11px 14px;text-align:left;font-size:13px;font-family:var(--font);
  cursor:pointer;color:var(--text);
}
.choice-opt:hover:not(:disabled){border-color:var(--cv-purple);}
.choice-opt.picked{border-color:var(--cv-purple);background:rgba(123,47,247,.06);}
.choice-opt:disabled{cursor:default;}
.choice-feedback{margin-top:12px;padding:11px;border-radius:10px;background:var(--bg);font-size:13px;line-height:1.7;color:var(--text2);}

.celebrate{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 32px;background:rgba(255,255,255,.88);border-radius:20px;backdrop-filter:blur(2px);margin:0 auto;max-width:90%;box-shadow:0 8px 24px rgba(0,0,0,.12);}
.celebrate .big-star{font-size:44px;color:var(--cv-purple);}
.celebrate .cel-title{color:var(--text);font-size:18px;font-weight:900;margin-top:6px;}
.celebrate .cel-sub{color:var(--text2);font-size:12px;margin-top:4px;text-align:center;}

.capture-card{background:var(--card);border-radius:14px;padding:12px;}
.capture-img-wrap{border-radius:8px;overflow:hidden;background:#e8e8f0;}
.capture-img-wrap img{width:100%;display:block;}
.capture-note{font-size:12px;color:var(--text2);margin-top:8px;line-height:1.6;}
.capture-credit{font-size:9px;color:#b0b0c0;margin-top:6px;text-align:right;}

/* ══════════════════════════════════════
   ノベルゲーム フルスクリーンモード
══════════════════════════════════════ */
.sp-launch-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--cv-grad);color:#fff;border:none;border-radius:16px;
  padding:22px;font-size:15px;font-weight:900;font-family:var(--font);
  cursor:pointer;box-shadow:0 6px 18px rgba(255,111,165,.28);
}
.sp-launch-btn i{font-size:14px;}

/* サムネイルカード（YouTube風・起動ボタンの発展形） */
.case-thumb{border-radius:16px;overflow:hidden;background:var(--card);cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.08);transition:.15s;border:1px solid var(--border);}
.case-thumb:not(.locked):hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,111,165,.2);}
.ct-img-wrap{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#FFD1E0,#C9F3E6);overflow:hidden;}
.ct-img{width:100%;height:100%;object-fit:cover;display:block;}
.ct-img-placeholder{width:100%;height:100%;}
.ct-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.15);color:#fff;font-size:0;
}
.ct-play i{
  font-size:20px;background:rgba(255,255,255,.9);color:var(--cv-purple);
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.ct-body{padding:12px 14px;}
.ct-title{font-size:14px;font-weight:900;color:var(--text);}
.ct-meta{font-size:11px;color:var(--text2);margin-top:3px;}

/* ロック中（まだ遊べない）カード */
.case-thumb.locked{cursor:default;}
.case-thumb.locked .ct-img{filter:grayscale(.6) brightness(.75);}
.ct-lock-veil{position:absolute;inset:0;background:rgba(30,20,40,.35);}
.ct-stella-flag{
  position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.95);border-radius:99px;padding:6px 14px 6px 6px;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
}
.ct-stella-flag img{width:30px;height:30px;border-radius:50%;background:#eef;}
.ct-stella-flag span{font-size:12px;font-weight:900;color:var(--cv-purple);}
.case-thumb.locked .ct-title, .case-thumb.locked .ct-meta{opacity:.5;}

body.sp-lock-scroll{overflow:hidden;}

.sp-overlay{
  position:fixed;inset:0;z-index:9999;
  background:linear-gradient(160deg, #FFE9D6 0%, #FFD1E0 45%, #C9F3E6 100%);
  opacity:0;transform:scale(.97);
  transition:opacity .32s ease, transform .32s ease;
  display:flex;flex-direction:column;
}
.sp-overlay.show{opacity:1;transform:scale(1);}
.sp-overlay .sp-progress{padding:calc(env(safe-area-inset-top,0px) + 18px) 16px 0;}
.sp-stage-full{flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:0;}
.sp-stage-full .sp-illust{flex:1;min-height:0;align-items:flex-end;padding-bottom:0;}
.sp-stage-full .sp-bust-wrap{width:auto;max-width:32%;height:auto;display:flex;align-items:flex-end;}
.sp-stage-full .sp-bust-wrap.two:first-child{margin-right:-6%;}
.sp-stage-full .sp-bust{height:auto;max-height:38vh;width:auto;max-width:100%;object-fit:contain;}
.sp-stage-full .sp-panel{padding:clamp(16px,3vw,26px) clamp(16px,3.4vw,30px) calc(env(safe-area-inset-bottom,0px) + clamp(18px,2.8vw,26px));}
.sp-stage-full .chat-name{font-size:clamp(12px,1.9vw,16px);}
/* セリフは大きく。ただし1/3幅などの狭い表示ではvwで自動縮小 */
.sp-stage-full .chat-text{font-size:clamp(16px,2.8vw,24px);line-height:1.8;min-height:auto;}
.sp-stage-full .send-btn{font-size:clamp(13px,1.9vw,16px);padding:clamp(10px,1.6vw,14px) clamp(16px,2.6vw,24px);}
.sp-stage-full .choice-q{font-size:clamp(14px,2.3vw,20px);}
.sp-stage-full .choice-opt{font-size:clamp(13px,2.1vw,18px);padding:clamp(11px,1.8vw,16px) clamp(12px,2vw,18px);}
.sp-stage-full .choice-feedback{font-size:clamp(13px,2.1vw,17px);}
/* 右端は「つづきを聞く」ボタンの定位置。選択肢を横いっぱいにせず、
   右側を空けて誤タップ（送信のつもりで選択肢を押す）を防ぐ */
.sp-stage-full .choice-opts{padding-right:clamp(76px,17vw,200px);}

/* ══════════════════════════════════════
   ゲージ（思いやりハート等・テーマにより差し替え）
   ※ノベルパート（オーバーレイ）内にのみ表示する。ページ全体への
     固定表示はしない。大きめ＋狭幅ではvwで自動縮小する。
══════════════════════════════════════ */
.gauge-widget{
  position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:14px;z-index:20;
  display:flex;align-items:center;gap:clamp(6px,1.4vw,12px);
  padding:clamp(8px,1.5vw,13px) clamp(12px,2.2vw,22px);
  background:var(--card);border-radius:99px;border:1px solid var(--border);
  width:fit-content;max-width:calc(100% - 28px);box-shadow:0 6px 18px rgba(0,0,0,.14);
}
.gauge-label{font-size:clamp(11px,1.9vw,15px);font-weight:900;color:var(--text2);white-space:nowrap;}
.gauge-row{display:flex;gap:clamp(4px,1vw,7px);}
.gauge-seg{position:relative;width:clamp(26px,4.9vw,40px);height:clamp(26px,4.9vw,40px);display:inline-block;}
.gauge-seg i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(24px,4.6vw,38px);line-height:1;}
.gauge-bg{color:var(--border);}
.gauge-fill{color:var(--cv-purple);transition:clip-path .3s ease;}

/* 選択直後：得点相当のアイコンを画面中央に大きく表示する演出 */
.point-burst{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:25;pointer-events:none;}
.point-burst .pb-inner{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1vw,10px);animation:pbPop .5s cubic-bezier(.2,1.3,.4,1) both;}
.point-burst.leave .pb-inner{animation:pbLeave .18s ease forwards;}
.point-burst .pb-ic{font-size:clamp(70px,17vw,130px);line-height:1;filter:drop-shadow(0 8px 16px rgba(0,0,0,.22));}
.point-burst .pb-label{font-size:clamp(26px,7vw,52px);font-weight:900;letter-spacing:.02em;}
.point-burst.is-full .pb-ic,.point-burst.is-full .pb-label{color:var(--cv-purple);}
.point-burst.is-half .pb-label{color:var(--cv-purple);}
.point-burst.is-zero .pb-ic,.point-burst.is-zero .pb-label{color:var(--text2);}
.point-burst .pb-half{position:relative;display:inline-block;width:1em;height:1em;font-size:clamp(70px,17vw,130px);line-height:1;filter:drop-shadow(0 8px 16px rgba(0,0,0,.22));}
.point-burst .pb-half i{position:absolute;left:0;top:0;font-size:inherit;line-height:1;}
.point-burst .pb-half .pb-ic-bg{color:var(--border);}
.point-burst .pb-half .pb-ic-fill{color:var(--cv-purple);clip-path:inset(0 50% 0 0);}
@keyframes pbPop{0%{transform:scale(0) rotate(-25deg);opacity:0}60%{transform:scale(1.2) rotate(8deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes pbLeave{to{transform:scale(.4);opacity:0}}

/* アイコンが飛んでゲージに吸い込まれる演出 */
.gauge-fly-icon{
  position:fixed;z-index:10005;font-size:clamp(28px,5vw,38px);color:var(--cv-purple);
  pointer-events:none;
  transition:left 1.3s cubic-bezier(.2,.6,.3,1), top 1.3s cubic-bezier(.2,.6,.3,1),
             transform 1.3s ease, opacity 1.3s ease;
}
.gauge-fly-icon.is-half{color:var(--cv-purple);opacity:.75;}
.gauge-fly-icon.is-empty{color:var(--text2);}

/* ボイスON/OFFトグル（ゲージと対になる左上ボタン・オーバーレイ内） */
.voice-toggle{
  position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);left:14px;z-index:20;
  width:clamp(38px,6.8vw,48px);height:clamp(38px,6.8vw,48px);border-radius:50%;
  background:var(--card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.14);cursor:pointer;color:var(--text2);font-size:clamp(15px,2.8vw,18px);
}