/* ============================================================
   た〜や式スライド v2 — 2026-07-30 SHIFT AI 夏旅ワークショップ
   1920x1080 / 20枚
   デザイン規格: .claude/rules/20-design-principles.md 準拠
   色: ベース(ミント) + メイン(オレンジ) + アクセント(水色) + 無彩色
   余白: 8pxグリッド / フォント: 1ファミリー・4段階
   ============================================================ */
:root{
  --mint:#A8E0DB;
  --card:#ffffff;
  --ink:#111111;
  --sub:#5F5F5F;
  --mute:#9A9A9A;
  --orange:#FF6A2A;
  --orange-soft:#FFF1E9;
  --orange-line:#FFC7A8;
  --cyan:#21B8C9;
  --cyan-soft:#E6F7F9;
  --gray-soft:#F2F3F3;
  --gray-line:#DCDCDC;
}
*{margin:0;padding:0;box-sizing:border-box;}
.slide{
  font-family:"BIZ UDPGothic","Yu Gothic UI","Meiryo",sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  position:relative;
  width:1920px;height:1080px;
  background:var(--mint);
  overflow:hidden;
  
}
.card{
  position:absolute;inset:44px;
  background:var(--card);
  border-radius:36px;
  padding:104px 88px 88px;
}
.tape{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  width:180px;height:26px;background:#C9C9C9;border-radius:4px;opacity:.9;
}
.brand{
  position:absolute;top:48px;left:88px;
  font-size:30px;font-weight:800;color:var(--ink);
}
.brand::before{content:"●";color:var(--orange);margin-right:14px;font-size:20px;vertical-align:3px;}
.pageno{
  position:absolute;top:48px;right:88px;
  font-size:27px;font-weight:700;color:var(--mute);
}

/* ---- 見出し ---- */
h2.head{
  font-size:64px;font-weight:800;line-height:1.25;
  text-align:center;margin-bottom:48px;
}
h2.head .hl{color:var(--orange);}
h2.head .box{background:var(--orange);color:#fff;border-radius:8px;padding:0 12px;}

/* ---- 章扉 ---- */
.section-wrap{
  height:100%;display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;padding-left:64px;
}
.section-num{
  font-size:104px;font-weight:800;line-height:1.15;letter-spacing:.01em;
}
.section-bar{width:280px;height:14px;background:var(--orange);border-radius:7px;margin:32px 0;}
.section-sub{font-size:38px;font-weight:700;color:var(--sub);}

/* ---- 表紙 ---- */
.cover-wrap{height:100%;display:flex;flex-direction:column;justify-content:center;padding-left:40px;}
.badge{
  align-self:flex-start;font-size:32px;font-weight:800;color:#fff;
  background:var(--orange);border-radius:40px;padding:10px 40px;margin-bottom:40px;
}
.cover-title{font-size:92px;font-weight:800;line-height:1.28;}
.cover-title .hl{color:var(--orange);}
.cover-sub{font-size:38px;font-weight:700;color:var(--sub);margin-top:32px;line-height:1.5;}
.pill{
  align-self:flex-start;margin-top:40px;
  font-size:30px;font-weight:700;color:#0E6C77;
  background:var(--cyan-soft);border:2px solid #BEE7EC;border-radius:40px;padding:12px 40px;
}

/* ---- 汎用パーツ ---- */
.row{display:flex;gap:32px;}
.center{display:flex;align-items:center;justify-content:center;}
.col{display:flex;flex-direction:column;}

.panel{background:var(--gray-soft);border-radius:24px;padding:32px;}
.panel-orange{background:var(--orange-soft);border:4px solid var(--orange);border-radius:24px;padding:32px;}
.panel-line{background:#fff;border:4px solid var(--gray-line);border-radius:24px;padding:32px;}

.tape-label{
  display:inline-block;background:#C9C9C9;color:#333;
  font-size:28px;font-weight:800;padding:8px 40px;transform:rotate(-1deg);
}
.tape-label.on{background:var(--orange);color:#fff;}

.note-bar{
  background:var(--gray-soft);border-radius:16px;
  font-size:28px;font-weight:700;color:var(--sub);
  padding:20px 32px;text-align:center;line-height:1.5;
}

/* 吹き出し */
.bubble{
  position:relative;background:#fff;border:4px solid var(--ink);border-radius:28px;
  font-size:26px;font-weight:700;line-height:1.45;padding:20px 28px;
}
.bubble.cy{border-color:#1F6E8C;}
.bubble::after,.bubble::before{content:"";position:absolute;border-style:solid;}
/* しっぽ: 左向き（吹き出しの左下→左のキャラへ） */
.bubble.tail-l::before{
  left:-30px;bottom:26px;border-width:16px 30px 16px 0;
  border-color:transparent var(--ink) transparent transparent;
}
.bubble.tail-l::after{
  left:-22px;bottom:28px;border-width:13px 24px 13px 0;
  border-color:transparent #fff transparent transparent;
}
/* しっぽ: 右向き（吹き出しの右下→右のキャラへ） */
.bubble.tail-r::before{
  right:-30px;bottom:26px;border-width:16px 0 16px 30px;
  border-color:transparent transparent transparent var(--ink);
}
.bubble.tail-r::after{
  right:-22px;bottom:28px;border-width:13px 0 13px 24px;
  border-color:transparent transparent transparent #fff;
}

/* キャラ・小物 */
.chara{position:absolute;bottom:0;object-fit:contain;}
.obj{position:absolute;object-fit:contain;}

/* 注意テープ（黄×黒） */
.hazard{
  background:#FFE94A;color:#111;font-size:30px;font-weight:800;
  padding:22px 32px;text-align:center;line-height:1.4;
  border-top:14px solid transparent;border-bottom:14px solid transparent;
  border-image:repeating-linear-gradient(45deg,#111 0 14px,#FFE94A 14px 28px) 14;
}

/* ステップ矢印 */
.arrow{
  width:0;height:0;border-style:solid;
  border-width:26px 0 26px 34px;
  border-color:transparent transparent transparent #B8B8B8;
  flex:0 0 auto;align-self:center;
}
.arrow.on{border-color:transparent transparent transparent var(--orange);}
.arrow-down{
  width:0;height:0;margin:0 auto;
  border-style:solid;border-width:30px 26px 0 26px;
  border-color:var(--orange) transparent transparent transparent;
}