/**
 * スマホ専用のレイアウト調整（767px 以下）
 * responsive-overrides.css の後に読み込む
 */

/* ハンバーガーはモバイル幅でのみ表示（リサイズで DOM に残っても隠す） */
.cs-mobile-nav-toggle {
  display: none;
}

@media screen and (max-width: 767.98px) {
  #SITE_HEADER,
  #SITE_HEADER .U4Bvut,
  #SITE_HEADER .CJF7A2,
  #SITE_HEADER [data-mesh-id="SITE_HEADERinlineContent"] {
    height: auto !important;
    min-height: 0 !important;
  }

  /* ----- ヘッダー: 1=H1 / 2=ロゴ+お仕事検索+電話+ハンバーガー / 3=メニュー ----- */
  #SITE_HEADER [data-mesh-id="SITE_HEADERinlineContent-gridContainer"] {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    grid-template-rows: auto min-content auto !important;
    gap: 6px 6px !important;
    row-gap: 0 !important;
    align-items: start !important;
    flex-direction: unset !important;
    min-height: 0 !important;
    padding-top: max(6px, env(safe-area-inset-top, 0px)) !important;
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    border-bottom: 2px solid var(--cs-nav-red) !important;
  }

  #SITE_HEADER [data-mesh-id="SITE_HEADERinlineContent-gridContainer"] > * {
    align-self: start !important;
  }

  #SITE_HEADER #WRchTxt1-gva {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    width: 100% !important;
  }

  #SITE_HEADER #comp-jcsj4w4o {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    max-width: min(200px, 48vw) !important;
    padding-top: 0 !important;
    align-self: end !important;
    margin-bottom: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #SITE_HEADER #comp-jcsj4w4o .j7pOnl {
    display: block !important;
    line-height: 0 !important;
    font-size: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #SITE_HEADER #comp-jcsj4w4o .j7pOnl > img {
    display: block !important;
    margin: 0 !important;
    vertical-align: top !important;
  }

  #SITE_HEADER #comp-jcoayd61 {
    /* 電話番号を右上固定（三本線の左） */
    position: absolute !important;
    top: max(14px, env(safe-area-inset-top, 0px)) !important;
    right: 52px !important;
    left: auto !important;
    bottom: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: auto !important;
    align-self: auto !important;
    text-align: right !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    z-index: 65 !important;
    margin: 0 !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
  }

  #SITE_HEADER #comp-jcoayd61 p {
    text-align: right !important;
    white-space: nowrap !important;
  }

  #SITE_HEADER #comp-jcoayd61 .wixui-rich-text__text {
    font-size: clamp(12px, 3.8vw, 14px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #SITE_HEADER #comp-jcsom2z4 {
    /* 右上固定（3本線の上側） */
    position: absolute !important;
    top: max(2px, env(safe-area-inset-top, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    transform: none !important;
    left: auto !important;
    bottom: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: auto !important;
    align-self: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    z-index: 70 !important;
  }

  #SITE_HEADER .cs-mobile-nav-toggle {
    /* 三本線を右上固定 */
    position: absolute !important;
    top: max(14px, env(safe-area-inset-top, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    bottom: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: auto !important;
    align-self: auto !important;
    z-index: 60 !important;
    width: 38px !important;
    height: 38px !important;
    padding: 7px !important;
    margin: 0 !important;
  }

  /* グローバルメニュー: 既定は非表示、ハンバーガーで全画面寄りパネル */
  #SITE_HEADER #DrpDwnMn0-hwd {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    display: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    margin-top: 0 !important;
  }

  #SITE_HEADER #DrpDwnMn0-hwd .rhHoTC {
    border-left: none !important;
  }

  #DrpDwnMn0-hwd__more__ {
    display: none !important;
  }

  body.cs-menu-open {
    overflow: hidden !important;
  }

  body.cs-menu-open #SITE_HEADER #DrpDwnMn0-hwd {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: 0 !important;
    z-index: 10001 !important;
    padding: max(56px, env(safe-area-inset-top)) 16px 24px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-y: auto !important;
  }

  body.cs-menu-open #SITE_HEADER #DrpDwnMn0-hwd .qDaKPQ {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
  }

  body.cs-menu-open #SITE_HEADER #DrpDwnMn0-hwd .JAo9_G {
    width: 100% !important;
    border-bottom: 1px solid rgba(218, 25, 25, 0.25) !important;
  }

  body.cs-menu-open #SITE_HEADER #DrpDwnMn0-hwd .aWTgIN {
    padding: 14px 4px !important;
    font-size: 16px !important;
    color: #b81414 !important;
  }

  body.cs-menu-open #SITE_HEADER #DrpDwnMn0-hwd a,
  body.cs-menu-open #SITE_HEADER #DrpDwnMn0-hwd .wIGMae {
    color: #b81414 !important;
  }

  /* お仕事検索: タップターゲット確保（44px 目安）＋「ここをタップ」2行 */
  #SITE_HEADER #comp-jcsom2z4 .uDW_Qe.wixui-button {
    min-height: 36px !important;
    width: auto !important;
    max-width: none !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #SITE_HEADER #comp-jcsom2z4 .l7_2fn,
  #SITE_HEADER #comp-jcsom2z4 .wixui-button__label {
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  #SITE_HEADER {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  #PAGES_CONTAINER,
  #mainPage .HT5ybB,
  #ContainermainPage,
  #comp-mm2upvsd {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* ハンバーガー */
  .cs-mobile-nav-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    margin: 0;
    border: 0;
    border-radius: 4px;
    background: #fff;
    border: 1px solid rgba(218, 25, 25, 0.55);
    cursor: pointer;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }

  .cs-mobile-nav-toggle:focus-visible {
    outline: 2px solid #116dff;
    outline-offset: 2px;
  }

  .cs-mobile-nav-toggle__bar {
    display: block;
    height: 2px;
    width: 20px;
    background: #b81414;
    border-radius: 1px;
  }

  body.cs-menu-open .cs-mobile-nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  body.cs-menu-open .cs-mobile-nav-toggle__bar:nth-child(2) {
    opacity: 0;
  }

  body.cs-menu-open .cs-mobile-nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .cs-mobile-nav-toggle__bar {
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  /* ----- 企業のご担当の方: 赤枠が端で切れないようインセット ----- */
  #PAGES_CONTAINER #Cntnr1-6uu,
  #PAGES_CONTAINER #Cntnr2-16bn {
    margin-left: 12px !important;
    margin-right: 12px !important;
    max-width: calc(100% - 24px) !important;
    box-sizing: border-box !important;
  }

  /* ----- 新着情報: アイコンと見出しの重なり解消 ----- */
  #comp-jcr0ngv1 [data-mesh-id="comp-jcr0ngv1inlineContent-gridContainer"] {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 4px 12px !important;
    align-items: center !important;
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
  }

  #comp-jcr0ngv1 #comp-jcr9ditv {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 40px !important;
    max-width: 44px !important;
    justify-self: center !important;
  }

  #comp-jcr0ngv1 #comp-jcllwkqo {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
  }

  #comp-jcr0ngv1 #comp-jcr9z7h3 {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  #comp-jcr0ngv1 #comp-l0ci7d5r {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  /* ----- フッター ----- */
  #SITE_FOOTER [data-mesh-id="SITE_FOOTERinlineContent-gridContainer"] {
    padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  #SITE_FOOTER #comp-jcr4kzi6 {
    margin-bottom: 0 !important;
  }

  #SITE_FOOTER #comp-jcr4kzi6 [data-mesh-id="comp-jcr4kzi6inlineContent-gridContainer"] {
    gap: 4px !important;
  }

  #SITE_FOOTER #comp-jcr2adco {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #SITE_FOOTER #comp-jcr2adco p {
    margin-bottom: 0 !important;
    line-height: 1.25 !important;
  }

  #SITE_FOOTER #SITE_STRUCTURE_WRichText_1 {
    text-align: center !important;
    width: 100% !important;
    margin-top: 4px !important;
  }

  #SITE_FOOTER #SITE_STRUCTURE_WRichText_1 .wixui-rich-text__text {
    text-align: center !important;
  }
}