@charset "utf-8";
/* 2026-10-31 求人ページ（PC）の見た目の調整。origin.css（旧のまま）の後に読み込む。 */

/* 上のタブ（デリヘル・ホテル・電子書籍）：左から4%の位置で本文の外にはみ出していたので、デリヘル版と同じく本文（幅960px）の左端にそろえる */
nav#outside { left: max(0px, calc(50% - 480px)) !important; }

/* 左の「求人検索！」の箱と右の「更新情報」の箱の上端をそろえる（左が12px下がっていた） */
#left > #top_search_form { margin-top: -12px !important; }

/* 求人情報の項目名（公式HP・応募資格・職種など）の赤いラベル：余白がなく窮屈だったので、上下左右に余白を取り、行の間もあける */
.job_container dl dt { width: 64px !important; height: auto !important; padding: 3px 4px !important; margin: 3px 8px 3px 0 !important; border-radius: 3px; text-align: center; line-height: 1.4 !important; box-sizing: border-box; }
.job_container dl dd { margin: 0 0 0 72px !important; padding: 3px 0 !important; line-height: 1.4 !important; }

/* ボタンの統一：水色の「詳しくはコチラ」と、枠で囲んだ「最新のクチコミ情報一覧を見る」を、サイト全体と同じピンクの丸いボタンに */
.job_container .more a { display: block !important; height: auto !important; padding: 9px 0 !important; border: 0 !important; border-radius: 20px !important; background: linear-gradient(#ff8ab5 0%, #ff4f8b 100%) !important; color: #fff !important; font-weight: bold; font-size: 14px !important; text-align: center; text-decoration: none !important; text-shadow: none !important; box-shadow: 0 2px 6px rgba(255, 79, 139, .3); }
.job_container .more a:hover { opacity: .85; }
/* 一覧へのボタンは箱の枠の内側（右から16px）、タイトル（高さ40px）の縦の中央に置く */
#voice_container > div:has(> a[href*="kuchikomi.html"]), #blog_container > div:has(> a[href*="recruit/blog.html"]) { border: 0 !important; padding: 0 !important; width: auto !important; margin: 18px 16px 0 0 !important; }
#voice_container a[href*="kuchikomi.html"] { display: inline-block; padding: 5px 16px; border-radius: 16px; background: linear-gradient(#ff8ab5 0%, #ff4f8b 100%); color: #fff !important; font-weight: bold; font-size: 12px; text-decoration: none !important; box-shadow: 0 2px 6px rgba(255, 79, 139, .3); }

/* 「最新の店長ブログ一覧を見る」もクチコミと同じピンクの丸いボタンに */
#blog_container a[href*="recruit/blog.html"] { display: inline-block; padding: 5px 16px; border-radius: 16px; background: linear-gradient(#ff8ab5 0%, #ff4f8b 100%); color: #fff !important; font-weight: bold; font-size: 12px; text-decoration: none !important; box-shadow: 0 2px 6px rgba(255, 79, 139, .3); }

/* 2026-11-01 箱の枠（ユーザー指示：上下の余白をそろえて少し広く、影を弱く。求人の全ページ）
   旧は枠と影を画像（base_*-trans.png）で描いていて、箱ごとに画像の余白と高さが違い、上下の間隔がばらばらで影も濃かった。
   枠は CSS で描き直す（位置と大きさは旧の画像の枠と同じ＝箱の内側5px。中身の配置は変えない）。影は弱く、箱と箱の間は見た目で20pxにそろえる。 */
#top_search_form, .job_container, #voice_container, #blog_container, .kuchikomi_list, #detail_container, #detail_access #site, #detail_access #qr,
#detail_blog, #detail_kuchikomi, #info_side, #pickup_side, #manual_side, #mobile-qr_side, #rnm {
	position: relative; isolation: isolate; background-image: none !important;
}
.job_container > div, #detail_container > div, #pickup_side > div { background-image: none !important; }
#top_search_form::before, .job_container::before, #voice_container::before, #blog_container::before, .kuchikomi_list::before, #detail_container::before,
#detail_access #site::before, #detail_access #qr::before, #detail_blog::before, #detail_kuchikomi::before, #info_side::before, #pickup_side::before,
#manual_side::before, #mobile-qr_side::before, #rnm::before {
	content: ""; position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; z-index: -1;
	border: 1px solid #c4c4c4; border-radius: 10px; background: linear-gradient(#fff 0%, #f7f7f7 60%, #eee 100%);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .10);
}
/* 上下の端の画像（枠の上端・下端）は場所だけ残して見せない */
img[src*="/img/base_680x25_top"], img[src*="/img/base_680x25_bottom"], img[src*="/img/base_270x16"] { visibility: hidden; }
/* モバイルQR は画像の中に枠と影があるので、枠の外（影）を切り取って同じ枠に */
#mobile-qr_side { display: block; }
#mobile-qr_side > img { display: block; clip-path: inset(5px round 10px); }
#mobile-qr_side::before { background: none; z-index: 1; pointer-events: none; }

/* 箱と箱の間：枠は箱の内側5pxなので、箱の間を10pxにすると見た目の間隔が20pxになる */
#left > :is(#top_search_form, .job_container, #voice_container, #blog_container, #detail_container, #detail_blog, #detail_kuchikomi, #detail_access, .kuchikomi_list) + *,
#right :is(#info_side, #pickup_side, #mobile-qr_side, #manual_side) + :is(#info_side, #pickup_side, #mobile-qr_side, #manual_side) { margin-top: 10px !important; }
#detail_kuchikomi { margin-top: 10px; }
.kuchikomi_list { margin-bottom: 10px !important; }

/* 2026-11-01 箱の中の横幅（ユーザー指示：中身の幅をそろえる・罫線を薄く）。
   中身は枠の内側から左右15px（箱の端から20px）にそろえる。見出しも同じ左端に。 */
/* 左の列（幅680px の箱。中身は 640px） */
#top_search_form > h2, .job_container > div > h2, #voice_container > h2, #blog_container > h2 { margin-left: 20px !important; }
#top_search_form > ul:first-of-type > li:first-child { margin-left: 20px !important; }
#top_search_form > ul:first-of-type > li:last-child { margin-left: 10px !important; }
.job_container .campaign > div, .job_container .campaign > p { margin-left: 20px !important; margin-right: 20px !important; width: auto !important; }
.job_container .campaign > div img, .job_container .banner img { display: block; width: 100% !important; height: auto !important; }
.job_container .banner { margin-left: 20px !important; margin-right: 20px !important; width: auto !important; }
.job_container h3.company { margin-left: 20px !important; margin-right: 20px !important; width: auto !important; box-sizing: border-box; }
.job_container .left { margin-left: 20px !important; }
.job_container .right { width: 390px !important; }
#voice_container > ul, #blog_container > ul { margin-left: 20px !important; width: 640px !important; }
#voice_container > ul > li, #blog_container > ul > li { width: auto !important; box-sizing: border-box; }
#voice_container > div:has(> a[href*="kuchikomi.html"]), #blog_container > div:has(> a[href*="recruit/blog.html"]) { margin-right: 20px !important; }
/* 右の列（幅270px の箱。中身は 230px） */
#info_side > h2, #pickup_side > div > h2, #manual_side > h3, #manual_side > h4 { margin-left: 10px !important; }
#info_side > ul { margin-left: 10px !important; width: 230px !important; }
#pickup_side > div > div { margin-left: 10px !important; margin-right: 10px !important; width: auto !important; }
#pickup_side > div > div > img { margin-left: 0 !important; }
#manual_side > ul { margin-left: 10px !important; margin-right: 10px !important; width: auto !important; }
/* 罫線を薄く（枠・区切り線・バナーの線） */
#top_search_form::before, .job_container::before, #voice_container::before, #blog_container::before, .kuchikomi_list::before, #detail_container::before,
#detail_access #site::before, #detail_access #qr::before, #detail_blog::before, #detail_kuchikomi::before, #info_side::before, #pickup_side::before,
#manual_side::before, #mobile-qr_side::before, #rnm::before { border-color: #e0e0e0 !important; }
#voice_container > ul > li, #blog_container > ul > li, #detail_kuchikomi li, #detail_blog li { border-bottom: 1px solid #e8e8e8 !important; }
.job_container .banner { border-color: #e0e0e0 !important; }
/* 中身を幅いっぱいに：クチコミ・店長ブログの各行は 画像｜本文（残りの幅）｜日付 の横並び。ピックアップは画像70px＋説明 */
#voice_container > ul, #blog_container > ul { padding: 0 !important; }
#voice_container > ul > li, #blog_container > ul > li { display: flex !important; align-items: flex-start; }
#voice_container > ul > li > dl, #blog_container > ul > li > div:not(:last-child), #blog_container > ul > li > div:only-of-type { flex: 1 1 auto; width: auto !important; float: none !important; }
#voice_container > ul > li > *, #blog_container > ul > li > * { float: none !important; }
#pickup_side > div > div { display: flex !important; align-items: center; gap: 6px; }
#pickup_side > div > div > img { float: none !important; margin: 5px 0 !important; flex: 0 0 70px; }
#pickup_side > div > div > div { float: none !important; flex: 1 1 auto; width: auto !important; min-width: 0; box-sizing: border-box; }
#pickup_side > div > div > div { border: 0 !important; padding: 0 !important; height: 70px !important; }
#pickup_side > div > div > div img { display: block; width: 100% !important; height: 70px !important; object-fit: cover; border: 0 !important; }
#pickup_side > div > div > img { height: 70px !important; }
/* お仕事マニュアル・業界用語辞典・リンク集：本文にも同じ枠を付け、中身は枠の内側15px（箱の端から20px）に */
#left > article:has(> #cont_manual, > #cont_dictionary, > #link_about) { position: relative; isolation: isolate; padding: 20px 0; }
#left > article:has(> #cont_manual, > #cont_dictionary, > #link_about)::before {
	content: ""; position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; z-index: -1;
	border: 1px solid #e0e0e0; border-radius: 10px; background: linear-gradient(#fff 0%, #f7f7f7 60%, #eee 100%); box-shadow: 0 1px 4px rgba(0, 0, 0, .10);
}
#cont_manual, #cont_dictionary, #link_about { margin-left: 20px !important; margin-right: 20px !important; width: auto !important; }
/* クチコミ・店長ブログの一覧：左の画像を見出しの左端にそろえる */
#voice_container > ul > li > img, #blog_container > ul > li > img { margin-left: 0 !important; }
#voice_container > ul > li, #blog_container > ul > li { padding-left: 0 !important; }

/* 2026-11-01 見出し（ユーザー指示：画像の見出しを HTML と CSS に。英語の小さい表記はなくす）。
   旧の画像と同じ「左にピンクの縦線（#FF0066・幅5px）＋太字の濃いグレー」。用語辞典の見出しは青。 */
#top_search_form > h2, .job_container > div > h2:not(.result), .job_container .campaign h2, #voice_container > h2, #blog_container > h2,
#detail_container > div h3, #detail_access #site > h3, #detail_access #qr > h3, #article > #left > div#detail_blog > h2, #detail_kuchikomi > h2,
#cont_manual > h2, #cont_manual h3, #cont_dictionary > h2, #cont_dictionary h3,
#info_side > h2, #pickup_side > div > h2, #manual_side > h3, #manual_side > h4 {
	background: none !important; text-indent: 0 !important; overflow: visible !important; white-space: normal !important;
	width: auto !important; height: auto !important; box-sizing: border-box;
	border-left: 5px solid #FF0066; padding: 0 0 0 9px !important;
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", Meiryo, sans-serif; font-weight: 800; color: #333;
	font-size: 26px; line-height: 31px; letter-spacing: .02em;
}
/* 旧の画像の高さ（40px）と同じ場所を取る */
#top_search_form > h2 { padding-top: 0 !important; margin-top: 14px !important; margin-bottom: 8px !important; }
.job_container > div > h2:not(.result), .job_container .campaign h2 { margin-top: 9px !important; margin-bottom: 0 !important; }
#voice_container > h2, #blog_container > h2 { margin-top: 13px !important; margin-bottom: 9px !important; }
#detail_container > div h3 { margin-left: 20px !important; margin-top: 4px !important; margin-bottom: 9px !important; }
#detail_access #site > h3, #detail_access #qr > h3 { margin: 15px 0 9px 20px !important; }
#article > #left > div#detail_blog > h2, #detail_kuchikomi > h2 { margin: 13px 0 9px 20px !important; display: inline-block; }
#cont_manual > h2, #cont_dictionary > h2 { margin: 0 0 20px !important; }
#cont_manual h3, #cont_dictionary h3 { font-size: 22px; line-height: 28px; margin: 24px 0 14px !important; }
#cont_manual h3 img, #cont_dictionary h3 img { display: none; }
#cont_dictionary h3 { border-left-color: #3399FF; }
/* 右の列の見出しは少し小さく */
#info_side > h2, #pickup_side > div > h2, #manual_side > h3, #manual_side > h4 { font-size: 19px; line-height: 26px; margin-top: 4px !important; margin-bottom: 10px !important; }
#manual_side > h4 { margin-top: 14px !important; }
/* 求人検索の項目名（業種・職種など）：画像をやめて文字に */
#top_search_form #type, #top_search_form #category, #top_search_form #area, #top_search_form #condition, #top_search_form #concept, #top_search_form #age {
	background: none !important; text-indent: 0 !important; overflow: visible !important; height: auto !important;
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", Meiryo, sans-serif; font-weight: 800; color: #FF0066; font-size: 17px; line-height: 20px;
}
/* 店名の見出し（ピンクの線の画像）も CSS の線に */
#detail_container > div h2, .job_container > div h2.result { background: none !important; border-left: 5px solid #FF0066; padding-left: 10px !important; }
/* クチコミ・店長ブログの一覧：右端の投稿日がスクロールバーに重ならないよう、行の右に余白（スクロールバー分＋少し） */
#voice_container > ul > li, #blog_container > ul > li { padding-right: 20px !important; }

/* 2026-11-01 見出しの位置・大きさをそろえる（ユーザー指示：上下の余白・線の高さをそろえ、太文字に）。
   どの見出しも 枠の上から15px（箱の端から20px）・線の高さ30px・下の中身まで12px。左の列は24px、右の列は20px の太字。 */
#top_search_form, .job_container, #voice_container, #blog_container, #detail_container, #detail_blog, #detail_kuchikomi, #info_side, #pickup_side, #manual_side { display: flow-root; }
#top_search_form > h2, .job_container > div > h2:not(.result), .job_container .campaign h2, #voice_container > h2, #blog_container > h2,
#detail_container > div h3, #detail_access #site > h3, #detail_access #qr > h3, #article > #left > div#detail_blog > h2, #detail_kuchikomi > h2,
#cont_manual > h2, #cont_manual h3, #cont_dictionary > h2, #cont_dictionary h3,
#info_side > h2, #pickup_side > div > h2, #manual_side > h3, #manual_side > h4 {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "メイリオ", Meiryo, sans-serif !important;
	font-weight: 900 !important; line-height: 30px !important; font-size: 24px !important; margin-bottom: 12px !important;
}
#info_side > h2, #pickup_side > div > h2, #manual_side > h3, #manual_side > h4 { font-size: 20px !important; }
#cont_manual h3, #cont_dictionary h3 { font-size: 20px !important; }
/* 枠の上から15px：箱の上端からの距離（上端に高さ25px・16pxの飾りがある箱はその分を引く） */
#top_search_form > h2 { margin-top: 20px !important; }
.job_container > div > h2:not(.result), .job_container .campaign h2 { margin-top: -5px !important; }
#voice_container > h2, #blog_container > h2 { margin-top: 20px !important; }
#info_side > h2 { margin-top: 10px !important; }
#pickup_side > div > h2 { margin-top: -4px !important; padding-top: 0 !important; }
#manual_side > h3 { margin-top: 10px !important; }
#manual_side > h4 { margin-top: 24px !important; }
/* 求人詳細：店名の見出しも枠の上から15px・左15px・線の高さ30px。途中の「求人詳細情報」は前の中身から24pxあける */
#detail_access #site, #detail_access #qr { display: flow-root; }
#detail_container > div h2 { margin: -5px 20px 12px 20px !important; line-height: 30px !important; width: auto !important; }
#detail_container > div h3 { margin-top: 24px !important; }
#detail_access #site > h3, #detail_access #qr > h3 { margin-top: 20px !important; }
#article > #left > div#detail_blog > h2, #detail_kuchikomi > h2 { margin-top: 20px !important; }
/* お仕事マニュアル・用語辞典・リンク集：最初の見出しを枠の上から15pxに */
#cont_manual, #cont_dictionary, #link_about { margin-top: 0 !important; padding-top: 0 !important; }
#cont_manual > h2, #cont_dictionary > h2 { margin-top: 0 !important; }
/* 見出しの縦線を太く（5px → 8px。ユーザー指示） */
#top_search_form > h2, .job_container > div > h2:not(.result), .job_container .campaign h2, #voice_container > h2, #blog_container > h2,
#detail_container > div h3, #detail_access #site > h3, #detail_access #qr > h3, #article > #left > div#detail_blog > h2, #detail_kuchikomi > h2,
#cont_manual > h2, #cont_manual h3, #cont_dictionary > h2, #cont_dictionary h3,
#info_side > h2, #pickup_side > div > h2, #manual_side > h3, #manual_side > h4,
#detail_container > div h2, .job_container > div h2.result { border-left-width: 8px !important; padding-left: 10px !important; }
/* 店長ブログの各行：アバターと吹き出しを横並びに（吹き出しは残りの幅） */
#blog_container > ul > li > div { display: flex !important; align-items: flex-start; min-width: 0; }
#blog_container > ul > li > div > img { float: none !important; flex: 0 0 auto; }
#blog_container > ul > li > div > dl { float: none !important; flex: 1 1 auto; width: auto !important; min-width: 0; }
/* 求人の基本情報（公式HP・応募資格など）と店舗PR：左を広げ（300px）、各項目は1行に（長いURLは…で省略）。間は20px */
.job_container .left { width: 300px !important; }
.job_container .right { width: 320px !important; margin-left: 20px !important; }
.job_container .left dl dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 店舗PR：本文と「詳しくはコチラ」は右の列の幅に収め、本文とボタンの間を12pxあける */
.job_container .right dl dd { float: none !important; clear: both; width: auto !important; margin: 6px 0 0 0 !important; padding-right: 6px !important; }
.job_container .right .more { display: flow-root; height: auto !important; }
.job_container .right .more a { float: none !important; width: auto !important; margin-top: 12px !important; }
/* 店長ブログの吹き出し：画像の吹き出しが切れないよう元の幅（350px）のまま。行の右の余白は14pxに */
#blog_container > ul > li { padding-right: 14px !important; }
#blog_container > ul > li > div > dl { flex: 0 0 auto !important; width: 350px !important; }
/* 基本情報の項目名は毎回新しい行から（1行省略にしたら項目が右へずれていった） */
.job_container .left dl dt { clear: left; }
/* 右の列「お仕事マニュアル・業界用語辞典」：中身に合わせて箱の高さを伸ばし（はみ出していた）、文字を大きく */
#manual_side { height: auto !important; padding-bottom: 20px !important; }
#manual_side ul li, #manual_side ul li a { font-size: 14px !important; line-height: 1.9 !important; }
#manual_side ul li { margin-left: 0 !important; padding-left: 0 !important; } /* リンクの左端を見出しの左端（線の左）にそろえる */
/* 左の「求人検索！」と右の「更新情報」の箱の上端をそろえる（箱の中の余白をそろえたので、旧の -12px の調整はいらなくなった） */
#left > #top_search_form { margin-top: 0 !important; }
/* 更新情報：一覧（スクロール）が箱の下からはみ出していたので、箱の高さを中身に合わせる */
#info_side { height: auto !important; padding-bottom: 20px !important; }
#info_side > ul { height: 220px !important; }
#top_search_form { height: auto !important; padding-bottom: 20px !important; } /* 求人検索：下の余白も上と同じく枠から15px（高さは中身に合わせる） */
/* モバイルQR：見出しと文字を HTML に（ほかの見出しと同じ形）。QRコードと携帯の絵は画像 */
#mobile-qr_side { height: auto !important; padding: 0 0 20px !important; text-decoration: none !important; color: inherit; }
#mobile-qr_side::before { background: linear-gradient(#fff 0%, #f7f7f7 60%, #eee 100%) !important; z-index: -1 !important; }
#mobile-qr_side > img { clip-path: none !important; margin: 0 auto; display: block; width: 230px; height: auto; }
#mobile-qr_side > h2 {
	margin: 20px 20px 12px !important; border-left: 8px solid #FF0066; padding: 0 0 0 10px; background: none;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "メイリオ", Meiryo, sans-serif; font-weight: 900; color: #333; font-size: 20px; line-height: 30px;
}
#mobile-qr_side > .mqr-lead { margin: 0 20px 10px; color: #FC4660; font-weight: bold; font-size: 15px; line-height: 1.5; }
/* 求人の一件分：要素の間は「下の余白」でそろえる（上には付けない）。
   バナー → 店名 → 基本情報・店舗PR → ボタン の順に、それぞれ下に12px */
.job_container .banner, .job_container .campaign > div { margin-top: 0 !important; margin-bottom: 12px !important; }
.job_container h3.company { margin-top: 0 !important; margin-bottom: 12px !important; }
.job_container .left dl, .job_container .right dl { margin-top: 0 !important; }
/* 基本情報は「項目名｜内容」の2列の表に（内容が空の項目があっても行がずれない） */
.job_container .left dl { display: grid !important; grid-template-columns: 64px minmax(0, 1fr); column-gap: 8px; row-gap: 6px; margin-bottom: 12px !important; }
.job_container .left dl dt, .job_container .left dl dd { float: none !important; clear: none !important; margin: 0 !important; width: auto !important; }
.job_container .left dl dd { align-self: center; min-height: 1em; padding: 0 !important; }
.job_container .right dl dd { margin-bottom: 0 !important; }
/* 枠の上下の飾り画像（見えないまま場所を取っていた）をなくし、枠の中の上下の余白を CSS で15pxに */
img[src*="/img/base_680x25_top"], img[src*="/img/base_680x25_bottom"], img[src*="/img/base_270x16"] { display: none !important; }
.job_container, #detail_container, #pickup_side { padding-bottom: 20px !important; }
.job_container > div > h2:not(.result), .job_container .campaign h2, #detail_container > div h2 { margin-top: 20px !important; }
.job_container > div h2.result { margin-top: 20px !important; margin-bottom: 12px !important; }
#pickup_side > div > h2 { margin-top: 20px !important; }
.job_container .right .more a { margin-bottom: 0 !important; }
/* モバイルQR：見出しが枠の上に出ないよう（余白の打ち消し合いを止める）。QRと携帯の絵は背景を透明にした画像 */
#mobile-qr_side { display: flow-root !important; }
#mobile-qr_side > img { width: auto !important; max-width: 230px; }
/* ピックアップ求人の下の余白も15pxに。注目の求人の一覧（複数件）の間も20pxに */
#pickup_side { padding-bottom: 13px !important; }
.job_container + .job_container { margin-top: 10px !important; }
/* 店名の見出し（注目の求人・新着求人・求人詳細）も、ほかの見出しと同じ書体・線の高さ30px・下12px（色は旧のままピンク） */
.job_container > div h2.result, #detail_container > div h2 {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "メイリオ", Meiryo, sans-serif !important;
	font-weight: 900 !important; font-size: 24px !important; line-height: 30px !important; padding-top: 0 !important; padding-bottom: 0 !important;
	margin-bottom: 12px !important; width: auto !important; margin-right: 20px !important;
}
/* バナー：周りの線をなくし、画像の下にできていた隙間もなくす */
.job_container .banner, .job_container .campaign > div { border: 0 !important; padding: 0 !important; height: auto !important; line-height: 0 !important; background: none !important; }
.job_container .banner a, .job_container .campaign > div a { display: block !important; height: auto !important; line-height: 0; }
.job_container .banner img, .job_container .campaign > div img { display: block !important; border: 0 !important; margin: 0 !important; vertical-align: top; }