@charset "UTF-8";

/* =========================================================
   共通スマートフォン・タブレット用レスポンシブCSS (responsive-common.css)
   ========================================================= */

/* PC用デフォルト：スマホ専用要素（ハンバーガーボタン、SP言語切り替え）を非表示 */
#nav-toggle,
.sp-lang-select {
  display: none;
}

/* 画面幅が1100px未満（タブレット・スマホサイズ）の時のみ、PC用の固定幅設定をリセット */
@media screen and (max-width: 1100px) {
  html, body {
    overflow-x: hidden !important;
  }
  body, #container, #gHeader, #gFooter, #main {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* 画面幅が768px以下（スマートフォンサイズ）の共通スタイル */
@media screen and (max-width: 768px) {
  /* ヘッダー全体の高さと位置固定（高さ74px固定、下端に1pxの区切り線を追加） */
  #gHeader {
    height: 74px !important;
    padding: 15px 20px !important;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box;
    z-index: 100;
    background-color: #FFF;
    border-bottom: 1px solid #E2E2E8 !important;
  }
  #gHeader.on {
    padding: 15px 20px !important; /* スクロール時の余白変化リセット */
  }

  /* ロゴの配置とサイズ調整（上部マージンをリセットして上に持ち上げ、上下中央揃え） */
  #gHeader .header-logo,
  #gHeader h1 {
    float: none;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: inline-block;
    vertical-align: middle;
  }
  #gHeader .header-logo img,
  #gHeader.on .header-logo img,
  #gHeader h1 img,
  #gHeader.on h1 img,
  #index_title {
    width: 140px !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
  }

  /* トグル領域用コンテナ */
  #gHeader .hBox {
    float: none;
    display: block;
  }

  /* ハンバーガーボタン位置・タップ領域（上端から15px固定） */
  #nav-toggle {
    display: block;
    position: absolute;
    right: 15px;
    top: 15px !important;
    transform: none !important;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 110;
  }

  /* 三本線の生成とアニメーション設定 */
  #nav-toggle span {
    display: block;
    position: absolute;
    left: 10px;
    width: 24px;
    height: 2px;
    background-color: #2b2c31;
    transition: all 0.3s;
  }
  #nav-toggle span:nth-child(1) { top: 14px; }
  #nav-toggle span:nth-child(2) { top: 21px; }
  #nav-toggle span:nth-child(3) { top: 28px; }

  /* メニュー展開時：三本線を「✕」に変形 */
  #gHeader.nav-open #nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  #gHeader.nav-open #nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  #gHeader.nav-open #nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* スマホ用メニュー領域：初期状態は高さ0（ヘッダーと2px重ねる） */
  #gNavi {
    display: block;
    margin-top: 0;
    width: 100%;
    position: absolute;
    top: calc(100% - 2px) !important;
    left: 0;
    background-color: #FFF;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    z-index: 105 !important;
  }

  /* メニュー展開時の高さと境界線・上下余白 */
  #gHeader.nav-open #gNavi {
    max-height: 450px;
    border-top: 1px solid #F0F0F2;
    padding: 15px 0;
  }

  /* スクロール時のズレ・隙間バグを完全に防止 */
  #gHeader.on #gNavi {
    margin-top: 0 !important;
  }

  /* メニュー項目縦並びとタップ領域最適化 */
  #gNavi li {
    display: block;
    margin: 0;
    text-align: center;
    border-bottom: 1px solid #F0F0F2;
  }
  #gNavi li a {
    display: block;
    padding: 15px 0;
    font-size: 15px;
    letter-spacing: 1.5px;
    color: #2b2c31;
  }

  /* スマホ用言語切り替えの表示と配置（ハンバーガーボタンの左横、上下中央寄せ） */
  .sp-lang-select {
    display: block !important;
    position: absolute !important;
    right: 70px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 110 !important;
    font-size: 13px !important;
    letter-spacing: 1.2px !important;
    color: #2b2c31 !important;
  }
  .sp-lang-select a {
    color: #2b2c31 !important;
    text-decoration: none !important;
  }
  .sp-lang-select b {
    color: #2b2c31 !important;
  }

  /* ハンバーガーメニュー内の元の言語切り替え項目を非表示 */
  #gNavi li:last-child {
    display: none !important;
  }

  /* PC用ホバー時画像切り替えの無効化 */
  #gNavi li a .out { display: inline !important; }
  #gNavi li a .over { display: none !important; }

  /* 画像と動画の画面はみ出し防止 */
  img, video {
    max-width: 100%;
    height: auto !important;
  }

  /* フッターのスマホ表示調整 */
  #gFooter .fBox {
    padding: 30px 20px !important;
    text-align: center !important;
  }
  #gFooter .fBox .photo {
    margin-bottom: 10px !important;
    text-align: center !important;
  }
  #gFooter .fBox .photo img {
    margin: 0 auto !important;
    display: block !important;
  }
  #gFooter .fBox .copyright {
    text-align: center !important;
    margin-top: 5px !important;
  }
  #gFooter .pageTop {
    margin: 20px 0 15px !important;
  }
}


/* スマホ表示時の求人ポップアップ枠線・余白の完全リセット */
.fancybox-wrap {
  width: 92% !important;
  left: 4% !important;
  box-sizing: border-box !important;
}
.fancybox-skin {
  padding: 0 !important;
  background: #FFF !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
  box-sizing: border-box !important;
}
.fancybox-outer {
  box-sizing: border-box !important;
}
.fancybox-inner {
  width: 100% !important;
  height: auto !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
}
.pop {
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* =========================================================
   CONTACT セクション（RECRUIT / ORDER）スマホ表示はみ出し対策 & ロゴ迫力サイズ化
   ========================================================= */
@media screen and (max-width: 768px) {

  /* [ガード1] 親liは写真の縦横比を維持しつつ、必要枠高さを確保・はみ出しはクリッピング */
  .contactBox > ul > li {
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 1200 / 784;
    width: 100%;
    min-height: 290px !important;
  }
  .contactBox > ul > li > a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* [ガード2] 背景写真（out / over）を枠全体に絶対配置 */
  .contactBox .photo {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }
  .contactBox .photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  /* [ガード3] .inBox をflex化して子を縦横中央へ */
  .contactBox .inBox {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 12px !important;
    box-sizing: border-box !important;
  }

  .contactBox .inBox .innerBox,
  .contactBox .inBox .infoBox {
    width: 100%;
  }

  /* .textImg は1列縦並び・全要素中央揃え */
  .contactBox .textImg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  /* RECRUIT / ORDER ロゴ画像（PC版原寸に近い迫力サイズ 280px） */
  .contactBox .textImg > img.img {
    width: 280px !important;
    max-width: 90% !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* リンク文（アイコン+テキスト）PCの絶対配置を解除しflex配置 */
  .contactBox .catchLink,
  .contactBox .textImg p {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: #FFF;
  }
  .contactBox .catchLink img,
  .contactBox .textImg p img {
    width: 16px !important;
    height: 10px !important;
    vertical-align: middle;
    margin-right: 4px;
  }

  /* キャッチコピー画像（文字がくっきり読める適正サイズ） */
  .contactBox .catchImgWrap {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    text-align: center;
    line-height: 0;
  }
  .contactBox .img-catch {
    display: block;
    width: 82% !important;
    max-width: 260px;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    vertical-align: top;
  }
}

/* 画面幅 360px 付近の中型端末用 */
@media screen and (max-width: 360px) {
  .contactBox > ul > li {
    min-height: 280px !important;
  }
  .contactBox .inBox {
    padding: 6px 8px !important;
  }
  .contactBox .textImg {
    gap: 3px;
  }
  .contactBox .textImg > img.img {
    width: 270px !important;
  }
  .contactBox .catchLink,
  .contactBox .textImg p {
    font-size: 10.5px !important;
  }
  .contactBox .img-catch {
    width: 80% !important;
    max-width: 250px;
  }
}

/* 画面幅 330px 以下の超小型端末用（旧iPhone SE第一世代 320px等） */
@media screen and (max-width: 330px) {
  .contactBox > ul > li {
    min-height: 265px !important;
  }
  .contactBox .inBox {
    padding: 5px 6px !important;
  }
  .contactBox .textImg {
    gap: 3px;
  }
  .contactBox .textImg > img.img {
    width: 250px !important;
  }
  .contactBox .catchLink,
  .contactBox .textImg p {
    font-size: 10px !important;
  }
  .contactBox .img-catch {
    width: 78% !important;
    max-width: 230px;
  }
}