@charset "UTF-8";

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	キープ（お気に入り）と、まとめてLINE相談
	2026-08-21 追加

	このファイルは inc/keep.php が全ページに読み込みます。
	キープ機能をやめるときは functions.php の $rc_includes から
	inc/keep.php を1行外してください（このCSSも読み込まれなくなります）。

	配色はサイト共通のもの（クリーム #FEF8E8 ／ 濃い茶 #2D220C ／
	ゴールド #C3A76C・#E6CE96 ／ 枠 #EADFC4 ／ LINE #06C755）に合わせています。
	数えて出てきた事実はゴシック（NotoSansJP）、サイトが語る文はセリフ体、
	という記事側の使い分けをここでも守っています。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	0. hidden 属性を効かせる

	親テーマの reset.css に `div { display: block; }` があり、
	ブラウザ既定の `[hidden] { display: none; }` を打ち消してしまいます
	（作成者スタイルのほうが強いため）。
	そのため、hidden で出し分けている要素には明示的に指定します。
	2026-08-21 実測：この指定が無いと、キープ0件の案内と一覧が同時に出ました。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.keep-page [hidden],
.rc-keep-fab[hidden]{
	display: none !important;
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	1. キープボタン
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.rc-keep-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border: 1px solid #C3A76C;
	border-radius: 999px;
	background: rgba(255,255,255,.94);
	color: #6b5c3c;
	font-family: "NotoSansJP", sans-serif;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.rc-keep-btn:hover{
	background: #fff;
	border-color: #2D220C;
	color: #2D220C;
}
.rc-keep-btn:focus-visible{
	outline: 2px solid #2D220C;
	outline-offset: 2px;
}

/* ハートは疑似要素で描きます（画像を足さずに済ませるため） */
.rc-keep-btn__icon::before{
	content: "\2661";           /* 白ぬきハート */
	font-size: 1.15em;
	line-height: 1;
}
.rc-keep-btn.is-kept .rc-keep-btn__icon::before{
	content: "\2665";           /* 塗りつぶしハート */
}

/* キープ中 */
.rc-keep-btn.is-kept{
	background: #2D220C;
	border-color: #2D220C;
	color: #E6CE96;
}
.rc-keep-btn.is-kept:hover{
	background: #3d2f11;
	color: #E6CE96;
}

/* カード用（小さい） */
.rc-keep-btn--icon{
	min-height: 34px;
	padding: 0 12px;
	font-size: 12px;
	box-shadow: 0 1px 4px rgba(45,34,12,.16);
}

/* 求人詳細ページ用（横に広い）。
   すぐ下に並ぶ「LINEで確認する」ボタンと角の形をそろえます。 */
.rc-keep-btn--wide{
	width: 100%;
	min-height: 52px;
	padding: 0 20px;
	border-radius: 4px;
	font-size: 15px;
	gap: 8px;
}

/* 上限に達したときなどの注意書き */
.rc-keep-btn__message{
	display: block;
	margin-top: 6px;
	padding: 5px 8px;
	border-radius: 3px;
	background: rgba(255,255,255,.96);
	box-shadow: 0 1px 4px rgba(45,34,12,.16);
	font-family: "NotoSansJP", sans-serif;
	font-size: 11px;
	line-height: 1.6;
	color: #a3502f;
	text-align: left;
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	2. 一覧カードの中での置き場所

	カードは全体が <a> のため、ボタンはリンクの外（カード直下）に置き、
	絶対配置で右上に重ねています。左上は掲載情報の確度バッジの場所です。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.recommendation__card.rc-has-keep{
	position: relative;
}
.rc-keep-slot{
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	max-width: 70%;
	text-align: right;
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	3. ヘッダーのキープリンク
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.rc-keep-nav__count{
	display: none;
	margin-left: 5px;
	min-width: 19px;
	padding: 2px 6px;
	border-radius: 999px;
	background: #2D220C;
	color: #E6CE96;
	font-family: "NotoSansJP", sans-serif;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	vertical-align: 1px;
}
.rc-keep-nav.has-keep .rc-keep-nav__count{
	display: inline-block;
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	4. フローティングボタン

	1件以上キープしているときだけ JavaScript が表示します。
	求人一覧のスマートフォン表示では画面下に固定バー（.job-sticky）が
	あるため、その上に重ならない位置へずらしています。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.rc-keep-fab{
	position: fixed;
	right: 20px;
	bottom: 24px;
	z-index: 1000;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 20px;
	border-radius: 999px;
	background: #2D220C;
	color: #E6CE96;
	font-family: "NotoSansJP", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(45,34,12,.28);
}
.rc-keep-fab[hidden]{
	display: none;
}
.rc-keep-fab:hover{
	background: #3d2f11;
	color: #fff;
}
.rc-keep-fab__count{
	min-width: 22px;
	padding: 3px 7px;
	border-radius: 999px;
	background: #E6CE96;
	color: #2D220C;
	font-size: 12px;
	text-align: center;
}

@media only screen and (max-width: 1024px) {
	.rc-keep-fab{
		right: 14px;
		bottom: 18px;
		padding: 11px 16px;
		font-size: 13px;
	}
	/* 求人一覧の固定バー（絞り込み／LINEで相談）に重ねない */
	body.rc-shop-archive .rc-keep-fab{
		bottom: 78px;
	}
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	5. キープ一覧ページ（/keep/）
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.keep-hero{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 260px;
	padding: 44px 20px 0;
	background: linear-gradient(160deg, #2D220C 0%, #4a3a15 100%);
	text-align: center;
}
.keep-hero h1{
	color: #fff;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.03em;
}
.keep-hero p{
	margin-top: 14px;
	color: #E6CE96;
	font-family: "NotoSansJP", sans-serif;
	font-size: 14px;
	line-height: 1.8;
}

.keep-body{
	background: #FEF8E8;
	padding: 0 20px 64px;
}
.keep-body__inner{
	max-width: 900px;
	margin: 0 auto;
}

/* ---------- 件数バー ---------- */
.keep-count{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px 18px;
	background: #fff;
	border: 1px solid #EADFC4;
	border-radius: 4px;
}
.keep-count p{
	font-family: "NotoSansJP", sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #6b5c3c;
}
.keep-count strong{
	font-size: 20px;
	color: #2D220C;
}
.keep-count__max{
	margin-left: 4px;
	font-size: 11px;
	color: #8a8071;
}
.keep-count__clear{
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid #C3A76C;
	border-radius: 4px;
	background: #fff;
	color: #6b5c3c;
	font-family: "NotoSansJP", sans-serif;
	font-size: 12px;
	cursor: pointer;
}
.keep-count__clear:hover{
	border-color: #2D220C;
	color: #2D220C;
}
/* 1回押したあと（もう一度押すと実行） */
.keep-count__clear.is-armed{
	border-color: #a3502f;
	background: #FDF2E4;
	color: #a3502f;
	font-weight: 700;
}

/* ---------- キープした求人カード ---------- */
.keep-list{
	margin-top: 20px;
}
.keep-card{
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px;
	margin-bottom: 14px;
	background: #fff;
	border: 1px solid #EADFC4;
	border-radius: 4px;
}
.keep-card.is-closed{
	opacity: .72;
}
.keep-card__link{
	position: relative;
	flex: 0 0 132px;
	display: block;
}
.keep-card__thumb{
	width: 132px;
	height: 132px;
	object-fit: cover;
	border-radius: 3px;
	display: block;
}
.keep-card .shop-badge{
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	padding: 4px 9px;
	border-radius: 2px;
	font-family: "NotoSansJP", sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.5;
	white-space: nowrap;
}
.keep-card .shop-badge--official{
	background: #C3A76C;
	color: #fff;
}
.keep-card .shop-badge--visited{
	background: #2D220C;
	color: #E6CE96;
}

.keep-card__body{
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 96px;   /* 「キープを外す」ボタンのぶん */
}
.keep-card__body h3{
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
	color: #2D220C;
}
.keep-card__body h3 a{
	color: inherit;
	text-decoration: none;
}
.keep-card__body h3 a:hover{
	text-decoration: underline;
}
.keep-card__place{
	margin-top: 5px;
	font-family: "NotoSansJP", sans-serif;
	font-size: 12px;
	color: #8a8071;
}
.keep-card__closed{
	margin-top: 8px;
	font-family: "NotoSansJP", sans-serif;
	font-size: 12px;
	font-weight: 700;
	color: #a3502f;
}
.keep-card__salary{
	margin-top: 9px;
	font-family: "NotoSansJP", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	color: #333;
}
.keep-card__salary span{
	display: inline-block;
	margin-right: 6px;
	padding: 1px 6px;
	border-radius: 2px;
	background: #F4EAD2;
	color: #6b5c3c;
	font-size: 11px;
	font-weight: 700;
	vertical-align: 2px;
}
.keep-card__salary.is-unknown{
	color: #8a8071;
	font-weight: 400;
}
.keep-card__facts{
	margin-top: 10px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 240px));
	gap: 4px 14px;
}
.keep-card__facts > div{
	display: flex;
	gap: 6px;
	font-family: "NotoSansJP", sans-serif;
	font-size: 12px;
	line-height: 1.5;
}
.keep-card__facts dt{
	flex: 0 0 auto;
	color: #8a8071;
}
.keep-card__facts dd{
	margin: 0;
	color: #333;
	font-weight: 500;
	word-break: break-word;
}
.keep-card__facts > div.is-unknown dd{
	color: #a49a89;
	font-weight: 400;
}
.keep-card__remove{
	position: absolute;
	top: 16px;
	right: 16px;
	min-height: 34px;
	padding: 0 12px;
	border: 1px solid #EADFC4;
	border-radius: 4px;
	background: #fff;
	color: #8a8071;
	font-family: "NotoSansJP", sans-serif;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
}
.keep-card__remove:hover{
	border-color: #a3502f;
	color: #a3502f;
}

/* ---------- まとめて相談 ---------- */
.keep-consult{
	margin-top: 32px;
	padding: 28px 24px;
	background: #fff;
	border: 1px solid #C3A76C;
	border-radius: 4px;
}
.keep-consult h2{
	font-size: 20px;
	font-weight: 500;
	line-height: 1.6;
	color: #2D220C;
	text-align: center;
}
.keep-consult__lead{
	margin-top: 12px;
	font-family: "NotoSansJP", sans-serif;
	font-size: 13px;
	line-height: 1.9;
	color: #6b5c3c;
	text-align: center;
}
.keep-consult__lead strong{
	color: #2D220C;
	font-weight: 700;
}
.keep-consult__actions{
	margin-top: 20px;
	text-align: center;
}
.keep-consult__line{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	max-width: 440px;
	min-height: 60px;
	padding: 0 24px;
	border-radius: 4px;
	background: #06C755;
	color: #fff;
	font-family: "NotoSansJP", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}
.keep-consult__line:hover{
	background: #05b64d;
	color: #fff;
}
/* 親テーマの reset.css に `img { width: 100%; }` があるため、
   ここで大きさを指定しないとアイコンがボタン全体に広がります
   （2026-08-21 実測）。 */
.keep-consult__line img{
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
}
.keep-consult__status{
	margin-top: 12px;
	min-height: 1.6em;
	font-family: "NotoSansJP", sans-serif;
	font-size: 13px;
	line-height: 1.7;
	color: #2f7d4a;
}
.keep-consult__status.is-error{
	color: #a3502f;
}
.keep-consult__status:empty{
	min-height: 0;
	margin-top: 0;
}

.keep-consult__assurance{
	margin-top: 18px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 10px;
	list-style: none;
	padding: 0;
}
.keep-consult__assurance li{
	padding: 6px 12px;
	background: #FEF8E8;
	border: 1px solid #EADFC4;
	border-radius: 999px;
	font-family: "NotoSansJP", sans-serif;
	font-size: 12px;
	line-height: 1.5;
	color: #6b5c3c;
}

.keep-consult__text{
	margin-top: 22px;
	border-top: 1px solid #EADFC4;
	padding-top: 18px;
}
.keep-consult__text summary{
	font-family: "NotoSansJP", sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: #6b5c3c;
	cursor: pointer;
}
.keep-consult__text--note{
	margin-top: 10px;
	font-family: "NotoSansJP", sans-serif;
	font-size: 12px;
	line-height: 1.8;
	color: #8a8071;
}
.keep-consult__text textarea{
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 14px;
	border: 1px solid #EADFC4;
	border-radius: 4px;
	background: #FEF8E8;
	color: #333;
	font-family: "NotoSansJP", sans-serif;
	font-size: 13px;
	line-height: 1.8;
	resize: vertical;
}
.keep-consult__stale{
	margin-top: 12px;
	padding: 10px 14px;
	background: #FDF2E4;
	border: 1px solid #E0C9A6;
	border-radius: 4px;
	font-family: "NotoSansJP", sans-serif;
	font-size: 12px;
	line-height: 1.8;
	color: #a3502f;
}
.keep-consult__stale[hidden]{
	display: none;
}
.keep-consult__buttons{
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.keep-consult__copy,
.keep-consult__reset{
	min-height: 44px;
	padding: 0 20px;
	border-radius: 4px;
	font-family: "NotoSansJP", sans-serif;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
.keep-consult__copy{
	border: 1px solid #2D220C;
	background: #fff;
	color: #2D220C;
}
.keep-consult__copy:hover{
	background: #2D220C;
	color: #E6CE96;
}
.keep-consult__reset{
	border: 1px solid #EADFC4;
	background: #fff;
	color: #8a8071;
	font-weight: 400;
}
.keep-consult__reset:hover{
	border-color: #C3A76C;
	color: #6b5c3c;
}

/* ---------- 0件・読み込み中 ---------- */
.keep-empty,
.keep-loading{
	padding: 44px 24px;
	background: #fff;
	border: 1px solid #EADFC4;
	border-radius: 4px;
	text-align: center;
	font-family: "NotoSansJP", sans-serif;
	font-size: 14px;
	line-height: 1.9;
	color: #6b5c3c;
}
.keep-empty__lead{
	font-size: 17px;
	font-weight: 700;
	color: #2D220C;
	margin-bottom: 12px;
}
.keep-empty strong{
	color: #2D220C;
	font-weight: 700;
}
.keep-empty__actions{
	margin-top: 22px;
}
.keep-empty__actions a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 28px;
	border-radius: 4px;
	background: #2D220C;
	color: #E6CE96;
	font-weight: 700;
	text-decoration: none;
}
.keep-empty__actions a:hover{
	background: #3d2f11;
	color: #fff;
}
.keep-empty__note{
	margin-top: 22px;
	font-size: 11px;
	line-height: 1.9;
	color: #8a8071;
}

/* ---------- 注記・戻る ---------- */
.keep-note{
	margin-top: 26px;
	font-family: "NotoSansJP", sans-serif;
	font-size: 11px;
	line-height: 1.9;
	color: #8a8071;
}
.keep-back{
	margin-top: 26px;
	text-align: center;
	font-family: "NotoSansJP", sans-serif;
	font-size: 14px;
}
.keep-back a{
	color: #6b5c3c;
	text-decoration: underline;
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	6. スマートフォン
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

@media only screen and (max-width: 1024px) {
	.keep-hero{
		margin-top: 54px;
		height: 180px;
		padding-top: 0;
	}
	.keep-hero h1{
		font-size: 22px;
	}
	.keep-hero p{
		font-size: 13px;
	}
}

@media only screen and (max-width: 768px) {
	.keep-hero{
		height: 160px;
	}
	.keep-hero h1{
		font-size: 19px;
	}

	.keep-card{
		gap: 12px;
		padding: 14px;
		padding-bottom: 58px;      /* 「キープを外す」を下に置くため */
	}
	.keep-card__link{
		flex: 0 0 96px;
	}
	.keep-card__thumb{
		width: 96px;
		height: 96px;
	}
	.keep-card__body{
		padding-right: 0;
	}
	.keep-card__body h3{
		font-size: 15px;
	}
	.keep-card__facts{
		grid-template-columns: 1fr 1fr;
	}
	.keep-card__remove{
		top: auto;
		right: 14px;
		bottom: 14px;
		min-height: 40px;
		padding: 0 16px;
	}

	.keep-consult{
		padding: 24px 16px;
	}
	.keep-consult h2{
		font-size: 17px;
	}
	.keep-consult__line{
		font-size: 15px;
	}

	.keep-empty,
	.keep-loading{
		padding: 32px 18px;
		font-size: 13px;
	}
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	7. 既存ページに差し込んだ部分

	・求人一覧の結果バーの案内文（template-parts/archive/list.php）
	・求人詳細「求人の要点」のキープボタン（template-parts/shop/summary.php）

	どちらも style/page/archive.css・shop.css ではなくこのファイルに置いています。
	キープ機能をやめるとき、消す場所を1か所にまとめるためです。
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* ---------- 求人一覧の案内文 ----------
   .job-results は display:flex / flex-wrap:wrap です。
   order を 4 にして、件数・並び替え・選択中の条件よりも下の行に置きます
   （選択中の条件 .job-results__active は order:3）。 */
.job-results__keep{
	width: 100%;
	order: 4;
	padding-top: 10px;
	border-top: 1px dashed #EADFC4;
	font-family: "NotoSansJP", sans-serif;
	font-size: 12px;
	line-height: 1.8;
	color: #6b5c3c;
}
.job-results__keep strong{
	font-weight: 700;
	color: #2D220C;
}
.job-results__keep a{
	color: #6b5c3c;
	text-decoration: underline;
}

/* ---------- 求人詳細のキープボタン ---------- */
.shop__summary--keep{
	margin-bottom: 12px;
}
.shop__summary--keep-note{
	margin-top: 8px;
	font-family: "NotoSansJP", sans-serif;
	font-size: 12px;
	line-height: 1.8;
	color: #7a6a4a;
	text-align: center;
}
.shop__summary--keep-note a{
	color: #6b5c3c;
	text-decoration: underline;
}