/* 「AIエージェントに仕事を任せよう会」告知ページ v5（2026-10-14 健ちゃんの音声メモで第2版：下線・グラフ・流れ図・手描き風イラスト）
   参考：スマレジ。真っ白＋余白＋極太ゴシック見出し＋英語の小ラベル＋大きな数字で信頼感。
   色はわいが舎の「白と黒」（2026-10-12 健ちゃん「基本白と黒」で、緑・青の差し色を黒に直した） */
:root{
  --bg:#FFFFFF;
  --ink:#1F1F1F;
  --sub:#6B6B6B;
  --g1:#1F1F1F;          /* もとは緑→青のグラデ。白黒にそろえて黒 */
  --g2:#1F1F1F;
  --accent:#1F1F1F;      /* 差し色も黒 */
  --accent-bg:#FFFFFF;    /* 面は塗らず、線で囲む */
  --line:#E4E4E4;
  --mark:#F6C66E;        /* 下線とイラストの差し色。HPの朝の色(#EC8416)を明るくした琥珀色。白・黒・グレーはそのまま */
  --maru:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  --sans:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:2}
main{max-width:740px;margin:0 auto;padding:0 22px}
.wrap{max-width:620px;margin:0 auto}
.grad{background:linear-gradient(100deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ヒーロー */
.hero{text-align:center;padding:76px 0 56px}
.kicker{font-family:var(--maru);font-weight:700;color:var(--accent);font-size:13px;letter-spacing:.14em;margin:0 0 20px}
.hero h1{font-family:var(--maru);font-weight:900;color:var(--ink);
  font-size:clamp(28px,8.6vw,64px);line-height:1.22;letter-spacing:-.02em;margin:0}
.hero-lead{font-family:var(--maru);font-weight:500;font-size:clamp(16px,4.2vw,21px);line-height:1.8;margin:26px auto 0;max-width:18em}

/* 数字（開催情報をドンと） */
.stats{display:flex;justify-content:center;gap:clamp(18px,6vw,56px);margin:40px 0 8px;padding:0}
.stats div{text-align:center}
.stats dt{font-family:var(--maru);font-weight:900;font-size:clamp(34px,9vw,52px);line-height:1;color:var(--ink);margin:0}
.stats dt span{font-size:.42em;font-weight:700;margin-left:2px}
.stats dd{margin:8px 0 0;font-size:12px;color:var(--sub);letter-spacing:.04em}
.scroll{font-family:var(--maru);font-weight:700;color:var(--sub);font-size:12px;letter-spacing:.2em;margin:44px 0 0}

/* 導入リード */
.lead{font-family:var(--maru);font-weight:500;font-size:clamp(16px,4vw,20px);line-height:1.9;text-align:center;margin:20px 0 10px}
strong{color:var(--accent);font-weight:700}
.note{color:var(--sub);font-size:14px;line-height:1.85}

/* セクション：英語の小ラベル＋大きな日本語見出し */
section{padding:46px 0;border-top:1px solid var(--line)}
h2{display:flex;flex-direction:column;gap:6px;margin:0 0 18px}
h2 .en{font-family:var(--maru);font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--accent)}
h2 .jp{font-family:var(--maru);font-weight:900;font-size:clamp(24px,6vw,34px);line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
h2.accent .jp{background:linear-gradient(100deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}
p{margin:16px 0}

/* ターミナル風パネル（Claude Codeの画面の再現） */
.terminal{margin:26px 0 8px;border-radius:12px;overflow:hidden;background:#1F1F1F;
  box-shadow:0 12px 32px rgba(0,0,0,.16);border:1px solid #2F2F2F;
  font-family:"SFMono-Regular",Menlo,Consolas,"Courier New",monospace}
.term-bar{display:flex;align-items:center;padding:11px 14px;background:#2F2F2F;border-bottom:1px solid #3A3A3A}
.term-bar .dot{width:11px;height:11px;border-radius:50%;display:inline-block;margin-right:7px}
.dot.r,.dot.y,.dot.g{background:#6B6B6B}
.term-title{margin-left:8px;color:#9A9A9A;font-size:12px}
.term-body{padding:18px;font-size:13.5px;line-height:1.95;color:#D6D6D6;overflow-x:auto}
.term-body p{margin:0}
.cmd{color:#fff;margin-bottom:10px!important}
.cmd .arrow{color:#fff;font-weight:700;margin-right:8px}
.act .b{color:#fff;margin-right:8px}
.act .path{color:#fff;text-decoration:underline;text-underline-offset:3px}
.done{color:#fff;margin-top:10px!important}
.cursor{display:inline-block;width:8px;height:15px;background:#fff;margin-left:6px;vertical-align:-2px;animation:blink 1.1s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* 写真を入れるスペース（あとで差し替え） */
.photo-slot{margin:28px 0}
.slot-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:190px;padding:30px;border:2px dashed #D0D0D0;border-radius:14px;background:#FFFFFF;
  color:var(--sub);text-align:center;font-family:var(--maru);font-weight:500;line-height:1.7}
.slot-box .ic{font-size:30px}
.slot-box span b{color:var(--accent)}
.slot-box .slot-note{font-size:12px;color:#9A9A9A}

/* ホスト（健ちゃん）カード */
.host{display:flex;align-items:center;gap:18px;margin:28px 0 0;padding:16px;
  background:#fff;border:1px solid var(--line);border-radius:14px}
.host img{width:96px;height:120px;object-fit:cover;border-radius:10px;flex:none}
.host figcaption{font-size:14px;line-height:1.7;color:var(--sub)}
.host figcaption b{color:var(--ink);font-family:var(--maru);font-weight:700;font-size:15px}

/* 会場写真 */
.venue{margin:40px 0 0}
.venue img{width:100%;height:auto;border-radius:14px;display:block}
.venue figcaption{text-align:center;font-size:13px;color:var(--sub);margin-top:10px;font-family:var(--maru);font-weight:500}

/* WOW リスト */
.magic{list-style:none;padding:0;margin:18px 0}
.magic li{position:relative;padding:13px 0 13px 34px;border-bottom:1px dashed var(--line);line-height:1.7}
.magic li:last-child{border-bottom:none}
.magic li::before{content:"✦";position:absolute;left:4px;top:13px;color:var(--accent);font-size:15px}

/* 参加条件 */
.cond{background:#fff;border:1.5px solid var(--ink);border-radius:14px;padding:22px 26px;margin:8px 0}
.cond ul{margin:0;padding-left:20px}
.cond li{margin:12px 0}

/* タイムテーブル */
.time{width:100%;border-collapse:collapse;margin:8px 0}
.time td{padding:14px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.time td.t{width:70px;color:var(--accent);font-family:var(--maru);font-weight:700;font-size:15px;white-space:nowrap}
.time tr:last-child td{border-bottom:none}

/* 開催概要 */
.info{margin:8px 0}
.info dt{font-family:var(--maru);font-weight:700;color:var(--ink);font-size:14px;margin-top:16px}
.info dt:first-child{margin-top:0}
.info dd{margin:2px 0 0;padding-bottom:14px;border-bottom:1px solid var(--line)}
.info dd:last-child{border-bottom:none}

/* ボタン：黒の囲みピル（スマレジ風） */
.cta{text-align:center;padding:24px 0 8px}
.btn{display:inline-block;background:#fff;color:var(--accent);text-decoration:none;
  font-family:var(--maru);font-weight:700;padding:16px 46px;border:2px solid var(--accent);border-radius:999px;font-size:17px}
.btn span{margin-left:8px}

/* フッター */
.ft{text-align:center;color:var(--sub);font-size:13px;padding:48px 0 32px;border-top:1px solid var(--line);margin-top:20px}
.ft a{color:var(--sub);font-family:var(--maru);font-weight:700}

/* お申し込み（LINE）欄 */
.apply-steps{list-style:none;counter-reset:ap;padding:0;margin:16px 0}
.apply-steps li{counter-increment:ap;position:relative;padding:10px 0 10px 44px;font-weight:700;line-height:1.7;border-bottom:1px dashed var(--line)}
.apply-steps li:last-child{border-bottom:none}
.apply-steps li::before{content:counter(ap);position:absolute;left:0;top:9px;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-size:15px;line-height:30px;text-align:center}

/* サブタイトル */
.sub{font-family:var(--maru);font-weight:500;font-size:clamp(15px,4vw,19px);line-height:1.8;margin:22px auto 0;padding:14px 0;max-width:24em;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}


.ib{display:inline-block}

/* 下線（マーカー）：節の見出しと本文の大事なところ */
.mk,strong{background:linear-gradient(transparent 62%,var(--mark) 62%,var(--mark) 94%,transparent 94%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .1em}
strong{color:var(--ink)}
h2 .jp .mk{padding:0 .12em}

/* グラフ（WHY） */
.chart{margin:26px 0;padding:20px 18px 16px;border:1px solid var(--line);border-radius:14px}
.chart-t{font-family:var(--maru);font-weight:900;font-size:clamp(17px,4.6vw,21px);line-height:1.6;margin:0 0 16px}
.bar-row{margin:0 0 14px}
.bar-l{margin:0 0 4px;font-size:14px;font-weight:700;line-height:1.5}
.bar-track{width:100%}
.bar{height:34px;border-radius:4px;display:flex;align-items:center;justify-content:flex-end;padding:0 10px;
  font-family:var(--maru);font-weight:900;font-size:18px}
.bar-base{background:#E4E4E4;color:var(--ink)}
.bar-ai{background:var(--mark);border:2px solid var(--ink);color:var(--ink)}
.chart figcaption{font-size:12px;line-height:1.75;color:var(--sub);margin-top:8px}
.chart figcaption a{color:var(--sub)}

/* イラストの線（黒の線＋琥珀色1色。手描きのゆれはHTMLの #hand フィルター） */
.s{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.a{fill:var(--mark);stroke:none}
svg text{font-family:var(--maru);font-weight:700;fill:var(--ink)}

/* チャット→作る の流れ図 */
.flow{display:grid;grid-template-columns:1fr 34px 1fr;align-items:stretch;gap:0 6px;margin:8px 0}
.flow-box{border:1px solid var(--line);border-radius:14px;padding:12px 10px 14px;text-align:center}
.flow-goal{border:2px solid var(--ink)}
.flow-ic{width:72px;height:auto;display:block;margin:0 auto 4px}
.flow-arrow{width:34px;align-self:center}
.flow-h{font-family:var(--maru);font-weight:900;font-size:clamp(15px,4.4vw,21px);margin:0;white-space:nowrap}
.flow-p{font-size:13px;line-height:1.7;margin:6px 0 0;text-align:left}
.flow-tag{margin:10px 0 0;text-align:center;font-size:13px;font-weight:700;color:var(--sub);line-height:1.5}
.flow-tag-goal{color:var(--ink)}

/* やっていることのイラスト */
.scenes{display:grid;grid-template-columns:1fr;gap:18px;margin:24px 0}
@media (min-width:640px){.scenes{grid-template-columns:1fr 1fr}}
.scene{margin:0;border:1px solid var(--line);border-radius:14px;padding:16px 16px 6px}
.scene svg{width:100%;height:auto;display:block;max-width:300px;margin:0 auto}
.scene .ask{font-family:var(--maru);font-weight:700;font-size:16px;line-height:1.6;margin:12px 0 4px}
.scene figcaption p{margin:6px 0 10px;line-height:1.8;font-size:15px}
.scene-link{font-size:13px!important;color:var(--sub)}
.scene-link a{color:var(--ink)}
.scene-big{border:2px solid var(--ink);padding:22px 18px 10px;margin:8px 0 30px}
.scene-big svg{max-width:520px}
.big-k{margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--sub);text-align:center}
.big-h{font-family:var(--maru);font-weight:900;font-size:clamp(20px,5.6vw,28px);line-height:1.4;text-align:center;margin:4px 0 14px}
.big-c{font-family:var(--maru);font-weight:700;font-size:clamp(16px,4.2vw,19px);line-height:1.8}
.term-note{margin-top:6px}

/* 告知リール（縦動画）：スマホは幅いっぱい、PCは縦長のまま幅380pxで真ん中。自動再生はしない（音つきなので押した人だけ） */
.reel{margin:0 auto 40px;max-width:380px}
.reel-k{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--sub);text-align:center}
.reel video{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:12px;background:#1F1F1F}

/* 最初の画面（2026-10-21）：広告の動画v3とそろえる。スマホ390×844で、見出し・健ちゃん・当日やること・日時場所料金定員・申し込みボタンまでが1画面に入る */
.fv{padding:22px 0 26px;max-width:520px;margin:0 auto}
.fv-k{margin:0;font-size:12px;font-weight:700;line-height:1.6;letter-spacing:.04em;color:var(--sub);text-align:center}
.fv-h{font-family:var(--maru);font-weight:900;font-size:clamp(30px,8.8vw,48px);line-height:1.25;letter-spacing:-.02em;text-align:center;margin:6px 0 16px}
.fv-host{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.fv-host img{width:76px;height:92px;object-fit:cover;border-radius:10px;flex:none}
.fv-host p{margin:0;line-height:1.55}
.fv-host-k{display:block;font-size:12px;color:var(--sub);font-weight:700}
.fv-host b{display:block;font-family:var(--maru);font-weight:900;font-size:19px}
.fv-host-p{display:block;font-size:13px;color:var(--sub);margin-top:2px}
.fv-do-k{margin:0 0 4px;font-family:var(--maru);font-weight:900;font-size:15px}
.fv-do{list-style:none;counter-reset:fd;padding:0;margin:0 0 14px}
.fv-do li{counter-increment:fd;position:relative;padding:7px 0 7px 36px;font-weight:700;font-size:15px;line-height:1.5;border-bottom:1px dashed var(--line)}
.fv-do li:last-child{border-bottom:none}
.fv-do li::before{content:counter(fd);position:absolute;left:0;top:6px;width:26px;height:26px;border-radius:50%;background:var(--mark);color:var(--ink);font-family:var(--maru);font-weight:900;font-size:14px;line-height:26px;text-align:center}
.fv-info{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin:0 0 16px;padding:8px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.fv-info div{display:flex;gap:10px;align-items:baseline;padding:3px 0}
.fv-info-w{grid-column:1 / -1}
.fv-info dt{font-size:12px;font-weight:700;color:var(--sub);flex:none}
.fv-info dd{margin:0;font-weight:700;font-size:15px;line-height:1.5}
.fv-cta{text-align:center;margin:0}
.btn-fill{background:var(--ink);color:#fff;border-color:var(--ink);display:block;padding:14px 20px}
.fv-cta-n{margin:6px 0 0;text-align:center;font-size:12px;color:var(--sub);line-height:1.6}
.fv-do small{display:block;font-size:12px;font-weight:500;color:var(--sub);line-height:1.4}
.wrap > .hero{padding:16px 0 40px}