/* =========================================================
   1. 基本カラー
   ========================================================= */

:root {
  /* 見出し、ヘッダーなどの濃紺 */
  --n: #123a63;

  /* メインボタン、アクセントの青 */
  --b: #075aa6;

  /* 濃い青。必要に応じて使用 */
  --bd: #064b8a;

  /* 当日の流れ、正常案内などの緑 */
  --g: #167852;

  /* 枠線などの薄いグレー */
  --l: #d7e0ea;

  /* ページ全体の背景色 */
  --bg: #f5f7fa;

  /* 注意表示の背景色 */
  --warn: #fff4d6;

  /* エラー、中止表示の背景色 */
  --err: #fff0f0;
}


/* =========================================================
   2. 全体の基本設定
   ========================================================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: #172333;
  font:
    16px / 1.7
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans JP",
    sans-serif;
}

/*
  ページの最大幅。
  1080pxを変更すると、ページ全体の横幅が変わります。
*/
.wrap {
  width: min(1080px, calc(100% - 32px));
  margin: auto;
}


/* =========================================================
   3. ヘッダーとフッター
   ========================================================= */

header,
footer {
  padding: 15px 0;
  background: var(--n);
  color: #fff;
}

header small {
  display: block;
}

/*
  ヘッダー内部を左右に分けます。
  左側に施設名、右側にホームアイコンを配置します。
*/
.header-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}


/* =========================================================
   4. ホームページへ戻るアイコン
   ========================================================= */

/*
  特設サイトからハローワーク大宮ホームページへ戻るアイコンです。

  大きさを変更する場合:
  width、height、flex-basisを同じ値にしてください。

  例:
  30pxにする場合
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
*/
.home-icon {
  display: inline-flex;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;

  align-items: center;
  justify-content: center;

  border-radius: 8px;
  background: linear-gradient(#fff, #e8eef4);
  color: var(--n);

  font-size: 23px;
  line-height: 1;
  text-decoration: none;

  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 0 rgba(0, 0, 0, 0.12),
    0 2px 5px rgba(0, 0, 0, 0.22);
}

.home-icon:hover {
  transform: translateY(-1px);
}

.home-icon:active {
  transform: translateY(1px);

  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   5. 見出し
   ========================================================= */

h1,
h2,
h3,
h4 {
  color: var(--n);
  line-height: 1.35;
}


/*
  参加事業所カード内の会社名です。

  会社名を大きくしたい場合は、font-sizeを変更してください。
  例:
  24px  控えめ
  26px  おすすめ
  30px  大きめ
*/
.company h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 27px;
  line-height: 1.4;
}


/* =========================================================
   6. ページ上部のメインエリア
   ========================================================= */

.hero {
  padding: 42px 0;
  background: #eef5fa;
}

.lead {
  margin-bottom: 28px;
}


/* =========================================================
   7. 「参加までの流れ」「当日の流れ」
      「開催日程を選ぶ」の白い外枠
   ========================================================= */

.guide-box,
.schedule-box {
  margin: 22px 0;
  padding: 24px;

  background: #fff;
  border-radius: 14px;

  box-shadow:
    0 5px 18px rgba(18, 58, 99, 0.10);
}

.guide-box h2,
.schedule-box h2 {
  margin: 0 0 18px;
}


/* =========================================================
   8. 流れの3ステップ
   ========================================================= */

/*
  パソコンでは3項目を横並びにします。
*/
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/*
  各ステップの小さなカードです。
*/
.step {
  display: flex;
  gap: 12px;
  align-items: flex-start;

  padding: 15px;

  background: #f7fafc;
  border-radius: 10px;
}

/*
  ステップ番号の丸です。
*/
.step-num {
  display: flex;
  flex: 0 0 34px;

  width: 34px;
  height: 34px;

  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: var(--b);
  color: #fff;

  font-weight: 800;

  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.35),
    0 2px 4px rgba(18, 58, 99, 0.25);
}

/*
  「当日の流れ」の番号だけ緑色にします。
*/
.day-steps .step-num {
  background: var(--g);
}

/*
  ステップ内の見出しです。
  会社名のh3とは別に指定しています。
*/
.step h3 {
  margin: 3px 0 5px;
  font-size: 17px;
}

.step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}


/* =========================================================
   9. 参加証明書の案内
   ========================================================= */

.certificate {
  margin: 16px 0 0;
  padding: 11px 14px;

  background: var(--warn);
  border-radius: 8px;

  font-weight: 700;
}


/* =========================================================
   10. 開催日程ボタンの並び
   ========================================================= */

.schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


/* =========================================================
   11. ボタン共通設定
   ========================================================= */

/*
  日程ボタン、予約ボタン、求人ボタンなどの共通デザインです。
  枠線は使用せず、グラデーションと影で立体感を出しています。
*/
.schedule-button,
button,
.button {
  appearance: none;

  padding: 11px 17px;

  border: 0;
  border-radius: 9px;

  background:
    linear-gradient(#1480ce, #075aa6);

  color: #fff;
  text-decoration: none;

  font: inherit;
  font-weight: 800;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.15),
    0 3px 7px rgba(18, 58, 99, 0.25);

  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}


/* =========================================================
   12. 日程選択ボタン
   ========================================================= */

.schedule-button {
  display: grid;
  min-width: 190px;
  gap: 2px;
  text-align: center;
}

.schedule-button span {
  font-size: 14px;
}

/*
  選択されていない日程ボタンです。
*/
.schedule-button:not(.is-selected) {
  background:
    linear-gradient(#fff, #edf3f8);

  color: var(--b);
}


/* =========================================================
   13. ボタン操作時の表示
   ========================================================= */

button:hover,
.button:hover {
  transform: translateY(-1px);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    inset 0 -2px 0 rgba(0, 0, 0, 0.13),
    0 5px 10px rgba(18, 58, 99, 0.28);
}

button:active,
.button:active {
  transform: translateY(1px);

  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.18),
    0 1px 3px rgba(18, 58, 99, 0.18);
}

/*
  求人情報ボタンなど、白系のボタンです。
*/
.button-light,
.secondary {
  background:
    linear-gradient(#fff, #e8f0f7);

  color: var(--b);
}

/*
  削除ボタンです。
*/
.danger {
  background:
    linear-gradient(#fff, #f7e7e7);

  color: #a00000;
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


/* =========================================================
   14. 開催情報、会社情報などのカード
   ========================================================= */

.panel,
.card,
.notice {
  margin: 18px 0;
  padding: 20px;

  background: #fff;
  border: 1px solid var(--l);
  border-radius: 10px;
}

/*
  会社カードの上部に青いアクセント線を表示します。
*/
.company {
  border-top: 5px solid var(--b);
}

.event-panel {
  margin-top: 28px;
}


/* =========================================================
   15. 通知、注意、中止メッセージ
   ========================================================= */

.notice {
  border-left: 5px solid var(--g);
}

.warning {
  border-left-color: #b77600;
  background: var(--warn);
}

.error {
  border-left-color: #a00000;
  background: var(--err);
}


/* =========================================================
   16. 開催日、時間、会場、就業場所
   ========================================================= */

.facts {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 5px 12px;
}

.facts dd {
  margin: 0;
}

.workplace {
  padding-top: 14px;
  border-top: 1px solid var(--l);
}


/* =========================================================
   17. 仕事内容
   ========================================================= */

/*
  求人情報全体の背景です。
*/
.jobs {
  margin: 22px 0;
  padding: 16px;

  background: #f7fafc;
  border-radius: 10px;
}

.jobs h4 {
  margin: 0 0 12px;
}

/*
  求人をパソコンでは2列にします。
*/
.job-list {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 12px;
}

/*
  個々の職種のカードです。
*/
.job-item {
  padding: 14px;

  background: #fff;
  border-radius: 8px;

  box-shadow:
    0 2px 7px rgba(18, 58, 99, 0.10);
}

/*
  職種名の文字サイズです。
*/
.job-item strong {
  display: block;
  color: var(--n);
  font-size: 17px;
}

.job-item p {
  display: flex;
  gap: 10px;

  margin: 8px 0 0;
}

.job-item p span {
  color: #607387;
  font-size: 14px;
}


/* =========================================================
   18. 求人ボタン、相談予約ボタンの並び
   ========================================================= */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  margin-top: 18px;
}

.actions .notice {
  margin: 0;
}


/* =========================================================
   19. 管理画面でも使用する共通レイアウト
   ========================================================= */

.row,
.toolbar,
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.row {
  justify-content: space-between;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}

.full {
  grid-column: 1 / -1;
}


/* =========================================================
   20. 入力欄
   ========================================================= */

label {
  display: block;
  margin: 12px 0 4px;
  font-weight: 800;
}

input,
textarea,
select {
  display: block;
  width: 100%;

  padding: 10px;

  border: 2px solid #7d90a5;
  border-radius: 6px;

  background: #fff;

  font: inherit;
}

textarea {
  min-height: 95px;
}


/* =========================================================
   21. 求人検索設定欄
   ========================================================= */

fieldset {
  margin: 16px 0;
  padding: 14px;

  border: 1px solid var(--l);
}

.search-box {
  margin-top: 16px;
  padding: 15px;

  border: 1px solid var(--l);
  border-radius: 8px;
}

.numbers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 12px;
}


/* =========================================================
   22. 保存ボタン領域
   ========================================================= */

.savebar {
  position: sticky;
  bottom: 0;

  padding: 12px;

  background: #fff;
  border-top: 1px solid var(--l);
}


/* =========================================================
   23. PDF抽出テキスト表示
   ========================================================= */

pre {
  max-height: 240px;
  overflow: auto;

  padding: 12px;

  background: #edf1f5;

  white-space: pre-wrap;
  font-size: 13px;
}


/* =========================================================
   24. 入力値の検証結果
   ========================================================= */

.validation {
  font-size: 13px;
}

.ok {
  color: #08733f;
}

.bad {
  color: #a00000;
}


/* =========================================================
   25. 非表示要素
   ========================================================= */

[hidden] {
  display: none !important;
}


/* =========================================================
   26. キーボード操作時のフォーカス
   ========================================================= */

:focus-visible {
  outline: 4px solid #ffbf47;
  outline-offset: 3px;
}


/* =========================================================
   27. スマートフォン表示
   ========================================================= */

@media (max-width: 720px) {
  .hero {
    padding: 28px 0;
  }

  .guide-box,
  .schedule-box {
    padding: 18px;
  }

  /*
    スマートフォンでは各項目を1列にします。
  */
  .steps,
  .grid,
  .numbers,
  .job-list {
    grid-template-columns: 1fr;
  }

  /*
    日程ボタンは横スクロールにします。
  */
  .schedule {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .schedule-button {
    flex: 0 0 210px;
  }

  .full {
    grid-column: auto;
  }

  /*
    求人、予約ボタンを横幅いっぱいにします。
  */
  .actions .button {
    width: 100%;
  }

  /*
    スマートフォンでの会社名サイズです。
  */
  .company h3 {
    font-size: 22px;
  }
}