@charset "utf-8";

/* =============================================================================
 * rc-fixes.css — 子テーマの最後に読み込むCSS
 *
 * 2026-08-27 作成（開発者依頼 2026-08-25 統合版への対応）
 *
 * 【なぜこのファイルがあるのか】
 *   CSSの読み込み順は header.php に書かれていて、親テーマの
 *   recommendation.css が子テーマの common.css より後に読まれます。
 *   そのため子テーマの common.css に書いた指定は、同じ詳細度では
 *   親テーマに負けます（依頼書 §0-2）。
 *   このファイルは recommendation.css より後に読み込むので、
 *   親テーマのCSSを上書きしたい指定はここに書いてください。
 *
 * 【!important を使っている箇所について】
 *   親テーマの reset.css に `div { display: block; }` があり、
 *   HTMLの hidden 属性やクラスによる非表示が効きません。
 *   要素を確実に消したいところだけ !important を付けています。
 * ========================================================================== */


/* -----------------------------------------------------------------------------
 * 1. 求人カード（開発者依頼 A6・B1〜B6）
 *
 *    未確認の条件は、テンプレート側（template-parts/archive/list.php）で
 *    そもそも出力しない作りに変えました。以下は
 *      ・トップの「注目のお店」など、別のテンプレートから出た場合
 *      ・キャッシュが残っている間
 *    のための保険です。石井さんが「追加CSS」に入れていた暫定指定と同じ内容なので、
 *    このファイルが本番に入ったら、追加CSSのほうは削除してください。
 * -------------------------------------------------------------------------- */

.job-card__facts .is-unknown{
	display: none !important;
}
/* 表示できる項目が1つも無いときは、枠ごと消す */
.job-card__facts:not(:has(> div:not(.is-unknown))){
	display: none !important;
}
.job-card__salary.is-unknown{
	display: none !important;
}

/* ---------- 業態と勤務地（店名の上） ----------
 *
 * ⚠ 親テーマ recommendation.css に
 *     .recommendation__card > a > div div:nth-of-type(1){ display:flex; ... }
 *   という指定があり、カードの中の「最初の div」すべてに効きます。
 *   詳細度が (0,2,3) と高いため、`.job-card__location` だけでは勝てません。
 *   ここではカードの3つのクラスのうち2つを重ねて (0,3,2) 以上にしています。
 *   （2026-08-27 実測：これをやらないとラベルと値が横に並んだままでした）
 */
.recommendation__card.job-card > a > div .job-card__location{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	flex-wrap: wrap;
	row-gap: 4px;
	margin-bottom: 6px;
}
.job-card__location{
	flex-wrap: wrap;
	margin-bottom: 6px;
	row-gap: 4px;
}
.job-card__location p{
	font-family: "NotoSansJP", sans-serif;
	font-size: 12px;
	line-height: 1.4;
	color: #7a6a4a;
}
.job-card__category{
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid #E3D6B6;
	border-radius: 999px;
	background: #FBF6EA;
	font-family: "NotoSansJP", sans-serif;
	font-size: 11px;
	line-height: 1.5;
	color: #6b5c3c;
	white-space: nowrap;
}

/* ---------- 条件（ラベルと値を縦に積む） ----------
 * 変更前は dt と dd が横並びで、その間隔（6px）が隣の項目との間隔より
 * 狭く見え、「要確認　住まい」がひとつづきに読めていました（依頼書 B6）。
 * ラベルを上、値を下に積み、左端をそろえます。
 */
.job-card__facts{
	gap: 10px 12px;
}
/* 親テーマの div:nth-of-type(1) に負けないよう、詳細度をそろえます（上の注意書き参照） */
.recommendation__card.job-card > a > div .job-card__facts > div,
.job-card__facts > div{
	display: block;
}
.job-card__facts dt{
	display: block;
	font-size: 11px;
	line-height: 1.4;
	color: #8a8071;
}
.job-card__facts dd{
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.5;
}

/* ---------- まだ確認できていない項目（依頼書 B3） ----------
 * 「要確認」とは書きません。求職者が自分で確かめる作業に読めるためです。
 */
.job-card__pending{
	margin-top: 8px;
	font-family: "NotoSansJP", sans-serif;
	font-size: 11px;
	line-height: 1.6;
	color: #8a8071;
}

/* ---------- 一覧の見出し（依頼書 G5） ---------- */
.job-results__heading{
	margin: 0 0 12px;
	font-family: "NotoSansJP", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: #6b5c3c;
}


/* -----------------------------------------------------------------------------
 * 2. 絞り込みの件数表示（開発者依頼 E1・E2）
 * -------------------------------------------------------------------------- */

.tag__check--count{
	display: inline-block;
	margin-left: 6px;
	font-family: "NotoSansJP", sans-serif;
	font-size: 11px;
	font-style: normal;
	color: #8a8071;
}
/* 0件の条件は選べないことが分かるようにする */
.tag__check.is-empty{
	cursor: default;
	color: #b1a893;
}
.tag__check.is-empty .tag__check--count{
	color: #b1a893;
}
.tag__check.is-empty input{
	cursor: default;
}


/* -----------------------------------------------------------------------------
 * 3. タップ領域（開発者依頼 G2・G3）
 *
 *    指で押す部分は 44×44px 以上にします。
 * -------------------------------------------------------------------------- */

/* ---------- ハンバーガーメニュー ----------
 * 見た目（20×14px の三本線）は変えずに、当たり判定だけ 44×44px に広げます。
 * 要素そのものを大きくすると、隣の「LINEで無料相談」ボタンとの間隔や
 * ヘッダー全体の配置が動くためです。
 * 左隣のボタンとの間隔は 16px あるので、12px はみ出しても重なりません。
 */
@media only screen and (max-width: 1024px){
	.header__inner--menu--hamburger::before{
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
	}
}

/* ---------- 一覧のキープボタン ---------- */
.rc-keep-btn--icon{
	min-height: 44px;
	padding: 0 14px;
}
.keep-card__remove{
	min-height: 44px;
}


/* -----------------------------------------------------------------------------
 * 4. サイト内検索フォーム（開発者依頼 F3）
 *
 *    180ページで検索フォームが0個でした。?s= は動くのに入力欄がどこにも
 *    無い状態だったため、フッターに1つ置いています。
 * -------------------------------------------------------------------------- */

.footer__search{
	margin: 0 0 24px;
}
.footer__search--label{
	display: block;
	margin-bottom: 8px;
	font-family: "NotoSansJP", sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: #E6CE96;
}
.footer__search--form{
	display: flex;
	gap: 8px;
	max-width: 420px;
}
.footer__search--form input[type="search"]{
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid #5c5340;
	border-radius: 4px;
	background: #fff;
	font-family: "NotoSansJP", sans-serif;
	font-size: 16px; /* 16px 未満だと iOS で入力時に拡大されます */
	color: #333;
}
.footer__search--form button{
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 4px;
	background: #E6CE96;
	color: #2D220C;
	font-family: "NotoSansJP", sans-serif;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}
.footer__search--form button:hover{
	opacity: .85;
}


/* -----------------------------------------------------------------------------
 * 5. 記事下のモジュール（開発者依頼 F1・F6）
 * -------------------------------------------------------------------------- */

.rc-article-related{
	margin: 40px 0 0;
	padding: 24px 20px;
	border: 1px solid #EADFC4;
	border-radius: 4px;
	background: #FBF6EA;
}
.rc-article-related + .rc-article-related{
	margin-top: 20px;
}
.rc-article-related__title{
	margin: 0 0 4px;
	font-family: "NotoSansJP", sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	color: #2D220C;
}
.rc-article-related__note{
	margin: 0 0 14px;
	font-family: "NotoSansJP", sans-serif;
	font-size: 12px;
	line-height: 1.7;
	color: #7a6a4a;
}
.rc-article-related__list{
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}
.rc-article-related__list li{
	margin: 0;
	padding: 0;
	list-style: none;
}
.rc-article-related__list a{
	display: block;
	min-height: 44px;
	padding: 11px 14px;
	border: 1px solid #EADFC4;
	border-radius: 4px;
	background: #fff;
	font-family: "NotoSansJP", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #2D220C;
	text-decoration: none;
}
.rc-article-related__list a:hover{
	border-color: #8A6D2F;
	color: #8A6D2F;
}
.rc-article-related__list span{
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: #7a6a4a;
}


/* -----------------------------------------------------------------------------
 * 6. 求人詳細の固定CTAバー（開発者依頼 F5）
 *
 *    一覧には既にあり、縦に長い詳細ページには無い状態でした。
 *    PCでは邪魔になるので、スマートフォンだけに出します。
 * -------------------------------------------------------------------------- */

/* 一覧の固定バーの見た目は archive.css にありますが、あのファイルは
   一覧ページでしか読み込まれません。詳細ページ用にここで指定します。 */
.rc-shop-detail .job-sticky{
	display: none;
}
@media only screen and (max-width: 1024px){
	.rc-shop-detail .job-sticky{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1001;
		display: flex;
		gap: 8px;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
		background: rgba(255,255,255,.96);
		border-top: 1px solid #EADFC4;
	}
	.rc-shop-detail .job-sticky__line{
		flex: 1 1 60%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		border-radius: 4px;
		background: #06C755;
		color: #fff;
		font-family: "NotoSansJP", sans-serif;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.2;
		text-decoration: none;
	}
	.rc-shop-detail .job-sticky__line small{
		font-size: 10px;
		font-weight: 400;
	}
	.rc-shop-detail .job-sticky__keep{
		flex: 1 1 40%;
		display: flex;
	}
	.rc-shop-detail .job-sticky__keep .rc-keep-btn{
		width: 100%;
		min-height: 48px;
		box-shadow: none;
	}
	/* 固定バーの高さぶん、ページ末尾に余白を足す */
	.rc-shop-detail .shop{
		padding-bottom: 96px;
	}
}


/* -----------------------------------------------------------------------------
 * 7. トップページ（開発者依頼 A4・C7）
 * -------------------------------------------------------------------------- */

/* 国別カードの「詳しく見る」はリンクになりました（A4）。
   クリック時の動き（モーダルを開く）は今までどおりです。
   href が付いたことでテーマ既定のリンク色（水色）になってしまうため、
   見た目は今までどおりの文字色に戻します。 */
.country__card .flash[href]{
	color: #2D220C;
	cursor: pointer;
}

/* 「注目のお店」を3件から6件にしたので、2段に折り返します（F4）。
   カードの幅（30.98%）と余白は親テーマの指定のままで、
   .type1__flex3 が flex-wrap: nowrap だったために1行へ押し込まれていました。 */
#venues .type1__flex3{
	flex-wrap: wrap;
	row-gap: 24px;
}

/* 「知っておいてほしいこと」のセクションは、前後の余白を詰めます
   （テーマ既定の .type1 は上下80pxで、間が空きすぎるため） */
#rc-notice{
	padding-top: 0;
	padding-bottom: 56px;
}

/* 「知っておいてほしいこと」（C7） */
.rc-front-notice{
	margin: 0 auto;
	padding: 28px 24px;
	max-width: 900px;
	border: 1px solid #EADFC4;
	border-radius: 4px;
	background: #FBF6EA;
}
.rc-front-notice h2{
	margin: 0 0 10px;
	font-family: "NotoSansJP", sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
	color: #2D220C;
}
.rc-front-notice p{
	margin: 0 0 14px;
	font-family: "NotoSansJP", sans-serif;
	font-size: 14px;
	line-height: 1.9;
	color: #4a4034;
}
.rc-front-notice__links{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.rc-front-notice__links a{
	display: inline-block;
	min-height: 44px;
	padding: 11px 18px;
	border: 1px solid #8A6D2F;
	border-radius: 4px;
	background: #fff;
	font-family: "NotoSansJP", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #6b5c3c;
	text-decoration: none;
}
.rc-front-notice__links a:hover{
	background: #8A6D2F;
	color: #fff;
}