/* =========================================================
   とよたJOBフェア  jobfair.css
   ---------------------------------------------------------
   ★色・文字サイズを変えたいときは「1. 設定値」だけ修正
     → 同じ変数を使っている箇所がまとめて変わります
   ★毎年の更新（日付・企業・特典）はHTML側のみ
========================================================= */
/* =========================================================
   1. 設定値（色・文字サイズ・余白）
========================================================= */
:root {
  /* --- メインカラー（青） --- */
  --color-primary:       #008dcc; /* 英字ラベル・✓・番号・Q */
  --color-primary-dark:  #00699f; /* 「対象となる方はこちら」 */
  --color-primary-deep:  #064f79; /* 見出し・強調文字 */
  --color-primary-light: #e9f7fc; /* 薄い青の背景 */
  --color-primary-pale:  #d9f1fa; /* 来場特典の背景（グラデ終点） */
  --color-link:          #0076ae; /* リンク */
  --color-link-hover:    #004f79;
  --color-entry:         #0879bc; /* 事前登録の青枠・バッジ */
  --color-venue-band:    #08618f; /* 会場写真の下の帯 */
  /* --- アクセントカラー --- */
  --color-accent:        #e3580b; /* 事前登録ボタン（オレンジ） */
  --color-accent-hover:  #f39800; /* 事前登録ボタン（マウスを乗せたとき） */
  --color-benefit:       #f39800; /* 「事前登録特典あり！」の文字 */
  --color-check:         #ffe33b; /* 「✓事前登録がオススメ」の✓ */
  --color-entry-bg:      #fff3b8; /* 事前登録エリアの背景（黄） */
  --color-focus:         #ffbf47; /* キーボード操作時の枠 */
  /* --- 文字色 --- */
  --color-text:       #263740; /* 基本の文字 */
  --color-text-dark:  #333333; /* 説明文 */
  --color-text-muted: #607079; /* 補足・注意書き */
  --color-white:      #ffffff;
  /* --- 背景・線 --- */
  --color-surface:     #f4f9fb; /* 薄いグレーの背景 */
  --color-border:      #d8e6ec; /* 通常の枠線 */
  --color-border-blue: #cce5ef; /* 青っぽい枠線 */
  /* --- 業種カラー（出展企業の見出し） --- */
  --color-manufacturing: #dcefd3; /* 製造業 */
  --color-construction:  #ffe2e2; /* 建設・運輸 */
  --color-retail:        #dfe9f8; /* 卸売・小売 */
  --color-service:       #fff0bd; /* サービス・金融 */
  /* --- フッター --- */
  --color-footer-bg:   #26383f;
  --color-footer-text: #d4dde1;
  --color-footer-line: #46575e;
  --color-footer-link: #a9e2f8;
  /* --- 文字サイズ（1rem = 16px） --- */
  --fs-xs:   0.78rem; /* 英字ラベル・コピーライト */
  --fs-s:    0.82rem; /* 注意書き */
  --fs-m:    0.9rem;  /* 補足文・タグ */
  --fs-base: 0.95rem; /* 説明文 */
  --fs-l:    1.08rem; /* ボタン・強調 */
  --fs-xl:   1.2rem;  /* 業種名・バッジ */
  --fs-2xl:  1.35rem; /* 事前登録ボタン */
  --fs-company: 1.2rem; /* ★企業名の大きさ（PC・スマホ共通／長い社名は自動で縮小） */
  --fs-heading: clamp(1.8rem, 4vw, 2.5rem); /* 各セクションの見出し */
  /* --- 幅・角丸・影・余白 --- */
  --content-width:  1100px;
  --content-narrow: 900px;
  --radius-s:    10px;
  --radius-m:    16px;
  --radius-pill: 999px;
  --shadow-s: 0 5px 18px rgba(13, 80, 112, 0.07);
  --shadow-m: 0 16px 42px rgba(13, 80, 112, 0.12);
  --section-space: clamp(64px, 8vw, 104px);
}
/* =========================================================
   2. リセット・基本設定
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--color-text);
  background: var(--color-white);
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, p, ul, dl, dd { margin-top: 0; }
h1, h2, h3 { line-height: 1.45; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea, summary { font: inherit; }
address { font-style: normal; }
/* 開閉（details）共通：標準の三角を消す */
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
/* =========================================================
   3. アクセシビリティ
========================================================= */
/* 画面には出さず、読み上げ用に残す */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
/* <br class="mobile-break"> 用（現在はPC・スマホとも改行しない設定） */
.mobile-break { display: none; }
/* =========================================================
   4. 共通レイアウト・見出し
========================================================= */
.container {
  width: min(calc(100% - 40px), var(--content-width));
  margin-inline: auto;
}
.container--narrow { max-width: var(--content-narrow); }
.section { padding-block: var(--section-space); }
.section-header {
  margin-bottom: clamp(32px, 5vw, 48px);
  text-align: center;
}
/* 英字ラベル（FOR YOU / COMPANIES / PRESENT など） */
.section-label,
.present-label {
  margin-bottom: 7px;
  color: var(--color-primary);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: 0.18em;
}
/* セクション見出し＋下の青い線 */
.section-heading {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 15px;
  color: var(--color-primary-deep);
  font-size: var(--fs-heading);
  font-weight: 900;
  letter-spacing: 0.02em;
}
.section-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 54px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  transform: translateX(-50%);
}
.section-lead {
  max-width: 680px;
  margin: 18px auto 0;
  color: var(--color-text-muted);
}
/* =========================================================
   5. メインビジュアル（チラシ画像＋会場画像）
========================================================= */
.hero {
  padding: 32px 20px 0;
  background: linear-gradient(180deg, var(--color-primary-light), var(--color-surface));
}
/* 2枚の画像と帯をまとめる枠 */
.hero-banner {
  width: min(100%, 900px);
  margin: 0 auto;
  overflow: hidden;
  box-shadow: var(--shadow-m);
}
.hero-main-img,
.venue-visual-img { width: 100%; }
/* line-height:0 で画像下の白いすき間を防ぐ */
.venue-visual { margin: 0; line-height: 0; }
/* 会場写真の下の青い帯 */
.venue-caption {
  margin: 0;
  padding: 12px 16px;
  color: var(--color-white);
  background: var(--color-venue-band);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
/* =========================================================
   6. 対象者
========================================================= */
.target-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* PCは横3列 */
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.target-list li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 104px;
  padding: 22px 20px 22px 58px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  color: var(--color-primary-deep);
  background: var(--color-white);
  box-shadow: var(--shadow-s);
  font-weight: 700;
}
/* 青丸の✓ */
.target-list li::before {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 20px;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-primary);
  font-size: var(--fs-m);
  font-weight: 900;
  transform: translateY(-50%);
}
/* 「1・2年生も大歓迎！履歴書不要…」 */
.target-note {
  max-width: 760px;
  margin: 24px auto 0;
  color: var(--color-text-muted);
  font-size: var(--fs-m);
  text-align: center;
}
/* 「1・2年生も大歓迎！」を大きくし、下の文章を改行 */
.target-note strong {
  display: block;              /* 改行させる */
  margin-bottom: 12px;         /* 「履歴書不要…」との間隔 */
  color: var(--color-primary-deep);
  font-size: var(--fs-xl);     /* さらに大きくするなら var(--fs-2xl) */
  font-weight: 900;
  line-height: 1.5;
}
/* =========================================================
   7. 事前登録（ボタン → 特典 → 説明文 → 注記）
========================================================= */
.entry-section { padding: 90px 0; background: var(--color-entry-bg); }
.entry-container { max-width: 900px; }
/* 青枠 */
.entry-box {
  position: relative;
  margin-top: 22px;
  border: 4px solid var(--color-entry);
  background: var(--color-white);
}
/* 左上の「✓事前登録がオススメです」 */
.entry-recommend {
  position: absolute;
  top: -40px;
  left: -28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 13px 20px;
  border: 3px solid var(--color-white);
  border-radius: 10px;
  color: var(--color-white);
  background: var(--color-entry);
  box-shadow: 0 2px 6px rgba(0, 70, 120, 0.08);
  font-size: var(--fs-2xl);
  font-weight: 900;
  line-height: 1.4;
}
.entry-recommend-check { color: var(--color-check); font-size: 1.55rem; line-height: 1; }
/* 枠の中（すべて中央揃え） */
.entry-box-inner {
  padding: 50px 36px 36px;     /* 1つ目：ボタン上の間隔 */
  text-align: center;
}
/* ① オレンジのボタン（楕円） */
.entry-button-area { margin: 0 0 16px; }   /* 下：特典との間隔 */
.entry-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 320px;            /* ボタンの横幅 */
  padding: 18px 40px;          /* ボタンの大きさ（上下 左右） */
  border-radius: var(--radius-pill);
  color: var(--color-white);
  background: var(--color-accent);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15);
  font-size: var(--fs-2xl);
  font-weight: 900;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.entry-button:hover {
  background: var(--color-accent-hover);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
  transform: translateY(2px);
}
.entry-button:focus-visible { outline: 3px solid var(--color-primary-deep); outline-offset: 4px; }
/* ボタン右の「›」 */
.entry-button-arrow { font-size: 1.3em; line-height: 1; }
/* ② 「事前登録特典あり！」 */
.entry-benefit {
  margin: 0 0 12px;            /* 下：説明文との間隔 */
  color: var(--color-benefit);
  font-size: var(--fs-xl);
  font-weight: 900;
  letter-spacing: 0.05em;
}
/* ③ 説明文 */
.entry-text { color: var(--color-text-dark); font-size: var(--fs-base); }
.entry-text p { margin: 0; line-height: 1.8; }
/* ④ 注記 */
.entry-note {
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-s);
}
/* =========================================================
   8. 出展企業
========================================================= */
.companies-section { background: var(--color-surface); }
/* 業種は縦1列に並べる */
.industry-list { display: grid; gap: 22px; }
/* 出展企業：一覧の右上「※ 五十音順」 */
.company-order-note {
  margin: -16px 0 8px;              /* 上：見出しとの間を詰める／下：製造業との間隔 */
  color: var(--color-text-muted);
  font-size: var(--fs-s);
  text-align: right;                /* 右寄せ */
}
.industry-card {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  background: var(--color-white);
  box-shadow: var(--shadow-s);
}
/* 業種名（背景色は下の4行で設定） */
.industry-title {
  margin: 0;
  padding: 15px 20px;
  color: var(--color-text);
  font-size: var(--fs-xl);
  font-weight: 900;
}
.industry-card--manufacturing .industry-title { background: var(--color-manufacturing); }
.industry-card--construction  .industry-title { background: var(--color-construction); }
.industry-card--retail        .industry-title { background: var(--color-retail); }
.industry-card--service       .industry-title { background: var(--color-service); }
/* 企業一覧：PCは1行3社（タブレット2社・スマホ1社は下の@mediaで設定） */
.company-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
}
/* 企業ボタン（リンクあり・なし共通） */
.company-item-link,
.company-item-no-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 58px;
  padding: 12px 15px;
  overflow: hidden;            /* 縮小前のはみ出しを隠す */
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  color: var(--color-text);
  background: var(--color-surface);
  font-size: var(--fs-company); /* ★企業名の大きさは「1. 設定値」の --fs-company で変更 */
  font-weight: 500;            /* 文字の太さ（太くするなら700） */
  line-height: 1.5;
  white-space: nowrap;         /* 1行で表示（長い社名はJavaScriptで自動縮小） */
}
.company-item-link {
  justify-content: space-between;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s, transform 0.2s;
}
.company-item-link > span:first-child { min-width: 0; }
.company-item-link:hover {
  color: var(--color-primary-deep);
  border-color: var(--color-border-blue);
  background: var(--color-primary-light);
  transform: translateY(-2px);
}
/* 右の「↗」（企業名の大きさに合わせて変化） */
.external-icon {
  flex: none;
  color: var(--color-primary);
  font-size: 0.9em;
  font-weight: 900;
}
/* 企業未公開時用：<p class="company-coming">出展企業は順次公開します</p> */
.company-coming {
  margin: 0;
  padding: 38px 20px;
  color: var(--color-text-muted);
  font-weight: 700;
  text-align: center;
}
/* 一覧下の注意書き */
.company-notice {
  margin: 25px 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-m);
  text-align: center;
}
/* =========================================================
   9. 来場特典
========================================================= */
.present-section {
  padding-block: clamp(58px, 7vw, 84px);
  border-block: 1px solid var(--color-border-blue);
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-pale));
}
.present-box { max-width: 900px; text-align: center; }
/* 「ご来場特典」バッジ */
.present-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  color: var(--color-white);
  background: var(--color-primary-deep);
  font-size: var(--fs-xl);
  font-weight: 900;
}
/* 特典 01 / 02 / 03 */
.present-list {
  display: grid;
  gap: 12px;
  max-width: 760px;
  margin: 24px auto 26px;
  text-align: left;
}
.present-item {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--color-border-blue);
  border-radius: 12px;
  background: var(--color-white);
  box-shadow: 0 4px 14px rgba(0, 100, 150, 0.06);
}
/* 青丸の番号 */
.present-number {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-primary);
  font-size: var(--fs-m);
  font-weight: 900;
  line-height: 1;
}
.present-item-content { min-width: 0; }
.present-item-text { margin: 0; font-size: var(--fs-base); line-height: 1.7; }
/* 「コーヒーチケット」進呈！ */
.present-item-text strong {
  color: var(--color-primary-deep);
  font-size: var(--fs-l);
  font-weight: 900;
}
/* --- 03 お友達特典の開閉 --- */
.friend-detail {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}
/* 「対象となる方はこちら」 */
.friend-detail summary {
  position: relative;
  padding: 4px 34px 4px 0;
  color: var(--color-primary-dark);
  font-size: var(--fs-m);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* ＋ / − の丸 */
.friend-detail summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-primary);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-50%);
}
.friend-detail[open] summary::after { content: "−"; }
/* 開いた中身 */
.friend-detail-body {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--color-surface);
  font-size: var(--fs-m);
  line-height: 1.75;
}
.friend-detail-body > p:first-child {
  margin: 0 0 10px;
  color: var(--color-primary-deep);
  font-weight: 700;
}
.friend-detail-body ul { margin: 0 0 14px; padding-left: 1.4em; }
.friend-detail-body li + li { margin-top: 8px; }
/* ※注意書き */
.friend-detail-note {
  margin: 5px 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-s);
  line-height: 1.65;
}
/* 「※02、03は先着順…」 */
.present-section .target-note {
  margin-top: 14px;
  font-size: var(--fs-s);
  font-weight: 500;
}
/* =========================================================
   10. 開催概要・よくある質問（共通）
========================================================= */
.outline-section,
.faq-section { padding-block: 80px; }
.outline-section .section-header,
.faq-section .section-header { margin-bottom: 40px; }
.faq-section { background: var(--color-surface); }
/* =========================================================
   11. 開催概要
========================================================= */
.outline-list { margin: 0; border-top: 3px solid var(--color-primary); }
/* 1行（項目名＋内容） */
.outline-item {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr); /* 項目名の幅 */
  border-bottom: 1px solid var(--color-border);
}
.outline-item dt {
  margin: 0;
  padding: 22px 24px;
  color: var(--color-primary-deep);
  background: var(--color-primary-light);
  font-weight: 700;
}
.outline-item dd {
  min-width: 0;
  margin: 0;
  padding: 22px 28px;
  color: var(--color-text-dark);
}
/* 日時の「2027年2月10日（水）」 */
.outline-date {
  font-size: var(--fs-2xl);    /* 文字サイズ（1.35rem）。さらに大きくするなら 1.6rem など */
  color: var(--color-primary-deep);
  font-weight: 900;
  line-height: 1.5;
}
/* 開催概要：時間「10:30～15:00」 */
.outline-time {
  margin-left: 1em;         /* PC：日付との間隔（全角1文字分） */
  font-size: 1.3rem;        /* 約21px */
  font-weight: 400;         /* 太字にしない */
  color: var(--color-text-dark);
}

/* 会場：名鉄トヨタホテル　文字大きさ */
.outline-venue {
  font-size: var(--fs-2xl);    /* 文字サイズ（1.35rem）。さらに大きくするなら 1.6rem など */
  color: var(--color-primary-deep);
  font-weight: 900;
  line-height: 1.5;
}

.outline-address { display: block; margin-top: 4px; }
/* 駅からのアクセス */
.access-note {
  display: block;
  margin-top: 8px;
  color: var(--color-text-muted);
  font-size: var(--fs-m);
}
/* 「会場へのアクセスを見る」などのリンク */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  color: var(--color-link);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.text-link:hover { color: var(--color-link-hover); }
/* 修正後：開催概要の「事前登録はこちら」をオレンジの楕円に（大きさは今のまま） */
.outline-entry-link {
  display: flex;
  width: fit-content;
  margin-top: 12px;
  padding: 6px 20px;                     /* 楕円の大きさ（上下 左右） */
  border-radius: var(--radius-pill);     /* 楕円 */
  color: var(--color-white);
  background: var(--color-accent);       /* 上の事前登録ボタンと同じオレンジ */
  text-decoration: none;                 /* 下線を消す */
  transition: background-color 0.2s;
}
.outline-entry-link:hover {
  color: var(--color-white);
  background: var(--color-accent-hover); /* マウスを乗せたときの色（上のボタンと同じ） */
}
.outline-important { display: block; margin-top: 7px; color: var(--color-primary-deep); }
/* 入場無料・服装自由などのタグ */
.outline-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.outline-tag-list li {
  padding: 4px 12px;
  border: 1px solid var(--color-border-blue);
  border-radius: 4px;
  color: var(--color-primary-deep);
  background: var(--color-surface);
  font-size: var(--fs-m);
  font-weight: 700;
}
/* 「※公共交通機関でのご来場がおすすめです」 */
.parking-recommend {
  margin: 8px 0 0;
  color: var(--color-primary-deep);
  font-size: var(--fs-m);
  font-weight: 700;
}
/* =========================================================
   12. よくある質問
========================================================= */
.faq-list { display: grid; gap: 12px; }
.faq-item {
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-white);
}
/* 質問 */
.faq-item summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 68px;
  padding: 17px 58px 17px 62px;
  color: var(--color-primary-deep);
  font-weight: 700;
  transition: background-color 0.2s;
}
.faq-item summary:hover,
.faq-item[open] summary { background: var(--color-surface); }
/* 左の「Q」 */
.faq-item summary::before {
  content: "Q";
  position: absolute;
  left: 20px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--color-white);
  background: var(--color-primary);
  font-size: var(--fs-m);
  font-weight: 900;
}
/* 右の「＋ / −」 */
.faq-item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 20px;
  color: var(--color-primary);
  font-size: 1.7rem;
  font-weight: 400;
  transform: translateY(-50%);
}
.faq-item[open] summary::after { content: "−"; }
/* 回答 */
.faq-answer { padding: 0 26px 22px 62px; color: var(--color-text-muted); }
.faq-answer p {
  margin: 0;
  padding-top: 17px;
  border-top: 1px solid var(--color-border);
  line-height: 1.85;
}
/* =========================================================
   13. フッター
========================================================= */
.footer {
  padding: 48px 20px 24px;
  color: var(--color-footer-text);
  background: var(--color-footer-bg);
  font-size: var(--fs-m);
}
/* 左：お問い合わせ / 右：ロゴ・リンク */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  max-width: var(--content-width);
  margin: 0 auto;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--color-footer-line);
}
.footer-info h2 { margin: 0 0 14px; color: var(--color-white); font-size: 1rem; }
.footer-info p,
.footer-brand p { margin: 0 0 5px; line-height: 1.75; }
.footer-info strong { color: var(--color-white); }
.footer-info .footer-support { margin-top: 15px; } /* 後援・協力 */
.footer-brand { text-align: right; }
.footer-logo {
  margin-bottom: 10px;
  color: var(--color-white);
  font-size: 1.3rem;
  font-weight: 900;
}
.footer-link { color: var(--color-footer-link); text-underline-offset: 3px; }
.footer-link:hover { color: var(--color-white); }
/* フッター：HP（チャレンジWorkとよた）の行 */
.footer-hp {
  font-size: var(--fs-l);   /* 文字サイズ（1.08rem）。さらに大きくするなら var(--fs-xl) */
  font-weight: 700;         /* 太さ（不要なら削除） */
}
.copyright {
  max-width: var(--content-width);
  margin: 22px auto 0;
  font-size: var(--fs-xs);
  text-align: center;
}
.copyright p { margin: 0; }
/* =========================================================
   14. タブレット（900px以下）
========================================================= */
@media (max-width: 900px) {
  .company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 1行2社 */
}
/* =========================================================
   15. スマートフォン（768px以下）
========================================================= */
@media (max-width: 768px) {
  /* --- 対象者：縦1列 --- */
  .target-list { grid-template-columns: 1fr; gap: 12px; }
  .target-list li { min-height: auto; padding: 16px 16px 16px 52px; }
  .target-list li::before { left: 16px; }
  /* --- 事前登録 --- */
  .entry-section { padding: 74px 0 58px; }
  .entry-container { width: calc(100% - 32px); }
  .entry-box { margin-top: 16px; border-width: 3px; }
  .entry-recommend {
    top: -31px;
    left: 10px;
    max-width: calc(100% - 20px);
    padding: 9px 13px;
    border-width: 2px;
    border-radius: 7px;
    font-size: 1rem;
  }
  .entry-recommend-check { font-size: 1.2rem; }
  .entry-box-inner { padding: 50px 20px 26px; }
  .entry-button { min-width: 0; width: 100%; padding: 16px 20px; font-size: var(--fs-xl); }
  .entry-benefit { font-size: var(--fs-l); }
  .entry-text { font-size: var(--fs-m); }
  /* --- 出展企業 --- */
  .industry-list { gap: 14px; }
  /* --- 来場特典 --- */
  .present-section { padding-block: 54px; }
  .present-list { gap: 10px; margin: 20px auto 22px; }
  .present-item {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    padding: 14px 13px;
    border-radius: 10px;
  }
  .present-number { width: 36px; height: 36px; margin-top: 2px; font-size: var(--fs-xs); }
  .present-item-text { font-size: var(--fs-m); }
  .present-item-text strong { font-size: var(--fs-base); }
  .present-section .target-note { margin-top: 12px; font-size: var(--fs-xs); line-height: 1.7; text-align: left; }
  .friend-detail { margin-top: 10px; padding-top: 9px; }
  .friend-detail summary { padding-right: 32px; font-size: var(--fs-s); }
  .friend-detail summary::after { width: 22px; height: 22px; font-size: 0.9rem; }
  .friend-detail-body { margin-top: 10px; padding: 12px; font-size: var(--fs-s); line-height: 1.7; }
  .friend-detail-body ul { padding-left: 1.3em; }
  .friend-detail-body li + li { margin-top: 7px; }
  .friend-detail-note { font-size: var(--fs-xs); }
  /* --- 開催概要・FAQ 共通 --- */
  .outline-section,
  .faq-section { padding-block: 58px; }
  .outline-section .section-header,
  .faq-section .section-header { margin-bottom: 30px; }
  /* --- 開催概要：項目名を上、内容を下に --- */
  .outline-item { display: block; }
  .outline-item dt { padding: 9px 15px; font-size: var(--fs-m); }
  .outline-item dd { padding: 14px 15px 20px; font-size: var(--fs-base); }
  .outline-tag-list { gap: 6px; }
  .outline-tag-list li { padding: 3px 9px; font-size: var(--fs-xs); }
  .access-note { font-size: var(--fs-s); }
  .text-link { font-size: var(--fs-m); } 
  /* --- FAQ --- */
  .faq-list { gap: 9px; }
  .faq-item summary {
    min-height: 62px;
    padding: 15px 44px 15px 50px;
    font-size: var(--fs-base);
    line-height: 1.6;
  }
  .faq-item summary::before { left: 13px; width: 28px; height: 28px; }
  .faq-item summary::after { right: 14px; font-size: 1.55rem; }
  .faq-answer { padding: 0 15px 18px 50px; font-size: var(--fs-m); }
  /* --- フッター：縦1列 --- */
  .footer { padding: 40px 16px 22px; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; padding-bottom: 25px; }
  .footer-brand {
    padding-top: 22px;
    border-top: 1px solid var(--color-footer-line);
    text-align: left;
  }
  .footer-logo { font-size: var(--fs-xl); }
  .copyright { margin-top: 20px; }
}
/* =========================================================
   16. 小さめのスマートフォン（600px以下）
========================================================= */
@media (max-width: 600px) {
  .hero { padding: 16px 12px 0; }
  .venue-caption { padding: 8px 12px; font-size: var(--fs-s); }
  /* 企業一覧：1行1社（文字の大きさはPCと同じ --fs-company） */
  .company-grid { grid-template-columns: 1fr; gap: 9px; padding: 14px; }
  .company-item-link,
  .company-item-no-link { min-height: 52px; padding: 12px 14px; }
}
/* =========================================================
   17. とても小さいスマートフォン（374px以下）
========================================================= */
@media (max-width: 374px) {
  .entry-recommend { font-size: var(--fs-m); }
  .entry-box-inner { padding: 50px 15px 22px; }
}
/* =========================================================
   18. 動きを減らす設定の方向け
========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entry-button,
  .company-item-link,
  .faq-item summary { transition: none; }
}