/* ===== ワークエスト 説明（デモ）ページ ===== */
#guide-screen {
  position: fixed; inset: 0; z-index: 200;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
  color: var(--gray-900);
  background:
    radial-gradient(1100px 560px at 82% -8%, #FFE6D2 0%, transparent 58%),
    radial-gradient(900px 480px at -12% 18%, #FDE6CC 0%, transparent 55%),
    var(--bg);
}
.g-wrap { max-width: 880px; margin: 0 auto; padding: 0 20px 60px; }

/* 上部「理解度」バー（スクロールで貯まる） */
.g-xpbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: rgba(40,24,12,0.92); backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(38,22,10,0.20);
}
.g-xpbar .g-back { background: rgba(255,255,255,0.16); border: none; border-radius: 10px; width: 34px; height: 34px; font-size: 1.1rem; cursor: pointer; color: #fff; flex-shrink: 0; }
.g-xpbar .g-back:hover { background: rgba(255,255,255,0.28); }
.g-lvbadge { flex-shrink: 0; font-weight: 800; font-size: .95rem; color: #fff; background: linear-gradient(135deg, var(--primary), #FF9A4C); padding: 7px 14px; border-radius: 10px; box-shadow: 0 2px 8px rgba(255,107,53,.5); white-space: nowrap; }
.g-lvbadge.pulse { animation: glvpulse .6s ease; }
@keyframes glvpulse { 0%,100%{transform:scale(1)} 40%{transform:scale(1.22)} }
.g-xptrack { position: relative; flex: 1; height: 24px; background: rgba(0,0,0,0.35); border-radius: 999px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,.4); border: 1.5px solid rgba(255,255,255,0.12); }
.g-xpfill { position: absolute; left: 0; top: 0; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #FF6B35, #FFC24B); box-shadow: 0 0 14px rgba(255,160,60,.8); transition: width .2s ease-out; }
.g-xpfill::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(45deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%, transparent); background-size: 22px 22px; animation: gstripes 1s linear infinite; border-radius: 999px; }
@keyframes gstripes { 0%{background-position:0 0} 100%{background-position:22px 0} }
.g-xptext { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); z-index: 1; }
/* レベルごとに色が進化 → MAXでレインボー（Claude Codeのeffort風） */
.g-xpfill.lv1 { background: linear-gradient(90deg,#FF6B35,#FFC24B); }
.g-xpfill.lv2 { background: linear-gradient(90deg,#EC4899,#FB923C); }
.g-xpfill.lv3 { background: linear-gradient(90deg,#8B5CF6,#EC4899); }
.g-xpfill.lv4 { background: linear-gradient(90deg,#3B82F6,#8B5CF6); }
.g-xpfill.lvmax { background: linear-gradient(90deg,#FF6B35,#F59E0B,#10B981,#3B82F6,#8B5CF6,#EC4899,#FF6B35); background-size: 200% 100%; animation: grainbow 1.6s linear infinite; }
.g-lvbadge.lv1 { background: linear-gradient(135deg,#FF6B35,#FF9A4C); }
.g-lvbadge.lv2 { background: linear-gradient(135deg,#EC4899,#FB923C); }
.g-lvbadge.lv3 { background: linear-gradient(135deg,#8B5CF6,#EC4899); }
.g-lvbadge.lv4 { background: linear-gradient(135deg,#3B82F6,#8B5CF6); }
.g-lvbadge.lvmax { background: linear-gradient(90deg,#FF6B35,#F59E0B,#10B981,#3B82F6,#8B5CF6,#EC4899); background-size: 200% 100%; animation: grainbow 1.6s linear infinite; color: #fff; }
@keyframes grainbow { 0%{background-position:0 0} 100%{background-position:200% 0} }
/* 紙吹雪・フラッシュ（MAX到達時） */
.g-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.g-confetti i { position: absolute; top: -24px; border-radius: 2px; animation: gconf linear forwards; }
@keyframes gconf { to { transform: translateY(108vh) rotate(720deg); } }
.g-flash { position: fixed; inset: 0; pointer-events: none; z-index: 49; background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.6), transparent 62%); animation: gfl .95s ease forwards; }
@keyframes gfl { 0%{opacity:0} 25%{opacity:1} 100%{opacity:0} }
.g-replay { background: var(--gray-100); border: none; border-radius: 999px; padding: 9px 18px; font-family: inherit; font-weight: 800; font-size: .85rem; cursor: pointer; color: var(--gray-600); }
.g-replay:hover { background: var(--gray-200); }

/* セクション共通 */
.g-section { padding: 52px 0; }
.g-label { color: var(--primary); font-weight: 800; font-size: .82rem; letter-spacing: .5px; margin-bottom: 8px; }
.g-section h2 { font-size: clamp(1.4rem, 5vw, 1.85rem); font-weight: 800; line-height: 1.45; margin: 0 0 22px; }

/* 出現アニメ */
.g-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.g-reveal.in { opacity: 1; transform: none; }

/* ヒーロー */
.g-hero { text-align: center; padding-top: 72px; }
.g-badge { display: inline-block; padding: 5px 14px; border-radius: 999px; background: var(--primary-light); color: var(--primary); font-weight: 800; font-size: .8rem; margin-bottom: 18px; }
.g-hero h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); font-weight: 800; line-height: 1.3; margin: 0 0 14px; }
.g-hero .lead { font-size: clamp(1rem, 3.5vw, 1.15rem); color: var(--gray-600); margin: 0 auto; max-width: 620px; line-height: 1.7; }
.g-scrollhint { margin-top: 28px; color: var(--gray-400); font-weight: 800; font-size: .85rem; animation: gbounce 1.7s infinite; }
@keyframes gbounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }

/* 画像（生成枠 / 差し込み後はimg） */
.g-img {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  background: repeating-linear-gradient(45deg, var(--gray-100), var(--gray-100) 12px, var(--gray-200) 12px, var(--gray-200) 24px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--gray-500); font-weight: 700; min-height: 230px; padding: 24px; font-size: .9rem;
}
.g-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 痛みカード */
.g-pains { display: grid; gap: 14px; }
@media (min-width: 680px) { .g-pains { grid-template-columns: repeat(3, 1fr); } }
.g-pain { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); }
.g-pain .ic { font-size: 1.8rem; }
.g-pain .t { font-weight: 700; margin-top: 8px; line-height: 1.55; }

/* 実演カード（その場でレベルアップ） */
.g-demo { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 20px; background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); margin-top: 8px; }
.g-democard { width: 250px; max-width: 100%; background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow); text-align: center; position: relative; }
.g-democard .ic { width: 64px; height: 64px; border-radius: 16px; background: var(--primary-light); display: flex; align-items: center; justify-content: center; font-size: 2.1rem; margin: 0 auto 10px; transition: transform .3s; }
.g-democard.pop .ic { transform: scale(1.28) rotate(-4deg); }
.g-democard .nm { font-weight: 800; font-size: 1.05rem; }
.g-democard .rk { font-size: .85rem; color: var(--gray-500); margin-top: 2px; }
.g-democard .bar { height: 10px; background: var(--gray-100); border-radius: 999px; overflow: hidden; margin-top: 12px; }
.g-democard .barfill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--exp), #6EE7B7); border-radius: 999px; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.g-float { position: absolute; right: 16px; top: 64px; color: var(--exp); font-weight: 800; opacity: 0; pointer-events: none; }
.g-float.go { animation: gfloat 1.1s ease-out; }
@keyframes gfloat { 0%{opacity:0;transform:translateY(6px)} 25%{opacity:1} 100%{opacity:0;transform:translateY(-34px)} }
.g-levelup { font-weight: 800; color: var(--primary); font-size: 1.15rem; opacity: 0; transform: scale(.6); }
.g-levelup.go { animation: glevel .8s; }
@keyframes glevel { 0%{opacity:0;transform:scale(.6)} 45%{opacity:1;transform:scale(1.18)} 100%{opacity:1;transform:scale(1)} }

/* 3点 / 4点 / カード */
.g-3 { display: grid; gap: 14px; }
@media (min-width: 680px) { .g-3 { grid-template-columns: repeat(3, 1fr); } }
.g-4 { display: grid; gap: 14px; }
@media (min-width: 680px) { .g-4 { grid-template-columns: repeat(2, 1fr); } }
.g-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); }
.g-card .ic { font-size: 1.7rem; }
.g-card .t { font-weight: 800; margin: 8px 0 4px; line-height: 1.45; }
.g-card .d { color: var(--gray-600); font-size: .92rem; line-height: 1.6; }

/* 流れ図 */
.g-flow { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 760px) { .g-flow { flex-direction: row; align-items: stretch; } }
.g-step { flex: 1; background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow); text-align: center; }
.g-step .ic { font-size: 1.6rem; }
.g-step .t { font-weight: 800; margin-top: 6px; font-size: .95rem; }
.g-step .d { font-size: .8rem; color: var(--gray-500); margin-top: 4px; }
.g-arrow { display: flex; align-items: center; justify-content: center; color: var(--primary); font-weight: 800; font-size: 1.3rem; transform: rotate(90deg); }
@media (min-width: 760px) { .g-arrow { transform: none; } }

/* レーダー（出現時に描画） */
.g-radar-wrap { display: flex; justify-content: center; }
.g-radar { width: 100%; max-width: 360px; opacity: 0; transform: scale(.85); transition: opacity .8s ease, transform .8s ease; }
.g-radar.in { opacity: 1; transform: scale(1); }

/* 立場別 */
.g-roles { display: grid; gap: 14px; }
@media (min-width: 680px) { .g-roles { grid-template-columns: repeat(3, 1fr); } }
.g-role { background: var(--white); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); border-top: 4px solid var(--primary); }
.g-role .who { color: var(--primary); font-weight: 800; font-size: .8rem; }
.g-role h3 { margin: 4px 0 8px; font-size: 1.05rem; line-height: 1.4; }

/* CTA */
.g-cta { margin-top: 34px; }
.g-cta-card {
  position: relative; overflow: hidden; text-align: center; color: #fff;
  background-image: linear-gradient(150deg, rgba(255,124,62,.78), rgba(255,107,53,.64) 50%, rgba(226,86,40,.85)), url('../img/guide-cta-bg.png');
  background-size: cover; background-position: center;
  border-radius: 28px; padding: 52px 28px; box-shadow: 0 24px 60px rgba(255,107,53,.42);
}
.g-cta-card::after { content: ''; position: absolute; inset: 0; border-radius: 28px; box-shadow: inset 0 0 90px rgba(150,50,15,.28); pointer-events: none; }
.g-cta-badge { position: relative; display: inline-block; background: rgba(255,255,255,.26); border-radius: 999px; padding: 9px 22px; font-weight: 800; font-size: 1.02rem; margin-bottom: 18px; backdrop-filter: blur(4px); }
.g-logo-pill { position: relative; display: inline-block; background: #fff; border-radius: 22px; padding: 20px 40px; box-shadow: 0 14px 34px rgba(0,0,0,.28); margin-bottom: 20px; }
.g-logo-pill img { height: 66px; display: block; }
.g-cta-card h2 { position: relative; color: #fff; font-size: clamp(1.7rem, 6.2vw, 2.4rem); margin: 0 0 12px; text-shadow: 0 3px 16px rgba(150,50,15,.45); }
.g-cta-sub { position: relative; opacity: .98; line-height: 1.7; margin: 0 auto 24px; max-width: 480px; text-shadow: 0 1px 8px rgba(150,50,15,.35); }
.g-cta-btn { position: relative; background: #fff; color: var(--primary); font-weight: 800; border: none; border-radius: 999px; padding: 18px 44px; font-family: inherit; font-size: 1.15rem; cursor: pointer; box-shadow: 0 12px 30px rgba(0,0,0,.3); transition: transform .15s; }
.g-cta-btn:hover { transform: translateY(-2px); }
.g-cta-note { position: relative; opacity: .95; font-size: .82rem; margin-top: 16px; text-shadow: 0 1px 6px rgba(150,50,15,.3); }

/* 生成画像 */
.g-photo { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: block; }

/* ロゴ */
.g-logo { width: 100%; max-width: 280px; margin: 0 auto 18px; display: block; }
.g-cta-logo { width: 100%; max-width: 200px; margin: 0 auto 14px; display: block; filter: brightness(0) invert(1); opacity: .95; }

/* 製品UIモックアップ（HTMLで本物そっくり） */
.g-hero-stage { margin-top: 26px; display: flex; justify-content: center; }
.g-screen { background: var(--white); border: 1px solid var(--gray-100); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 16px; width: 100%; max-width: 360px; text-align: left; }
.mk-head { font-weight: 800; font-size: .9rem; color: var(--gray-600); padding: 4px 4px 10px; border-bottom: 1px solid var(--gray-100); margin-bottom: 10px; }
.mk-radar { padding: 4px 0 8px; }
.mk-cards { display: grid; gap: 8px; }
.mk-card { background: var(--gray-50); border-radius: 12px; padding: 10px 12px; }
.mk-card-top { display: flex; justify-content: space-between; align-items: center; }
.mk-name { font-weight: 800; font-size: .9rem; }
.mk-exp { font-weight: 800; font-size: .8rem; color: var(--exp); }
.mk-bar { height: 8px; background: var(--gray-200); border-radius: 999px; overflow: hidden; margin: 6px 0 4px; }
.mk-bar-fill { height: 100%; background: linear-gradient(90deg, var(--exp), #6EE7B7); border-radius: 999px; }
.mk-rank { font-size: .76rem; color: var(--gray-500); font-weight: 700; }
/* リキャップ・結果のミニ */
.mk-recap { background: linear-gradient(135deg, #FF8A4C, #FF6B35); color: #fff; border-radius: 16px; padding: 16px; }
.mk-recap-t { font-weight: 800; }
.mk-recap-sub { font-size: .8rem; opacity: .9; margin-top: 2px; }
.mk-recap-exp { font-size: 1.8rem; font-weight: 800; margin: 4px 0 8px; }
.mk-recap-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.mk-recap-chips span { background: rgba(255,255,255,.22); border-radius: 999px; padding: 2px 9px; font-size: .72rem; font-weight: 700; }
.mk-result-hero { text-align: center; font-size: 1.5rem; padding-bottom: 8px; border-bottom: 1px solid var(--gray-100); margin-bottom: 8px; }
.mk-result-exp { font-size: 1.8rem; font-weight: 800; color: var(--primary); }
.mk-result-sub { font-size: .8rem; color: var(--gray-500); }
.mk-skill { display: flex; justify-content: space-between; align-items: center; padding: 7px 4px; font-size: .88rem; font-weight: 600; border-bottom: 1px solid var(--gray-50); }
.mk-chip { background: var(--exp-light); color: var(--exp); font-weight: 800; font-size: .76rem; padding: 2px 9px; border-radius: 999px; }
.mk-mini { padding: 10px; }

/* 2カラム */
.g-two { display: grid; gap: 18px; align-items: stretch; }
@media (min-width: 720px) { .g-two { grid-template-columns: 1fr 1fr; } }
.g-two-cell { display: flex; flex-direction: column; }
.g-two-cell .g-photo, .g-two-cell .g-screen { flex: 1; }
.g-two-cell .g-demo { flex: 1; }
.g-cap { text-align: center; font-size: .85rem; color: var(--gray-500); font-weight: 700; margin-top: 10px; }

/* 実際の画面ストリップ */
.g-screens { display: grid; gap: 14px; }
@media (min-width: 720px) { .g-screens { grid-template-columns: repeat(3, 1fr); } }
.g-screen-card { background: var(--white); border: 1px solid var(--gray-100); border-radius: 18px; box-shadow: var(--shadow); padding: 12px; display: flex; flex-direction: column; }
.g-screen-card > .g-screen, .g-screen-card > .mk-recap { box-shadow: none; border: none; padding: 6px; max-width: none; }
.g-screen-cap { text-align: center; font-size: .8rem; color: var(--gray-500); font-weight: 800; margin-top: 8px; }
.g-screens-4 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .g-screens-4 { grid-template-columns: repeat(2, 1fr); } }

/* ===== プロダクトツアー ===== */
.wqt-overlay { position: fixed; inset: 0; z-index: 9999; }
.wqt-overlay.wqt-hidden { display: none; }
.wqt-hole { position: fixed; display: none; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(20,12,4,0.55); transition: all .3s ease; pointer-events: none; }
.wqt-pop {
  position: fixed; width: 284px; max-width: 90vw; z-index: 10000;
  background: #fff; border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.32); transition: top .3s ease, left .3s ease;
}
.wqt-title { font-weight: 800; font-size: 1.02rem; margin-bottom: 6px; }
.wqt-text { font-size: .9rem; color: var(--gray-600); line-height: 1.65; }
.wqt-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.wqt-count { font-size: .76rem; color: var(--gray-400); font-weight: 800; }
.wqt-next { background: var(--primary); color: #fff; border: none; border-radius: 999px; padding: 9px 18px; font-family: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 4px 12px rgba(255,107,53,.3); }
.wqt-skip { background: none; border: none; color: var(--gray-400); font-family: inherit; font-weight: 700; cursor: pointer; margin-right: 6px; }
.wqt-pop { transition: opacity .25s ease, top .3s ease, left .3s ease; }

/* ===== デモ操作バー（迷子防止・常時表示） ===== */
.wqd-bar {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 150;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center;
  background: rgba(40,24,12,0.94); backdrop-filter: blur(8px);
  padding: 8px 12px; border-radius: 999px; box-shadow: 0 8px 28px rgba(0,0,0,0.28); max-width: 94vw;
}
.wqd-bar.wqd-hidden { display: none; }
.wqd-tag { color: #fff; font-weight: 800; font-size: .78rem; padding: 0 6px; opacity: .9; }
.wqd-bar button { background: rgba(255,255,255,0.14); color: #fff; border: none; border-radius: 999px; padding: 7px 12px; font-family: inherit; font-weight: 700; font-size: .8rem; cursor: pointer; white-space: nowrap; }
.wqd-bar button:hover { background: rgba(255,255,255,0.26); }
.wqd-bar button.wqd-cta { background: linear-gradient(135deg, var(--primary), #FF9A4C); box-shadow: 0 2px 8px rgba(255,107,53,.5); }

/* ===== 問い合わせ（面談予約）ページ ===== */
.wqc-screen { position: fixed; inset: 0; z-index: 210; overflow-y: auto; background: radial-gradient(1000px 500px at 80% -10%, #FFE6D2, transparent 60%), var(--bg); }
.wqc-screen.wqc-hidden { display: none; }
.wqc-inner { max-width: 720px; margin: 0 auto; padding: 40px 20px 110px; text-align: center; }
.wqc-logo { width: 100%; max-width: 240px; margin: 0 auto 18px; display: block; }
.wqc-h { font-size: clamp(1.4rem, 5vw, 1.9rem); font-weight: 800; margin: 0 0 10px; }
.wqc-sub { color: var(--gray-600); line-height: 1.7; margin: 0 auto 22px; max-width: 540px; }
.wqc-frame { width: 100%; height: 640px; border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background: #fff; }
.wqc-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 300px; background: var(--white); border: 2px dashed var(--gray-300); border-radius: var(--radius-lg); color: var(--gray-500); font-weight: 800; padding: 24px; }
.wqc-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.wqc-btns button { background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 999px; padding: 10px 18px; font-family: inherit; font-weight: 700; cursor: pointer; color: var(--gray-700); }
.wqc-btns button:hover { border-color: var(--primary); color: var(--primary); }