/* かがわーくフェア デザインの決まり（チラシ パターンBと共通）
   色・書体・部品の形はここが正本。サイトもチラシもこの値を使う。値を変えるときはここを先に直す。
   読み込み例: <link rel="stylesheet" href="design-kit/tokens.css">
   書体は Google Fonts から読む:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap"> */

:root{
  /* 色は4つだけ。白と肌色は絵の中だけで使う */
  --kw-ai:#23336E;      /* 藍：文字・線・枠・帯。いちばん多く使う */
  --kw-kara:#E3B23C;    /* からし：題字の「わーく」・丸い札・強調する数字 */
  --kw-sora:#8EC3E6;    /* 空色：背景の図形・補助の面 */
  --kw-kinari:#F7F1E7;  /* 生成り：紙（ページ）の地色 */
  --kw-white:#FFFFFF;   /* 題字パネル・表・枠の中 */

  /* 書体は1つ。太さで強弱をつける（本文500／見出し700／題字・数字900） */
  --kw-font:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic UI",sans-serif;

  /* 形 */
  --kw-line:3px;        /* 題字パネル・枠の太線（チラシでは1mm） */
  --kw-line-thin:1.5px; /* 表の区切り・見出しの下線 */
  --kw-shadow:6px 6px 0 var(--kw-ai); /* 題字パネルの影：ぼかさない、ずらすだけ */
  --kw-radius:10px;     /* 3つの場面の枠だけ角を丸める。題字パネルと表は角丸にしない */
}

/* ---- 部品 ---- */

/* 題字「かがわーくフェア」：「わーく」だけからし色＋藍のふち */
.kw-title{font-family:var(--kw-font);font-weight:900;color:var(--kw-ai);letter-spacing:.02em;line-height:1.15}
.kw-title .kw-work{color:var(--kw-kara);-webkit-text-stroke:.03em var(--kw-ai);paint-order:stroke fill}

/* 題字パネル：白地・藍の太枠・ずらした影（角丸なし） */
.kw-panel{background:var(--kw-white);border:var(--kw-line) solid var(--kw-ai);box-shadow:var(--kw-shadow)}

/* 藍の帯（上の「参加無料／入退場自由…」の帯、フッター、副題の札） */
.kw-band{background:var(--kw-ai);color:var(--kw-white);font-family:var(--kw-font);font-weight:700}
.kw-band i{font-style:normal;color:var(--kw-kara)}

/* 丸い札（「県外の学生は交通費補助あり」） */
.kw-badge{border-radius:50%;background:var(--kw-kara);color:var(--kw-ai);font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.2}

/* 見出し：太字＋下線（番号や飾りはつけない） */
.kw-heading{font-family:var(--kw-font);font-weight:900;color:var(--kw-ai);border-bottom:var(--kw-line-thin) solid var(--kw-ai);padding-bottom:.2em}

/* 3つの場面の枠：藍の見出し帯＋白い中身＋ひとこと */
.kw-scene{background:var(--kw-white);border:2px solid var(--kw-ai);border-radius:var(--kw-radius);overflow:hidden}
.kw-scene > header{background:var(--kw-ai);color:var(--kw-white);font-weight:900;text-align:center}
.kw-scene > header small{color:var(--kw-kara);margin-left:.5em}

/* 情報の表：左＝藍の見出しセル、右＝白 */
.kw-info{display:grid;grid-template-columns:8em 1fr;border-top:var(--kw-line-thin) solid var(--kw-ai)}
.kw-info dt,.kw-info dd{margin:0;padding:.5em 1em;border-bottom:1px solid var(--kw-ai)}
.kw-info dt{background:var(--kw-ai);color:var(--kw-white);font-weight:700;text-align:center;border-bottom-color:var(--kw-white)}
.kw-info dd{background:var(--kw-white)}