/* =====================================================================
   アップステージ 見た目の整理（2026-11-02・ユーザー承認の試作どおり）
   ups-unify.css の後に読む上書きだけ。テンプレートの中身・リンク・計測は触らない。
   戻す＝各テンプレートの「ups-refresh.css」読み込み1行を消す（このファイルは残してよい）。
   共通：ページ名の帯・見出しの帯を「軽い帯」に、下の固定メニューの文字切れ修正。
   地域トップだけ：検索6項目の2列タイル。トップだけ：検索ワード・法令の注意書き。三行広告の本文は縦書きのまま触らない。
   ===================================================================== */

/* ---- 1) ページ名の帯（地域トップ・検索結果・求人詳細／トップ） ---- */
main > h1,
.copy-area > h1.copy.is-catch {
  background: #0b1a33 !important;
  color: #fff !important;
  text-align: left !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  padding: 12px 16px !important;
  margin: 0 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: auto !important;
}

/* ---- 2) 見出しの帯を「軽い帯」に（左右に余白・角丸・左寄せ） ---- */
#TopLeft > section:not(#sectionAreaChoice):not(#sectionOccupation):not(#sectionQualification):not(#sectionGenre):not(#sectionEnviro):not(#sectionSalary) > h3,
#TopLeft > article.sangyo > h3,
#TopRight > h2,
#TopRight > section > h3,
#containerInner > h2,
#recommendOwn > h2,
#video > h3,
.guidelineMainWrap > h3,
h3.guidelineHeading,
h3.sectionTxtHeading,
.sect.keywords h3.ttl,
.group_site h3.subttl,
article.sangyo.keywords h3.ttl,
#jobDescription h2.ttl {
  border-radius: 8px !important;
  text-align: left !important;
  padding: 10px 12px !important;
  margin: 14px 8px 10px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  border: 0 !important;
  letter-spacing: 0 !important;
  height: auto !important;
}
/* 色：通常は青、件数・職種紹介などの黒帯は濃紺、三行広告はオレンジ */
#TopLeft > section:not(#sectionAreaChoice):not(#sectionOccupation):not(#sectionQualification):not(#sectionGenre):not(#sectionEnviro):not(#sectionSalary) > h3,
#TopRight > section > h3,
#video > h3,
.guidelineMainWrap > h3,
h3.guidelineHeading,
.sect.keywords h3.ttl,
.group_site h3.subttl {
  background: #0062d1 !important;
  color: #fff !important;
}
#TopRight > h2,
#containerInner > h2,
#jobDescription h2.ttl {
  background: #0b1a33 !important;
  color: #fff !important;
}
#TopLeft > article.sangyo > h3,
article.sangyo.keywords h3.ttl {
  background: #c2410c !important;
  color: #fff !important;
}
/* 帯の下の三角（吹き出し）は軽い帯では外す */
.sect.keywords h3.ttl::after,
article.sangyo.keywords h3.ttl::after,
.sect.keywords h3.ttl::before,
article.sangyo.keywords h3.ttl::before { display: none !important; }

/* 検索結果の求人カードの店名：カードの見出しとして左寄せ・上だけ角丸 */
#containerInner article > a > h3 {
  text-align: left !important;
  padding: 10px 12px !important;
  border-radius: 8px 8px 0 0 !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}

/* ---- 3) 下の固定メニュー：文字が下で切れないように（外枠48px固定→中身に合わせる） ---- */
.footerFixedMenu,
.footerFixedMenu > ul,
.footerFixedMenu li { height: auto !important; }
.footerFixedMenu li > a,
.footerFixedMenu li > button {
  height: auto !important;
  min-height: 56px !important;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
}
.footerFixedMenu li > a span,
.footerFixedMenu li > button span {
  font-size: 11px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  display: block !important;
}
.footerFixedMenu li > a svg,
.footerFixedMenu li > button svg { margin: 0 !important; }

/* ---- 4) 地域トップの検索6項目をタイルに（全幅共通の見た目。列数はスマホ2列・PC3列） ---- */
#TopLeft > h2 {
  background: transparent !important;
  color: #1a1d23 !important;
  text-align: left !important;
  font-size: 15px !important;
  padding: 12px 12px 4px !important;
  margin: 0 !important;
}
#listHead1, #listHead2, #listHead3, #listHead4, #listHead5, #listHead6 {
  background: #fff !important;
  color: #0062d1 !important;
  border: 1.5px solid #0062d1 !important;
  border-radius: 10px !important;
  min-height: 48px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 12px !important;
  margin: 0 !important;
  font-size: 15px !important;
  text-align: left !important;
  box-sizing: border-box !important;
}
#listHead1 b, #listHead2 b, #listHead3 b, #listHead4 b, #listHead5 b, #listHead6 b { font-size: 15px !important; }
/* 元の開閉アイコンは空なので隠し、下向きの矢印を描く（開いたら上向き） */
#listHead1 span, #listHead2 span, #listHead3 span, #listHead4 span, #listHead5 span, #listHead6 span { display: none !important; }
#listHead1::after, #listHead2::after, #listHead3::after, #listHead4::after, #listHead5::after, #listHead6::after {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2.5px solid #0062d1 !important;
  border-bottom: 2.5px solid #0062d1 !important;
  transform: translateY(-2px) rotate(45deg) !important;
  flex-shrink: 0 !important;
}
#TopLeft > section:has(> ul.listopen) > h3::after { transform: translateY(2px) rotate(-135deg) !important; }

/* ---- トップ：法令の注意書きを小さな枠に（全幅共通） ---- */
.sect.intro p.copy.is-caution .icon { display: none !important; }
.sect.intro p.copy.is-caution {
  background: #fff7d6 !important;
  border: 1px solid #f2d36b !important;
  border-radius: 8px !important;
  color: #7c5a00 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  padding: 8px 10px !important;
  margin: 10px 0 !important;
  text-align: left !important;
}

@media screen and (max-width: 767px) {
  /* ---- 4) 地域トップ：検索6項目を2列タイルに（開いた項目だけ全幅） ---- */
  #TopLeft > #sectionAreaChoice, #TopLeft > #sectionOccupation, #TopLeft > #sectionQualification,
  #TopLeft > #sectionGenre, #TopLeft > #sectionEnviro, #TopLeft > #sectionSalary {
    display: inline-block !important;
    vertical-align: top !important;
    width: calc(50% - 14px) !important;
    margin: 4px 0 4px 8px !important;
    box-sizing: border-box !important;
  }
  #TopLeft > #sectionAreaChoice:has(> ul.listopen), #TopLeft > #sectionOccupation:has(> ul.listopen), #TopLeft > #sectionQualification:has(> ul.listopen),
  #TopLeft > #sectionGenre:has(> ul.listopen), #TopLeft > #sectionEnviro:has(> ul.listopen), #TopLeft > #sectionSalary:has(> ul.listopen) {
    display: block !important;
    width: auto !important;
    margin: 4px 8px !important;
  }

  /* 三行広告の本文は縦書きのまま（縦書きに意味がある＝2026-11-02 ユーザー指示）。見出しの帯だけ軽くする */

  /* ---- 7) トップ：検索ワードは文字の長さで折り返すチップに ---- */
  .sect.keywords ul.list { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; padding: 0 8px !important; }
  .sect.keywords ul.list li { float: none !important; width: auto !important; margin: 0 !important; display: block !important; }
  .sect.keywords ul.list li a {
    display: block !important;
    height: auto !important;
    width: auto !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
  }

  /* ---- 8) トップ：ヒーロー見出し・会員登録ボタン・法令の注意書き・検索ボタン ---- */
  .copy-area > h2.copy.is-catch { font-size: 22px !important; line-height: 1.45 !important; }
  .map-area a.is-touroku { background: #c2410c !important; color: #fff !important; box-shadow: inset 0 -5px 0 0 #8a2d08, 0 2px 5px 0 rgba(0,0,0,.2) !important; }
  /* トップ：職種紹介は1職種ずつ枠で区切る（文章はそのまま） */
  #jobDescription .wrapper > article { border: 1px solid #e3e7ee !important; border-radius: 10px !important; padding: 10px !important; margin: 0 8px 12px !important; }
  #jobDescription .wrapper > article > h3 { margin: 0 0 8px !important; font-size: 17px !important; }
}

@media screen and (min-width: 768px) {
  /* PC：検索6項目を3列×2段（開いた項目だけ全幅） */
  #TopLeft > #sectionAreaChoice, #TopLeft > #sectionOccupation, #TopLeft > #sectionQualification,
  #TopLeft > #sectionGenre, #TopLeft > #sectionEnviro, #TopLeft > #sectionSalary {
    display: inline-block !important;
    vertical-align: top !important;
    width: calc(33.333% - 11px) !important;
    margin: 4px 0 4px 8px !important;
    box-sizing: border-box !important;
  }
  #TopLeft > #sectionAreaChoice:has(> ul.listopen), #TopLeft > #sectionOccupation:has(> ul.listopen), #TopLeft > #sectionQualification:has(> ul.listopen),
  #TopLeft > #sectionGenre:has(> ul.listopen), #TopLeft > #sectionEnviro:has(> ul.listopen), #TopLeft > #sectionSalary:has(> ul.listopen) {
    display: block !important;
    width: auto !important;
    margin: 4px 8px !important;
  }
  .sect.intro p.copy.is-caution { max-width: 640px !important; margin: 16px auto !important; font-size: 13px !important; }
}
.headerSearchSubmit { background: #0062d1 !important; color: #fff !important; border-color: #0062d1 !important; }