/* ============================================================
   創造舎 全社員総会 講演スライド
   和モダン×クラフト：生成り × 墨 × 朱
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600;700;800&family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

:root{
  /* 3色＋補助 */
  --c-base:#F2ECDD;        /* 生成り（和紙） */
  --c-base-2:#E8E0CD;      /* やや濃い生成り */
  --c-main:#211C16;        /* 墨 */
  --c-accent:#B14A2F;      /* 朱・弁柄 */
  --c-accent-soft:#EFDDD4; /* 朱の淡色 */
  --c-text:#2B2620;
  --c-text-muted:#766C5D;
  --c-card:#FBF7EE;
  --c-border:rgba(33,28,22,0.14);
  --c-line:rgba(33,28,22,0.10);
  --c-card-2:rgba(255,255,255,0.06);
  --shadow-soft:0 10px 30px rgba(33,28,22,.14); /* UIオーバーレイ専用 */

  --font-serif:"Shippori Mincho","Noto Serif JP",serif;
  --font-sans:"Noto Sans JP",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{height:100%}
body{
  font-family:var(--font-sans);
  color:var(--c-text);
  background:var(--c-base);
  overflow:hidden;
}

:lang(ja){line-break:strict}

/* ===== Stage / Slide ===== */
.slide-stage{
  width:100vw;height:100vh;
  display:grid;place-items:center;
  background:var(--c-base);
}
.slide{
  width:100vw;height:100vh;
  max-width:calc(100vh * 16 / 9);
  max-height:calc(100vw * 9 / 16);
  margin:auto;position:relative;overflow:hidden;
  container-type:inline-size;
  background:var(--c-base);
  display:none;
}
.slide.active{display:flex;flex-direction:column}
/* 手書きループ図の地色に合わせて自然に馴染ませる */
.slide.loop-bg{background:#F6F1E5}

/* フェード */
.slide.active{animation:fade .28s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ===== Safe area content wrapper ===== */
.s-content{
  width:100%;height:100%;
  padding:6cqw 8cqw;
  box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;z-index:2;
}

/* ===== Typography scale (cqw) ===== */
.slide-hero{font-family:var(--font-serif);font-size:7cqw;font-weight:800;line-height:1.18;letter-spacing:.03em}
.slide-h1{font-family:var(--font-serif);font-size:4.8cqw;font-weight:700;line-height:1.22;letter-spacing:.02em}
.slide-h2{font-family:var(--font-serif);font-size:3.2cqw;font-weight:700;line-height:1.26;letter-spacing:.02em}
.slide-h3{font-family:var(--font-serif);font-size:2.2cqw;font-weight:600;line-height:1.3}
.slide-title{font-family:var(--font-sans);font-size:2cqw;font-weight:400;line-height:1.5}
.slide-body{font-family:var(--font-sans);font-size:1.6cqw;font-weight:400;line-height:1.6;letter-spacing:.02em}
.slide-caption{font-family:var(--font-sans);font-size:1.15cqw;font-weight:300;letter-spacing:.08em;color:var(--c-text-muted)}
.slide-micro{font-family:var(--font-sans);font-size:.9cqw;font-weight:300;letter-spacing:.05em}
.slide-number{font-family:var(--font-serif);font-size:13cqw;font-weight:800;line-height:.9;color:var(--c-accent);letter-spacing:.01em}

.slide-hero,.slide-h1,.slide-h2,.slide-h3{word-break:normal;overflow-wrap:normal;text-wrap:balance}
.slide-title,.slide-body,.slide-caption,li{word-break:normal;overflow-wrap:normal;text-wrap:pretty}

/* ===== Common motifs ===== */
.kicker{
  font-family:var(--font-sans);font-size:1.2cqw;font-weight:500;
  letter-spacing:.22em;color:var(--c-accent);
  display:inline-flex;align-items:center;gap:1cqw;margin-bottom:2.4cqw;
}
.kicker::before{
  content:"";width:3.4cqw;height:0.18cqw;background:var(--c-accent);display:inline-block;
}
.accent-bar{border-left:0.35cqw solid var(--c-accent);padding-left:2.2cqw}
.ink{color:var(--c-main)}
.accent{color:var(--c-accent)}
.em{color:var(--c-accent);font-weight:700}

/* under-line for headings */
.rule{width:8cqw;height:0.2cqw;background:var(--c-main);margin:2.4cqw 0}
.rule.accent-rule{background:var(--c-accent)}

/* ===== Photo full ===== */
.s-photo{position:absolute;inset:0;z-index:0}
.s-photo img{width:100%;height:100%;object-fit:cover;display:block}
.s-scrim{position:absolute;inset:0;z-index:1}
.s-scrim.left{background:linear-gradient(90deg,rgba(20,16,12,.82) 0%,rgba(20,16,12,.55) 45%,rgba(20,16,12,.15) 100%)}
.s-scrim.bottom{background:linear-gradient(0deg,rgba(20,16,12,.85) 0%,rgba(20,16,12,.35) 45%,rgba(20,16,12,.05) 100%)}
.s-scrim.even{background:rgba(20,16,12,.58)}
.s-scrim.even-strong{background:rgba(20,16,12,.66)}
.on-photo{color:#F6F1E6}
.on-photo .kicker{color:#E7A98F}
.on-photo .kicker::before{background:#E7A98F}
.on-photo .slide-caption{color:rgba(246,241,230,.78)}

/* ===== Cards (3-column commons) ===== */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;margin-top:1.5cqw}
.card{
  background:var(--c-card);border:0.1cqw solid var(--c-border);
  border-top:0.35cqw solid var(--c-accent);
  border-radius:0;padding:3cqw 2.6cqw;display:flex;flex-direction:column;gap:1.4cqw;height:100%;
}
.card .cnum{font-family:var(--font-serif);font-size:3.4cqw;font-weight:800;color:var(--c-accent);line-height:1}
.card .chead{font-family:var(--font-serif);font-size:2cqw;font-weight:700;color:var(--c-main);line-height:1.3}
.card .cbody{font-size:1.35cqw;line-height:1.6;color:var(--c-text-muted)}

/* ===== Steps (tips) ===== */
.steps{display:flex;flex-direction:column;gap:2.4cqw;margin-top:2cqw}
.step{display:grid;grid-template-columns:5cqw 1fr;gap:2.6cqw;align-items:center;
  padding-bottom:2.4cqw;border-bottom:0.1cqw solid var(--c-line)}
.step:last-child{border-bottom:none;padding-bottom:0}
.step .snum{font-family:var(--font-serif);font-size:2.6cqw;font-weight:600;color:var(--c-accent);line-height:1;text-align:center;opacity:.6}
.step .stext .sh{font-family:var(--font-serif);font-size:3.4cqw;font-weight:700;color:var(--c-main);line-height:1.25}
.step .stext .sb{font-size:1.6cqw;color:var(--c-text-muted);margin-top:1cqw;line-height:1.55}

/* ===== Loop (civil war) ===== */
.loop{display:flex;flex-direction:column;align-items:flex-start;gap:1.1cqw;margin-top:1cqw}
.loop-row{display:flex;align-items:center;gap:1.1cqw}
.loop-turn{color:var(--c-accent);font-size:1.8cqw;font-weight:700;margin-left:3.4cqw;line-height:1}
.loop .node{
  background:var(--c-card);border:0.1cqw solid var(--c-border);
  padding:1.1cqw 1.6cqw;font-size:1.45cqw;font-weight:500;color:var(--c-main);white-space:nowrap;
}
.loop .node.last{border:0.2cqw solid var(--c-accent);color:var(--c-accent);font-weight:700;background:var(--c-accent-soft)}
.loop .arr{color:var(--c-accent);font-size:1.8cqw;font-weight:700}

/* ===== Big number layout ===== */
.bn-wrap{display:grid;grid-template-columns:auto 1fr;gap:5cqw;align-items:center}
.bn-unit{font-family:var(--font-serif);font-size:2.6cqw;font-weight:700;color:var(--c-main);margin-left:1cqw}

/* ===== split (photo + text) ===== */
.s-split{display:grid;grid-template-columns:1fr 1fr;height:100%;z-index:2;position:relative}
.s-split .half-img{position:relative;overflow:hidden}
.s-split .half-img img{width:100%;height:100%;object-fit:cover}
.s-split .half-text{padding:6cqw 6cqw;display:flex;flex-direction:column;justify-content:center}

/* three words row (strength intro) */
.words3{display:flex;gap:3cqw;margin-top:3cqw}
.words3 .w{font-family:var(--font-serif);font-size:3.4cqw;font-weight:700}
.words3 .sep{font-size:3cqw;color:rgba(246,241,230,.5);font-weight:300}

/* ===== Self intro (reference/1.png 型) ===== */
.intro-split{display:grid;grid-template-columns:28% 1fr;height:100%;gap:5cqw;padding:6cqw 8cqw;box-sizing:border-box;align-items:center}
.intro-portrait{height:80%;align-self:center;overflow:hidden;border:0.1cqw solid var(--c-border);border-radius:0.8cqw}
.intro-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block}
.intro-info{display:flex;flex-direction:column;justify-content:center}
.name-row{display:flex;align-items:baseline;gap:2cqw;margin-top:0.6cqw}
.intro-name{font-family:var(--font-serif);font-size:4.4cqw;font-weight:800;color:var(--c-main);line-height:1.1}
.name-romaji{font-family:var(--font-sans);font-size:1.3cqw;letter-spacing:.18em;color:var(--c-text-muted)}
.intro-title{font-family:var(--font-sans);font-size:1.55cqw;font-weight:600;color:var(--c-main);margin-top:1cqw;line-height:1.5}
.cred{list-style:none;display:flex;flex-direction:column;gap:0.9cqw;margin:0 0 2.4cqw}
.cred li{font-size:1.35cqw;line-height:1.5;color:var(--c-text);display:flex;gap:1.2cqw}
.cred li::before{content:"";flex:none;width:0.9cqw;height:0.9cqw;margin-top:0.5cqw;background:var(--c-accent)}
.intro-tagline{font-family:var(--font-serif);font-size:2.4cqw;font-weight:700;color:var(--c-main);margin-top:0.6cqw}

/* ===== Civil-war: 大ワード＋元素材ループ図 ===== */
.civ-row{display:grid;grid-template-columns:1fr 1.1fr;gap:3cqw;align-items:center;margin-top:1cqw}
.civ-left{display:flex;flex-direction:column;justify-content:flex-start;align-self:stretch;padding-top:1cqw}
.civ-big{font-family:var(--font-serif);font-size:8cqw;font-weight:800;color:var(--c-accent);line-height:1.02;margin-bottom:2.4cqw}
.civ-fig{display:flex;align-items:center;justify-content:center}
.civ-fig img{width:100%;height:auto;max-height:62cqh;object-fit:contain;display:block}

/* ===== Strength big word (S7/8/9 共通) ===== */
.big-word{font-family:var(--font-serif);font-size:6.8cqw;font-weight:800;color:var(--c-accent);line-height:1.05;letter-spacing:.04em}
.word-sub{font-family:var(--font-serif);font-size:2.6cqw;font-weight:700;color:var(--c-main);margin-top:0.8cqw}
.words3.big{margin-top:4cqw;gap:3.4cqw}
.words3.big .w{font-size:5.2cqw}
.words3.big .sep{font-size:4cqw}

/* slogan climax: full image + ink bar */
.slogan-full-img{flex:1;display:flex;align-items:center;justify-content:center;background:var(--c-base);overflow:hidden;padding:2cqw}
.slogan-full-img img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.slogan-bar{background:var(--c-main);color:#F6F1E6;padding:1.5cqw 8cqw 3.3cqw;text-align:center}
.slogan-bar p{font-family:var(--font-serif);font-size:2.7cqw;font-weight:700;line-height:1.4}
.slogan-bar .bar-sub{display:block;font-family:var(--font-sans);font-size:1.3cqw;font-weight:400;color:rgba(246,241,230,.78);margin-top:0.9cqw;letter-spacing:.03em}

/* closing mark */
.close-mark{width:5cqw;height:0.25cqw;background:var(--c-accent);margin:0 auto 3cqw}

/* lists */
.body-list{display:flex;flex-direction:column;gap:1.4cqw;margin-top:1cqw}
.body-list li{list-style:none;display:flex;gap:1.4cqw;font-size:1.7cqw;line-height:1.55;color:var(--c-text)}
.body-list li::before{content:"";flex:none;width:1.1cqw;height:1.1cqw;margin-top:0.7cqw;background:var(--c-accent)}

/* ============================================================
   UI Overlay（スライド外・px固定）
   ============================================================ */
.topbar{
  position:fixed;top:0;left:0;right:0;height:56px;z-index:60;
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:0 18px;pointer-events:none;
}
.topbar > *{pointer-events:auto}
.status{
  font-size:12px;color:var(--c-text-muted);letter-spacing:.04em;
  background:rgba(251,247,238,.82);padding:6px 12px;border-radius:18px;border:1px solid var(--c-border);
}
.status b{color:var(--c-accent);font-weight:700}
.menu-btn{
  width:40px;height:40px;border:1px solid var(--c-border);background:rgba(251,247,238,.92);
  border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:4px;
}
.menu-btn span{display:block;width:18px;height:2px;background:var(--c-main)}

/* progress */
.progress{position:fixed;top:0;left:0;height:3px;background:var(--c-accent);z-index:61;transition:width .28s ease}

/* 本番（プレゼン）モード：画面共有で邪魔なUIを隠す（右上メニュー群・左下ガイド） */
body.present-mode .topbar,
body.present-mode .memo-btn,
body.present-mode .hint{display:none !important}

/* sidebar */
.sidebar{
  position:fixed;top:0;right:0;width:340px;max-width:84vw;height:100vh;z-index:120;
  background:var(--c-card);border-left:1px solid var(--c-border);
  transform:translateX(100%);transition:transform .3s ease;
  padding:64px 22px 22px;overflow-y:auto;box-shadow:var(--shadow-soft);
}
.sidebar.open{transform:translateX(0)}
.sidebar h4{font-family:var(--font-serif);font-size:15px;color:var(--c-main);margin:18px 0 8px;letter-spacing:.05em}
.sidebar h4:first-child{margin-top:0}
.sb-item{
  display:flex;gap:10px;align-items:baseline;padding:8px 10px;border-radius:8px;cursor:pointer;
  font-size:13px;color:var(--c-text);transition:background .15s;
}
.sb-item:hover{background:var(--c-accent-soft)}
.sb-item.active{background:var(--c-accent-soft);color:var(--c-accent);font-weight:700}
.sb-item .n{font-family:var(--font-serif);font-size:12px;color:var(--c-text-muted);min-width:20px}
.sb-item.active .n{color:var(--c-accent)}
.sb-close{position:absolute;top:16px;right:18px;background:none;border:none;font-size:24px;color:var(--c-text-muted);cursor:pointer}
.backdrop{position:fixed;inset:0;background:rgba(20,16,12,.4);z-index:110;display:none}
.backdrop.open{display:block}

/* nav click zones */
.nav-area{position:fixed;top:0;bottom:0;width:18%;z-index:50;cursor:pointer}
.nav-area.left{left:0}
.nav-area.right{right:0}

/* notes panel */
.notes-trigger{position:fixed;left:0;right:0;bottom:0;height:42px;z-index:55}
.notes-panel{
  position:fixed;left:0;right:0;bottom:0;z-index:130;
  background:rgba(33,28,22,.95);color:#F2ECDD;
  transform:translateY(100%);transition:transform .2s ease;
  max-height:30vh;overflow-y:auto;padding:22px 64px;
  font-size:15px;line-height:1.8;
}
.notes-panel.open{transform:translateY(0)}
.notes-panel .nlabel{font-family:var(--font-serif);color:#E7A98F;font-size:13px;letter-spacing:.1em;margin-bottom:8px}

/* hint */
.hint{position:fixed;left:18px;bottom:14px;z-index:55;font-size:11px;color:var(--c-text-muted);letter-spacing:.05em;opacity:.7}

/* ===== Memo feature ===== */
.memo-list-btn{
  margin-left:4px;background:var(--c-accent-soft);color:var(--c-accent);
  border:1px solid #e8c8bc;padding:6px 12px;border-radius:18px;cursor:pointer;
  font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;transition:all .15s;
}
.memo-list-btn:hover{background:var(--c-accent);color:#fff}
.memo-list-btn span{
  background:var(--c-accent);color:#fff;border-radius:10px;
  min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;padding:0 5px;
}
.memo-list-btn:hover span{background:#fff;color:var(--c-accent)}
.memo-btn{
  position:fixed;top:64px;right:20px;width:46px;height:46px;border-radius:50%;
  background:var(--c-card);border:1px solid var(--c-border);cursor:pointer;font-size:19px;
  box-shadow:var(--shadow-soft);z-index:54;display:flex;align-items:center;justify-content:center;
  transition:transform .15s,background .15s;
}
.memo-btn:hover{background:var(--c-accent-soft);transform:scale(1.05)}
.memo-dot{
  position:absolute;top:8px;right:8px;width:10px;height:10px;border-radius:50%;
  background:var(--c-accent);display:none;border:2px solid #fff;
}
.memo-btn.has-note .memo-dot{display:block}
.modal{
  position:fixed;inset:0;background:rgba(33,28,22,.5);
  display:none;align-items:center;justify-content:center;z-index:200;padding:20px;
}
.modal.open{display:flex}
.modal-card{
  background:#fff;border-radius:16px;padding:24px;width:520px;max-width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.2);display:flex;flex-direction:column;gap:16px;
}
.modal-card-lg{width:680px;max-height:80vh}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.modal-head strong{font-size:16px;color:var(--c-main)}
.modal-sub{font-size:12px;color:var(--c-text-muted);margin-top:4px}
.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--c-text-muted);padding:0 8px;line-height:1}
.modal-close:hover{color:var(--c-accent)}
#memo-textarea{
  width:100%;min-height:160px;padding:12px;border:1px solid var(--c-border);
  border-radius:8px;font-family:inherit;font-size:14px;line-height:1.6;resize:vertical;
  color:var(--c-text);background:#fdfaf3;
}
#memo-textarea:focus{outline:none;border-color:var(--c-accent)}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.btn-primary{background:var(--c-accent);color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s}
.btn-primary:hover{background:#9b3e26}
.btn-ghost{background:none;color:var(--c-text-muted);border:1px solid var(--c-border);padding:10px 16px;border-radius:8px;font-size:13px;cursor:pointer;transition:all .15s}
.btn-ghost:hover{background:var(--c-accent-soft);color:var(--c-accent);border-color:var(--c-accent)}
.memo-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;max-height:50vh;padding-right:4px}
.memo-list-empty{text-align:center;color:var(--c-text-muted);padding:32px;font-size:13px}
.memo-item{background:#fdfaf3;border:1px solid var(--c-border);border-radius:8px;padding:12px 16px}
.memo-item-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.memo-item-title{font-size:13px;font-weight:700;color:var(--c-accent);cursor:pointer}
.memo-item-title:hover{text-decoration:underline}
.memo-item-text{font-size:13px;color:var(--c-text);line-height:1.7;white-space:pre-wrap}
.memo-item-del{background:none;border:none;color:var(--c-text-muted);cursor:pointer;font-size:14px;padding:2px 6px}
.memo-item-del:hover{color:var(--c-accent)}