/* 「AIエージェントに仕事を任せよう会」告知ページ v3
   参考：スマレジ。真っ白＋余白＋極太ゴシック見出し＋英語の小ラベル＋大きな数字で信頼感。
   色はわいが舎の「白と黒」（2026-10-12 健ちゃん「基本白と黒」で、緑・青の差し色を黒に直した） */
:root{
  --bg:#FFFFFF;
  --ink:#1F1F1F;
  --sub:#6B6B6B;
  --g1:#1F1F1F;          /* もとは緑→青のグラデ。白黒にそろえて黒 */
  --g2:#1F1F1F;
  --accent:#1F1F1F;      /* 差し色も黒 */
  --accent-bg:#FFFFFF;    /* 面は塗らず、線で囲む */
  --line:#E4E4E4;
  --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-items{font-weight:700;font-size:17px;margin:16px 0}
.apply-ex{background:var(--accent-bg);border:1px solid var(--line);border-radius:12px;padding:16px 20px;line-height:1.9;margin:0 0 16px}
.apply-ex-label{display:block;font-size:13px;color:var(--accent);font-weight:700;margin-bottom:4px}

/* サブタイトル（エージェント活用の勉強会） */
.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)}
.sub b{font-weight:900;font-size:1.12em}

/* チャットとエージェントのちがい */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0}
.vs-col{border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.vs-col p{margin:0;line-height:1.8}
.vs-col .vs-h{font-family:var(--maru);font-weight:900;font-size:18px;margin-bottom:8px}
.vs-agent{border:2px solid var(--ink)}
@media (max-width:520px){.vs{grid-template-columns:1fr}}

/* 実例 */
.case-group{font-family:var(--maru);font-weight:900;font-size:clamp(18px,4.6vw,22px);line-height:1.5;margin:36px 0 4px}
.case{border-left:3px solid var(--ink);padding:2px 0 2px 16px;margin:18px 0}
.case p{margin:6px 0;line-height:1.85}
.case .ask{font-family:var(--maru);font-weight:700;font-size:17px;margin:0}
.ib{display:inline-block}