@charset "utf-8";
/* ============================================================
   seisin-cs.com スマホ用CSS（画面幅767px以下のときだけ効く）
   ------------------------------------------------------------
   置き場所 : wp-content/themes/quick/css/sp.css
   読み込み : functions.php の末尾（wp_head で最後に出力）
   作成     : 2026-10-19 クイック福岡
   ルール   : PCのCSSは触らず、スマホの調整はこのファイルだけに書く
   ============================================================ */

@media screen and (max-width: 767px) {

/* ============================================================
   1. 全体
   ============================================================ */
html, body { min-width: 0 !important; width: auto !important; }
body { -webkit-text-size-adjust: 100%; overflow-x: hidden; padding-bottom: 100px !important; }
img { max-width: 100%; height: auto; }
#globalHeader h1, #globalHeader ul#menu-header, #globalHeader aside, #breadcrumb ul, #globalFooter, #contents { width: auto !important; }
#contents *, #globalHeader *, #globalFooter * { max-width: 100% !important; box-sizing: border-box; }


/* ============================================================
   2. ヘッダー（下層ページ共通：header.php / header-entry.php）
   ============================================================ */
#globalHeader h1 { height: auto !important; padding: 8px 12px !important; }
#globalHeader h1 img { width: 300px !important; }
#globalHeader nav { height: auto !important; }

/* グローバルメニュー：2列 */
#globalHeader ul#menu-header { height: auto !important; overflow: hidden; }
#globalHeader ul#menu-header > li { width: 50% !important; float: left !important; }
#globalHeader ul#menu-header > li > a { width: auto !important; font-size: 12px; }

/* メルマガ登録：画像ボタン → 他のメニューと同じ文字ボタン（下層 4095 / トップ 46） */
header#globalHeader ul#menu-header > li#menu-item-4095,
body.page-template-home-2018 header#globalHeader ul#menu-header > li#menu-item-46 { position: static !important; width: 50% !important; height: 40px !important; overflow: hidden; border: 0 !important; border-right: 1px solid #9a9a9a !important; border-radius: 0 !important; background: none !important; transform: none !important; }
header#globalHeader ul#menu-header > li#menu-item-4095 > a,
body.page-template-home-2018 header#globalHeader ul#menu-header > li#menu-item-46 > a { display: block !important; width: auto !important; height: 40px !important; margin: 0 !important; transform: none !important; background: none !important; text-indent: 0 !important; overflow: hidden; white-space: nowrap; line-height: 40px !important; color: #fff !important; font-size: 0 !important; font-weight: 700; text-align: center; text-shadow: 0 -1px 0 #000; }
header#globalHeader ul#menu-header > li#menu-item-4095 > a::after,
body.page-template-home-2018 header#globalHeader ul#menu-header > li#menu-item-46 > a::after { content: "メルマガ登録"; font-size: 12px; }

/* Entryボタン：右下に追従（元の114pxのまま0.74倍に縮小） */
header#globalHeader ul#menu-header > li#menu-item-10799 { position: fixed !important; top: auto !important; left: auto !important; right: 8px !important; bottom: 8px !important; width: 114px !important; height: 114px !important; z-index: 1000; background-size: auto !important; transform: scale(0.74); transform-origin: right bottom; }
header#globalHeader ul#menu-header > li#menu-item-10799 > a { width: 114px !important; height: 114px !important; background-size: auto !important; }

/* 電話・メールバナー：中央 */
#globalHeader aside { height: auto !important; text-align: center; padding: 6px 12px !important; }
#globalHeader aside a { position: static !important; display: block !important; width: auto !important; height: auto !important; text-align: center; }
#globalHeader aside a img { display: block !important; width: 220px !important; margin: 0 auto !important; }

/* パンくず */
#breadcrumb ul { padding: 0 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ============================================================
   3. フッター（下層ページ共通）
   ============================================================ */
#globalFooter { padding: 12px !important; height: auto !important; }
#globalFooter nav, #globalFooter ul { height: auto !important; }
#globalFooter nav { overflow: hidden; margin-bottom: 8px; }
#globalFooter ul#menu-footer li { float: none !important; display: inline-block !important; width: auto !important; height: auto !important; margin: 2px 4px !important; }
#globalFooter ul#menu-footer li a { width: auto !important; height: auto !important; }


/* ============================================================
   4. 本文の基本レイアウト（下層ページ共通）
   ============================================================ */
#contents { padding: 0 12px !important; overflow-wrap: anywhere; }
#contentsTitle h1 { font-size: 22px !important; height: auto !important; }

/* PCの固定幅・回り込みを解除して縦に積む */
#contents section, #contents div, #contents h1, #contents h2, #contents h3, #contents p, #contents ul, #contents ol, #contents li, #contents dl, #contents dt, #contents dd, #contents table { width: auto !important; float: none !important; }

/* PCの固定の高さを解除（文字のはみ出し・重なり対策） */
#contents section, #contents div, #contents li, #contents dl, #contents dd, #contents p, #contents tr, #contents td, #contents hgroup, #contents h2 { height: auto !important; min-height: 0 !important; }

/* 左右のズレ：PC用の左右余白を解除して中央に */
#contents #content section, #contents #content .contentBody, #contents #content section > h1, #contents #content section > h2, #contents #content section > table, #contents #content section > div { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
#contents #content dl, #contents #content h3, #contents #content h4, #contents #content ol { margin-left: 0 !important; margin-right: 0 !important; }
#contents #content dl { padding-left: 0 !important; padding-right: 0 !important; }

/* 表：1列（見出し → 中身の順） */
#contents table, #contents tbody, #contents tr, #contents table th, #contents table td { display: block; width: auto !important; }
#contents table th, #contents table td { padding-left: 8px !important; padding-right: 8px !important; }

/* 位置固定の解除 */
#contents time { position: static !important; }
#contents .likebox { position: static !important; margin: 16px auto 0 !important; }
#contents #postTotal { position: static !important; margin: 8px 0 !important; }
#contents iframe { max-width: 100% !important; }
#contents strong { white-space: normal !important; }

/* PCで改行位置を合わせていた<br>を消して、文章を流す */
#contents section .contentBody p br { display: none; }


/* ============================================================
   5. 文字組み（行間・字間・見出し）
   ============================================================ */
#contents p, #contents td, #contents dd, #contents li { line-height: 1.85 !important; letter-spacing: 0.04em; }
#contents p, #contents td, #contents dd { font-size: 14px !important; }
#contents p + p { margin-top: 0.8em !important; }
#contents section > h1, #contents section > h2, #contents section > hgroup { margin-bottom: 12px !important; }
#contents section { margin-bottom: 24px !important; }
#contents h1.orangeLabel, #contents h1.whiteLabel { height: auto !important; white-space: normal !important; line-height: 1.4 !important; padding-top: 6px !important; padding-bottom: 6px !important; font-size: 17px !important; }
#contents h2 { font-size: 18px !important; line-height: 1.4 !important; }
#contents h3 { font-size: 16px !important; line-height: 1.4 !important; height: auto !important; }


/* ============================================================
   6. 画像の配置
   ============================================================ */
#contents img { float: none !important; }
#contents #content div > img, #contents #content section > img, #contents #content dd > img { display: block; float: none !important; position: static !important; margin-left: auto !important; margin-right: auto !important; }
#contents #content p > img:first-child { display: block; margin-left: auto !important; margin-right: auto !important; margin-bottom: 8px !important; }
#contents p:has(> img:only-child) { text-align: center; }

/* リンク画像が1つだけ置いてある箇所（お問い合わせフォームボタン等）は中央 */
#contents a:has(> img:only-child):only-child { display: block !important; width: auto !important; text-align: center; }
#contents a:has(> img:only-child):only-child > img { display: inline-block !important; margin: 0 auto !important; }


/* ============================================================
   7. 各ページ上部のメイン画像
   PCでは #content の背景に敷いている → スマホでは本文の上に表示
   ============================================================ */
#contents #content { background-size: 0 0 !important; padding-top: 12px !important; padding-left: 12px !important; padding-right: 12px !important; }
#contents.message #content::before, #contents.servicelineup #content::before, #contents.outsourcing #content::before, #contents.happyvoice #content::before, #contents.usersvoice #content::before, #contents.jobinformation #content::before, #contents.dispatch #content::before, #contents.development #content::before, #contents.foreign #content::before, #contents.exploitation #content::before, #contents.telemarketing #content::before, #contents.mediation #content::before, #contents.yousetsu #content::before, #contents.corporatecapability #content::before { content: ""; display: block; background-image: inherit; background-repeat: no-repeat; background-size: 100% auto; aspect-ratio: 930 / 512; margin-bottom: 12px; }
/* 画像の縦横比が 930×512 以外のページ */
#contents.happyvoice #content::before { aspect-ratio: 930 / 430; }
#contents.jobinformation #content::before { aspect-ratio: 930 / 232; }
#contents.development #content::before { aspect-ratio: 930 / 460; }
#contents.foreign #content::before { aspect-ratio: 900 / 600; }
#contents.exploitation #content::before { aspect-ratio: 930 / 480; }
#contents.telemarketing #content::before { aspect-ratio: 930 / 486; }
#contents.mediation #content::before { aspect-ratio: 930 / 485; }
#contents.corporatecapability #content::before { aspect-ratio: 930 / 563; }
/* 画像の余白を切り落として中身だけ表示（画像の中身の範囲を測って算出） */
body #contents.message #content::before { aspect-ratio: 860 / 510; background-size: 108.14% auto; background-position: 100% 100%; }
body #contents.servicelineup #content::before { aspect-ratio: 865 / 427; background-size: 107.51% auto; background-position: 72.31% 34.12%; }
body #contents.usersvoice #content::before { aspect-ratio: 338 / 241; background-size: 275.15% auto; background-position: 84.12% 26.57%; max-width: 338px; margin-left: auto; margin-right: auto; }
body #contents.outsourcing #content::before { aspect-ratio: 761 / 477; background-size: 122.21% auto; background-position: 33.73% 100%; }
body #contents.dispatch #content::before { aspect-ratio: 874 / 482; background-size: 106.41% auto; background-position: 85.71% 100%; }
body #contents.happyvoice #content::before { aspect-ratio: 909 / 383; background-size: 102.31% auto; background-position: 23.81% 10.64%; }
body #contents.yousetsu #content::before { aspect-ratio: 892 / 490; background-size: 104.26% auto; background-position: 81.58% 100%; }
body #contents.exploitation #content::before { aspect-ratio: 830 / 427; background-size: 112.05% auto; background-position: 41% 100%; }
body #contents.foreign #content::before { aspect-ratio: 851 / 423; background-size: 105.76% auto; background-position: 30.61% 26.55%; }

/* メイン画像をよけるためのPC用の余白を解除 */
#contents #content > section:first-of-type, #contents #content > section:first-of-type .contentBody { padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; height: auto !important; min-height: 0 !important; }
#contents #content > section:first-of-type > p, #contents #content > section:first-of-type > hgroup, #contents #content > section:first-of-type > .inner, #contents #content > section:first-of-type > .inner > p { margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }


/* ============================================================
   8. 本文内の背景画像（PCでは文字の横）→ スマホでは文字の下に表示
   padding-bottom = 表示幅 × 画像の縦横比 + 12px
   ============================================================ */
#contents.message #eightItems-section { background-position: 50% 100% !important; background-size: min(270px, 100%) auto !important; padding-right: 0 !important; padding-bottom: calc(min(270px, 100%) * 0.3148 + 12px) !important; }
#contents.outsourcing #outsourcing-section div.contentBody { background-position: 50% 100% !important; background-size: min(320px, 100%) auto !important; padding-right: 0 !important; padding-bottom: calc(min(320px, 100%) * 0.6250 + 12px) !important; }
#contents.outsourcing #merit01-section div.contentBody { background-position: 50% 100% !important; background-size: min(325px, 100%) auto !important; padding-right: 0 !important; padding-bottom: calc(min(325px, 100%) * 0.6492 + 12px) !important; }
#contents.outsourcing #field-section div.contentBody { background-position: 50% 100% !important; background-size: min(730px, 100%) auto !important; padding-right: 0 !important; padding-bottom: calc(min(730px, 100%) * 0.4370 + 12px) !important; }
#contents.companyoverview #mission-section { background-position: 50% 100% !important; background-size: min(780px, 100%) auto !important; padding-right: 0 !important; padding-bottom: 32% !important; }
#contents.dispatch #dispatch-section dl { background-position: 50% 100% !important; background-size: min(325px, 100%) auto !important; padding-right: 0 !important; padding-bottom: calc(min(325px, 100%) * 0.5538 + 12px) !important; }
#contents.dispatch #typemenu-section .contentBody dl#massMedia { background-position: 50% 100% !important; background-size: min(454px, 100%) auto !important; padding-right: 0 !important; padding-bottom: calc(min(454px, 100%) * 0.4317 + 12px) !important; }
#contents.telemarketing #team-section #inbound { background-position: 50% 100% !important; background-size: min(347px, 100%) auto !important; padding-right: 0 !important; padding-bottom: calc(min(347px, 100%) * 0.4496 + 12px) !important; }
#contents.yousetsu #lineup-section div.div_01 { background-position: 50% 100% !important; background-size: min(387px, 100%) auto !important; padding-right: 0 !important; padding-bottom: calc(min(387px, 100%) * 0.7984 + 12px) !important; }
#contents.yousetsu #lineup-section div.div_01 div.div_02 div.div_03_2 { background-position: 50% 100% !important; background-size: min(253px, 100%) auto !important; padding-right: 0 !important; padding-bottom: calc(min(253px, 100%) * 0.7866 + 12px) !important; }
#contents.yousetsu #lineup-section div.div_01 div.div_02 div.div_03_3 { background-position: 50% 100% !important; background-size: min(321px, 100%) auto !important; padding-right: 0 !important; padding-bottom: calc(min(321px, 100%) * 0.4860 + 12px) !important; }
#contents.yousetsu #lineup-section div.div_01_0406 > dl > dd { background-position: 50% 100% !important; background-size: min(476px, 100%) auto !important; padding-right: 0 !important; padding-bottom: calc(min(476px, 100%) * 0.4349 + 12px) !important; }
#contents.yousetsu #lineup-section div.div_01_0406 > dl > dd.oneline { background-position: 50% 100% !important; background-size: min(476px, 100%) auto !important; padding-right: 0 !important; padding-bottom: calc(min(476px, 100%) * 0.4349 + 12px) !important; }
#contents.yousetsu #lineup-section div.div_01_0406 div.div_02 div.div_03_2 dl dd { background-position: 50% 100% !important; background-size: min(443px, 100%) auto !important; padding-right: 0 !important; padding-bottom: calc(min(443px, 100%) * 0.5327 + 12px) !important; }
#contents.yousetsu #lineup-section div.div_01_0406 div.div_02 div.div_03_3 { background-position: 50% 100% !important; background-size: min(572px, 100%) auto !important; padding-right: 0 !important; padding-bottom: calc(min(572px, 100%) * 0.3497 + 12px) !important; }
#contents.yousetsu #lineup-section div.div_01_0406 div.div_02 div.div_03_4 { background-position: 50% 100% !important; background-size: min(305px, 100%) auto !important; padding-right: 0 !important; padding-bottom: calc(min(305px, 100%) * 0.9246 + 12px) !important; }


/* ============================================================
   9. フォーム（お問い合わせ・エントリー）
   iOSで入力時に拡大されないよう16px
   ============================================================ */
#contents input[type=text], #contents input[type=email], #contents input[type=tel], #contents textarea, #contents select { max-width: 100% !important; }
#contents td input[type=text], #contents td input[type=email], #contents td input[type=tel], #contents td textarea { width: 100% !important; }
#contents td input[type=text], #contents td input[type=email], #contents td input[type=tel], #contents td textarea, #contents td select { border: 1px solid #bbb !important; border-radius: 4px; padding: 8px !important; font-size: 16px !important; height: auto !important; box-sizing: border-box; background: #fff; }
#contents td input[type=text][size], #contents td select { width: auto !important; max-width: 100% !important; }


/* ============================================================
   10. ページ別の調整
   ============================================================ */

/* --- ニュースリリース（/news） --- */
#contents article.post h1, #contents article.post time, #contents article.post .contentBody, #contents article.post .contentBody p { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
#contents article.post iframe { max-width: 100% !important; }

/* --- 会社情報（/companyoverview） --- */
#contents.companyoverview #overview-section iframe { width: 100% !important; height: 200px !important; }

/* --- 社員満足の追求（/message）：番号の横に見出し --- */
#contents.message #eightItems-section th { display: flex !important; align-items: center; justify-content: flex-start; min-height: 84px; padding: 0 8px 0 64px !important; text-align: left !important; font-size: 22px !important; line-height: 1.3 !important; }
#contents.message #eightItems-section td { padding: 4px 4px 16px !important; }

/* --- 企業様のご担当者様へ（/servicelineup） --- */
#contents.servicelineup #lineup-section ul li { padding-left: 28px !important; background-position: 6px 50% !important; }
#contents.servicelineup #lineup-section ul li dt a { height: auto !important; padding: 10px 12px !important; }
#contents.servicelineup #lineup-section ul li dt a strong { font-size: 20px !important; line-height: 1.3 !important; }

/* --- 企業様の声（/usersvoice）：見出しは画像（210px幅） --- */
#contents.usersvoice #usersvoice-section th { width: 210px !important; height: 108px !important; padding: 0 !important; margin: 8px 0 0 !important; background-position: 0 0 !important; background-size: 210px auto !important; }
#contents.usersvoice #usersvoice-section tr:nth-child(4) th { height: 144px !important; }
#contents.usersvoice #usersvoice-section tr:nth-child(5) th { height: 126px !important; }
#contents.usersvoice #usersvoice-section td { padding: 4px 8px 16px !important; }

/* --- アウトソーシング / 派遣（PCの左右余白） --- */
#contents.outsourcing #outline-section div.contentBody { padding-left: 0 !important; }
#contents.dispatch #typemenu-section .contentBody dl#massMedia { padding-right: 0 !important; }

/* --- 技能センター（/yousetsu） --- */
#contents.yousetsu dd ol li { min-height: 34px !important; margin-bottom: 8px !important; }
#contents.yousetsu #lineup-section div { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
#contents.yousetsu #lineup-section img { display: block; float: none !important; position: static !important; margin: 0 auto 8px !important; }

/* --- サイトマップ（/sitemap）：リンクバナーは元のサイズ（幅×50px）
       画像は上半分カラー／下半分グレーの2段なので、縮小しない --- */
body #contents.sitemap #linksite-section dl dd a { float: none !important; display: inline-block !important; aspect-ratio: auto !important; height: 50px !important; max-width: 100% !important; background-size: auto !important; background-position: 0 0 !important; margin: 0 10px 10px 0 !important; vertical-align: middle; }
body #contents.sitemap #linksite-section dl dd a#link02 { width: 109px !important; }
body #contents.sitemap #linksite-section dl dd a#link03 { width: 119px !important; }
body #contents.sitemap #linksite-section dl dd a#link04 { width: 107px !important; }
body #contents.sitemap #linksite-section dl dd a#link05 { width: 134px !important; }
body #contents.sitemap #linksite-section dl dd a#link06 { width: 267px !important; }
body #contents.sitemap #linksite-section dl dd a#link07 { width: 138px !important; }
body #contents.sitemap #linksite-section dl dd a#link08 { width: 213px !important; }
body #contents.sitemap #linksite-section dl dd a#link09 { width: 145px !important; }
body #contents.sitemap #linksite-section dl dd a#link10 { width: 145px !important; }
body #contents.sitemap #linksite-section dl dd a#link11 { width: 127px !important; }
body #contents.sitemap #linksite-section dl dd a#link12 { width: 120px !important; }
body #contents.sitemap #linksite-section dl dd a#link13 { width: 210px !important; }
body #contents.sitemap #linksite-section dl dd a#link14 { width: 261px !important; }
body #contents.sitemap #linksite-section dl dd a#link15 { width: 210px !important; }
body #contents.sitemap #linksite-section dl dd a#link16 { width: 210px !important; }
body #contents.sitemap #linksite-section dl dd a#link17 { width: 79px !important; }
body #contents.sitemap #linksite-section dl dd a#link19 { width: 250px !important; }
body #contents.sitemap #linksite-section dl dd a#link20 { width: 97px !important; }


/* ============================================================
   11. トップページ（home-2018.php）
   ============================================================ */
.page-template-home-2018 .block, .page-template-home-2018 #subHeader h1 { width: auto !important; }
.page-template-home-2018 #subHeader { height: auto !important; }
.page-template-home-2018 #subHeader h1 { height: auto !important; padding: 8px 12px !important; }

/* メイン画像（1920×480の中央部分を表示） */
.page-template-home-2018 section.hero { height: auto !important; background-size: 200% auto !important; background-position: 50% 0 !important; }
.page-template-home-2018 section.hero .block { height: 50vw !important; }

/* NEWS・動画などのパネル：縦1列 */
.page-template-home-2018 section.content, .page-template-home-2018 section.content .block, .page-template-home-2018 .panel-layout, .page-template-home-2018 .panel-grid { height: auto !important; }
.page-template-home-2018 section.content .block { padding: 0 12px !important; }
.page-template-home-2018 #rowset { flex-direction: column !important; height: auto !important; }
.page-template-home-2018 #rowset > .panel-grid-cell { width: 100% !important; margin: 0 0 16px !important; }
.page-template-home-2018 .cat-post-item { width: auto !important; }
.page-template-home-2018 #pgc-10592-0-1 { display: none !important; }                     /* 空の「お仕事情報」 */
.page-template-home-2018 #pgc-10592-0-3 .so-panel:first-child { display: none !important; } /* QRコード */

/* グループ会社バナー：中央1列 */
.page-template-home-2018 #globalHeader ul#bannerContainer { height: auto !important; overflow: hidden; padding: 12px !important; }
body.page-template-home-2018 header#globalHeader ul#bannerContainer li { float: none !important; width: 100% !important; height: auto !important; text-align: center; margin: 0 0 8px !important; background: none !important; }
body.page-template-home-2018 header#globalHeader ul#bannerContainer li img { width: auto !important; max-width: 280px !important; height: auto !important; }

/* 下部メニュー：2列 */
.page-template-home-2018 #globalHeader nav, .page-template-home-2018 #globalHeader ul#menu-header { width: auto !important; height: auto !important; }
.page-template-home-2018 #globalHeader ul#menu-header > li { width: 50% !important; }

/* Entryボタン：右下に追従 */
.page-template-home-2018 #globalHeader ul#menu-header > li#menu-item-45 { position: fixed !important; top: auto !important; left: auto !important; right: 8px !important; bottom: 8px !important; width: 114px !important; height: 114px !important; z-index: 1000; transform: scale(0.74); transform-origin: right bottom; }

/* フッター：中央揃え */
.page-template-home-2018 #globalFooter { text-align: center; }
.page-template-home-2018 #globalFooter * { float: none !important; border: 0 !important; }
body.page-template-home-2018 footer#globalFooter ul#menu-footer { text-align: center !important; }
body.page-template-home-2018 footer#globalFooter ul#menu-footer > li:first-child { display: block !important; margin: 0 0 8px !important; }

} /* @media end */