@charset "utf-8";
/* =========================================================================
   v17 チラシと同じ見た目にそろえる層（pax.css と assets/kit/tokens.css の後に読む）
   正本は 20-チラシ設計図/design-kit（README.md・tokens.css・hero-sample.html）。
   色は藍 #23336E／からし #E3B23C／空色 #8EC3E6／生成り #F7F1E7 の4色と白だけ。
   書体は Zen Kaku Gothic New だけ（本文500／見出し700／題字・日付・数字900）。
   色や部品の形を変えたいときは、ここではなく design-kit を先に直す。
   ========================================================================= */

/* ---------- 色の変数を4色に ---------- */
:root, :root[data-theme="pax"] {
  --bg: #F7F1E7; --bg-2: #F7F1E7; --bg-3: #F7F1E7;
  --ink: #23336E; --ink-sub: #23336E;
  --field: #23336E; --field-2: #23336E; --field-label: #E3B23C; --field-soft: #F7F1E7;
  --field2-label: #E3B23C; --field2-soft: #F7F1E7;
  --brand-ink: #23336E; --accent: #E3B23C; --on-accent: #23336E;
  --cta: #23336E; --cta-d: #23336E;
  --line: #23336E; --line-2: #23336E; --map-sea: #8EC3E6;
  --text-primary: #23336E; --text-sub: #23336E;
  --grad-main: #23336E; --grad-light: #23336E; --grad-lightblue: #F7F1E7;
  --grad-text: #23336E; --grad-card: #23336E; --grad-dark: #23336E;
  --yellow: #E3B23C; --purple: #23336E;
  --gray-1: #F7F1E7; --gray-2: #23336E; --gray-3: #23336E; --gray-4: #23336E;
  --shadow-float: none;
}

/* ---------- 地・書体 ---------- */
body { background: var(--kw-kinari); color: var(--kw-ai); font-family: var(--kw-font); font-weight: 500; }
body * { font-family: var(--kw-font) !important; }
b, strong { font-weight: 900; }
.num { font-weight: 900; }
a { color: var(--kw-ai); }
a:hover { color: var(--kw-ai); }
:focus-visible { outline: 3px solid var(--kw-kara); outline-offset: 3px; }
html { scroll-padding-top: 84px; }

/* グラデーション文字はやめて藍の文字に */
.grad-text, .h-sec--grad .h-sec__t, .brand__logo,
.pagehead:not(.pagehead--photo):not(.pagehead--field) h1,
.hero__md b, .hero__md .sep, .entry__count b {
  background: none; color: var(--kw-ai); -webkit-text-fill-color: currentColor;
}

/* ---------- ヘッダー：v4 の浮いた白い角丸の棒に戻す（オーナー指示 2026-09-30）。左はロゴ画像だけ ---------- */
.hdr { position: fixed; top: 16px; left: 16px; right: 16px; background: transparent; border: 0; }
.hdr__in { height: 68px; background: var(--kw-white); border-radius: 40px; box-shadow: 0 4px 12px rgba(35, 51, 110, .14); padding: 0 12px 0 26px; width: min(100%, 1240px); }
.brand__img { display: block; width: 210px; height: auto; }
.hdr__nav a { font-weight: 700; }
.hdr__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hdr__cta .btn { border-radius: 999px; }
@media (max-width: 1080px) {
  .hdr__nav { top: 78px; border-radius: 24px; box-shadow: 0 10px 28px rgba(35, 51, 110, .18); border: 0; }
  .hdr__burger { background: var(--kw-white); border: 2px solid var(--kw-ai); border-radius: 50%; }
}
@media (max-width: 599px) {
  .hdr { top: 10px; left: 10px; right: 10px; }
  .hdr__in { height: 60px; padding: 0 8px 0 16px; }
  .hdr__nav { top: 68px; }
  .brand__img { width: 132px; }
}
html { scroll-padding-top: 110px; }

/* ---------- ボタン：藍の地・からしの影（ずらすだけ）・角丸なし ---------- */
.btn { border-radius: 0; font-weight: 900; }
.btn:hover { transform: none; box-shadow: none; }
.btn--cta, .btn--cta:hover {
  background: var(--kw-ai); color: var(--kw-white); border: var(--kw-line) solid var(--kw-ai);
  box-shadow: 4px 4px 0 var(--kw-kara); text-shadow: none; filter: none;
}
.btn--cta:hover { background: var(--kw-white); color: var(--kw-ai); box-shadow: 4px 4px 0 var(--kw-kara); }
.btn--cta::after { color: var(--kw-kara); }
.btn--line, .btn--outline, .btn--line:hover, .btn--outline:hover {
  background: var(--kw-white); color: var(--kw-ai); border: 2px solid var(--kw-ai);
}
.btn--line:hover, .btn--outline:hover { background: var(--kw-kinari); }
.btn--ghost { border: 2px solid var(--kw-ai); background: var(--kw-white); }
.btn--ghost[aria-pressed="true"] { background: var(--kw-ai); color: var(--kw-white); border-color: var(--kw-ai); }

/* ---------- ヒーロー（hero-sample.html の並べ方） ---------- */
.kwhero {
  position: relative; overflow: hidden;
  background: var(--kw-kinari) url(../kit/parts/bg-wide.webp) center / cover no-repeat;
  padding: 24px 16px 56px;
}
.kwhero__in { position: relative; max-width: 980px; margin: 0 auto; --pw: min(760px, 92vw, 70vh); }
.kwhero__people { display: block; width: var(--pw); height: auto; margin: 0 auto; position: relative; z-index: 1; }
.kwhero__panel { position: relative; z-index: 2; margin: calc(var(--pw) * -.2) auto 0; max-width: 900px; padding: 28px 24px 30px; text-align: center; }
.kwhero__kicker { font-weight: 900; font-size: clamp(14px, 2vw, 20px); margin: 0; line-height: 1.6; }
.kwhero { padding-top: 104px; }
.kwhero__logo { margin: .3em auto .5em; width: min(720px, 100%); line-height: 0; }
.kwhero__logo img { display: block; width: 100%; height: auto; }
.kwhero__sub { display: inline-block; margin: 0; padding: .2em .9em; font-size: clamp(14px, 1.8vw, 18px); line-height: 1.6; }
.kwhero__when { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; margin-top: 22px; }
.kwhero__date { display: flex; align-items: flex-end; gap: .2em; margin: 0; font-weight: 900; line-height: 1; }
.kwhero__date .y { font-size: 22px; margin-bottom: .3em; }
.kwhero__date .d { font-size: clamp(64px, 9vw, 96px); letter-spacing: -.02em; }
.kwhero__date .w { font-size: 22px; background: var(--kw-ai); color: var(--kw-white); border-radius: 50%; width: 1.6em; height: 1.6em; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .25em; }
.kwhero__place { text-align: left; border-left: 4px solid var(--kw-ai); padding-left: 16px; }
.kwhero__place p { margin: 0; }
.kwhero__place .time { font-size: clamp(28px, 3.6vw, 38px); font-weight: 900; line-height: 1.1; }
.kwhero__place .venue { font-size: 20px; font-weight: 900; line-height: 1.5; }
.kwhero__place .access { font-size: 14px; font-weight: 500; line-height: 1.5; }
.kwhero__cta {
  display: inline-flex; align-items: center; gap: .6em; background: var(--kw-ai); color: var(--kw-white); text-decoration: none;
  font-weight: 900; font-size: 20px; padding: .7em 1.3em; border: 3px solid var(--kw-ai); box-shadow: 4px 4px 0 var(--kw-kara);
}
.kwhero__cta::after { content: "→"; color: var(--kw-kara); }
.kwhero__cta:hover { background: var(--kw-white); color: var(--kw-ai); }
.kwhero__cta:focus-visible { outline: 3px solid var(--kw-kara); outline-offset: 3px; }
.kwhero__badge { position: absolute; z-index: 3; right: -2%; top: -64px; width: 130px; height: 130px; font-size: 15px; }
.kwhero__badge b { font-size: 22px; }
@media (max-width: 640px) {
  .kwhero { background-image: url(../kit/parts/bg-portrait.webp); padding-top: 86px; }
  .kwhero__in { --pw: min(92vw, 60vh); }
  .kwhero__panel { padding: 52px 12px 24px; }
  .kwhero__badge { width: 88px; height: 88px; font-size: 11px; top: -44px; right: -6px; }
  .kwhero__badge b { font-size: 16px; }
  .kwhero__place { border-left: 0; border-top: 3px solid var(--kw-ai); padding: 10px 0 0; text-align: center; }
}

/* 会場の絵（ヒーローの下、開催概要の上） */
/* v17.3: 会場の絵もヒーローの図形の背景の中に入れる（オーナー指示） */
.kwvenue { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; padding: 48px 0 0; }
.kwvenue img { display: block; width: 100%; height: auto; }
@media (max-width: 599px) { .kwvenue { padding: 28px 0 0; } }

/* ---------- セクションと見出し ---------- */
.section, .section--sand, .section--soft { background: var(--kw-kinari); border-top: 0; }
.section + .section { border-top: 0; }
.h-sec { text-align: left; margin: 0 0 2rem; max-width: none; }
.h-sec .kw-heading { margin: 0; font-size: clamp(24px, 3vw, 32px); line-height: 1.5; }
.h-sec__note { margin: .8rem 0 0; opacity: 1; }
.h-sub::before, .prose h2::before { background: var(--kw-ai); border-radius: 0; }

/* 藍の面（開催概要・アクセス）：見出しは白の太字＋白い下線（kw-heading の色を反転） */
.ov__h {
  display: block; margin: 0 0 1.4rem; padding: 0 0 .2em; border-radius: 0; background: none;
  border-bottom: var(--kw-line-thin) solid var(--kw-white);
  font-size: clamp(24px, 3vw, 32px); font-weight: 900; letter-spacing: .02em; color: var(--kw-white);
}
.ov__band { color: var(--kw-ai); }
.ov__badges li { background: var(--kw-kara); box-shadow: none; color: var(--kw-ai); }
.ov__md { background: linear-gradient(transparent 84%, var(--kw-kara) 84%); }
.ov__row { border: 0; border-radius: 0; }
.ov__k::before { background: var(--kw-ai); }
.ov__row--fee .ov__k::before { background: var(--kw-kara); }
.ov__btn { border-radius: 0; background: var(--kw-kara); color: var(--kw-ai); box-shadow: 4px 4px 0 var(--kw-white); }
.ov__tag { background: var(--kw-kara); }
.ov__access { border-radius: 0; }
@media (max-width: 599px) { .ov__h { font-size: 24px; margin-bottom: .8rem; } }

/* ---------- カード共通：白地に藍の枠、影なし ---------- */
.gcard, .entry, .panel, .bignum, .card, .side, .callout, .facts, .faq details, .accessmap, .favpick, .radio {
  background: var(--kw-white); border: 2px solid var(--kw-ai); border-radius: 0; box-shadow: none;
}
.ico { color: var(--kw-ai); }
.axis { border: 1.5px solid var(--kw-ai); background: var(--kw-kinari); }

/* ---------- 出展企業：「160社」は藍の帯にからしの数字（写真は使わない） ---------- */
.numbanner { background: var(--kw-ai); min-height: 0; }
.numbanner::before, .numbanner__img { display: none; }
.numbanner__in { padding: 2.4rem 0; }
.numbanner__n { color: var(--kw-kara); }
.numbanner__u { color: var(--kw-white); }
.numbanner__t { color: var(--kw-white); }
@media (max-width: 760px) { .numbanner { min-height: 0; } .numbanner__in { padding: 1.8rem 0; } }
.marquee { background: var(--kw-white); border-bottom: var(--kw-line-thin) solid var(--kw-ai); }
.marquee__i::before { background: var(--kw-kara); }
.entry__count b { color: var(--kw-kara); -webkit-text-stroke: .02em var(--kw-ai); paint-order: stroke fill; }

/* ---------- 当日の流れ：3つの場面の枠（.kw-scene）と同じ形。上に藍の帯、中にアイコン ---------- */
.section--dark { background: var(--kw-kinari); color: var(--kw-ai); }
.section--dark .h-sec__note { color: var(--kw-ai); }
.flow > li {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--kw-white); color: var(--kw-ai);
  border: 2px solid var(--kw-ai); border-radius: var(--kw-radius); overflow: hidden;
  padding: 0 1.1rem 1.2rem; box-shadow: none;
}
.flow__time {
  order: -2; align-self: stretch; margin: 0 -1.1rem; padding: .35rem .5rem;
  background: var(--kw-ai); color: var(--kw-kara); font-size: 22px; line-height: 1.4;
}
.flow__time small { display: inline; margin-left: .15em; color: var(--kw-kara); font-size: 16px; font-weight: 700; opacity: 1; }
.flow__ic { order: -1; display: block; width: 112px; height: 112px; margin: .8rem auto .2rem; }
.flow__t { color: var(--kw-ai); font-size: 20px; margin: .2rem 0 .3rem; }
.flow__d { color: var(--kw-ai); opacity: 1; text-align: left; }
@media (max-width: 859px) {
  .flow > li { padding: 0 1.1rem 1.1rem; border-left: 2px solid var(--kw-ai); }
  .flow__ic { width: 88px; height: 88px; }
}

/* ---------- セミナー：藍の面（角丸なし）＋白い写真枠 ---------- */
.talk { background: var(--kw-ai); border-radius: 0; }
.talk__ph { border-radius: 0; border: 3px solid var(--kw-white); }
.talk__tag { border-radius: 0; background: none; }
.talk__tag b { color: var(--kw-kara); }
.talk__name small { border-radius: 0; color: var(--kw-ai); }
.tbd { border-radius: 0; background: var(--kw-kara); color: var(--kw-ai); }

/* ---------- 交通費：題字パネルと同じ白地・藍の太枠・ずらした影 ---------- */
.trv { background: var(--kw-white); color: var(--kw-ai); border: var(--kw-line) solid var(--kw-ai); border-radius: 0; box-shadow: var(--kw-shadow); }
.trv__h, .trv__d { color: var(--kw-ai); }
.trv__btn { border-radius: 0; background: var(--kw-ai); color: var(--kw-white); border: 3px solid var(--kw-ai); box-shadow: 4px 4px 0 var(--kw-kara); font-weight: 900; }
.trv__btn span { color: var(--kw-kara); }
.trv__btn:hover { background: var(--kw-white); color: var(--kw-ai); }
.trv__card { background: var(--kw-kinari); border-radius: 0; }
.trv__card .ico, .trv__card svg, .trv__k { color: var(--kw-ai); }
.trv__num { color: var(--kw-ai); background: linear-gradient(transparent 70%, var(--kw-kara) 70%); }

/* ---------- アクセス（藍の面のまま） ---------- */
#access .pending { color: var(--kw-kara); }

/* ---------- FAQ ---------- */
.faq summary::before { background: var(--kw-ai); border-radius: 0; }
.faq summary:hover { background: var(--kw-kinari); }
.faq__a::before { color: var(--kw-kara); -webkit-text-stroke: .03em var(--kw-ai); paint-order: stroke fill; }

/* ---------- 追従の申込ボタン：藍の四角＋からしの影、左上に「参加無料」のからしの札 ---------- */
.cta-float {
  border-radius: 0; background: var(--kw-ai); border: 3px solid var(--kw-ai);
  box-shadow: 4px 4px 0 var(--kw-kara); font-weight: 900; text-shadow: none;
}
.cta-float:hover { transform: none; filter: none; background: var(--kw-white); color: var(--kw-ai); }
.cta-float__t::after { border-color: var(--kw-kara); }
.cta-float__tag { background: var(--kw-kara); color: var(--kw-ai); border-radius: 0; box-shadow: none; }

/* ---------- フッター：藍の帯 ---------- */
.ftr { background: var(--kw-ai); }
.ftr p, .ftr__h { color: var(--kw-white) !important; }
.ftr__host { color: var(--kw-white) !important; border-top-color: var(--kw-white); }

/* ---------- 下層ページの頭：チラシと同じ図形の背景（bg-wide／スマホは bg-portrait）に藍の文字 ---------- */
.pagehead, .pagehead--photo, .pagehead--field {
  padding: 124px 0 40px; border-bottom: var(--kw-line) solid var(--kw-ai);
  background: var(--kw-kinari) url(../kit/parts/bg-wide.webp) center / cover no-repeat;
}
.pagehead--photo .pagehead__veil, .pagehead__img, .shards { display: none; }
.pagehead .wrap { position: relative; z-index: 1; }
.pagehead h1, .pagehead--photo h1, .pagehead--field h1 { color: var(--kw-ai); text-shadow: none; font-weight: 900; }
.pagehead p, .pagehead--photo p, .pagehead .crumb, .pagehead .crumb a,
.pagehead--field .pagehead__kana, .pagehead__catch { color: var(--kw-ai); }
.pagehead--field .tag--m { background: var(--kw-ai); color: var(--kw-white); }
.pagehead--field .tag--k { background: var(--kw-kara); color: var(--kw-ai); }
.pagehead--field .tag--i, .pagehead--field .tag--a { background: var(--kw-white); color: var(--kw-ai); border: 1.5px solid var(--kw-ai); }
@media (min-width: 761px) { .pagehead .wrap { padding-inline: 5%; } }
@media (max-width: 760px) {
  .pagehead, .pagehead--photo, .pagehead--field { padding: 96px 0 28px; background-size: auto 100%; background-position: center; }
  .pagehead .wrap { padding-inline: 22px; }
  .pagehead h1, .pagehead--photo h1, .pagehead--field h1 { font-size: clamp(24px, 8.4vw, 40px); }
}

/* ---------- 出展企業一覧・企業詳細 ---------- */
.fpanel { background: var(--kw-white); border: 2px solid var(--kw-ai); border-radius: 0; }
.fpanel__h { border-radius: 0; background: var(--kw-ai); }
.fpanel .chip[aria-pressed="true"], .chip[aria-pressed="true"] { background: var(--kw-ai); border-color: var(--kw-ai); color: var(--kw-white); }
.gsub { border-radius: 0; background: var(--kw-kinari); }
.fpanel__search input[type="search"], .fpanel__reset, .gsub__btn { border-radius: 0; }
.fpanel__reset:hover, .gsub__btn:hover { background: var(--kw-kinari); }
.co { border: 1.5px solid var(--kw-ai); border-radius: 0; }
.co:hover { box-shadow: 4px 4px 0 var(--kw-ai); }
.co__name a::after { border-radius: 0; }
.fav.co__fav[aria-pressed="true"], .fav[aria-pressed="true"] { background: var(--kw-kara); border-color: var(--kw-ai); color: var(--kw-ai); }
.tag--k { background: var(--kw-kara); color: var(--kw-ai); }
.jobtable { border-radius: 0; border: 1.5px solid var(--kw-ai); }
.jobtable tbody th { background: var(--kw-kinari); }
.listbar__count b { color: var(--kw-ai); }

/* ---------- 申込フォーム ---------- */
.steps li { border-radius: 0; background: var(--kw-white); border: 1.5px solid var(--kw-ai); }
.steps li[aria-current="step"] { background: var(--kw-ai); color: var(--kw-white); }
.fset__h span { color: var(--kw-kara); }
.req { border-radius: 0; background: var(--kw-ai); }
.opt { border-radius: 0; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea { border: 1.5px solid var(--kw-ai); border-radius: 0; }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px var(--kw-kara); }
.done__mark { border-radius: 0; }
.callout--big { background: var(--kw-white); border: var(--kw-line) solid var(--kw-ai); box-shadow: var(--kw-shadow); }

@media print {
  .kwhero__badge { display: none !important; }
  .kwhero { background: var(--kw-white); }
}

/* 節の間をつめる（見本 hero-sample.html の 40px に近づける） */
.section { padding: 64px 0; }
@media (max-width: 760px) { .section { padding: 44px 0; } }
/* 申込フォームの見出しの番号（01・02）は出さない（design-kit：見出しに番号をつけない） */
.fset__h span { display: none; }

/* v17.4 企業詳細：ブース番号は大きな数字で */
.side__booth { font-size: 26px !important; font-weight: 900; line-height: 1.3; }

/* v17.6 申込フォームの「気になる企業」の枠：上限4社がスクロールせずに見える高さに（スマホで1社2行×4＋α） */
.favpick__list { max-height: 24rem; }