@charset "utf-8";
/*
 *	Cast Alternative Recommend - front.css
 *
 *	すべてのセレクタを .carec_block 配下にスコープしています。
 *	クラス名は Night worker Schedule と重複させていません。
 *	（あちらの front.css は !important で 2カラムグリッドを固定し、
 *	 .attendance に white-space:nowrap を当てているため、クラスを
 *	 共有するとスマートフォンで文字が見切れます）
 *
 *	レイアウトに関わるプロパティには、テーマ側の「追加CSS」で
 *	崩されないよう !important を付けています。
 */

.carec_block,
.carec_block *,
.carec_block *::before,
.carec_block *::after {
	box-sizing: border-box;
}

.carec_block {
	--carec-min: 150px;	/* カードの最小幅（カラム数を決める） */
	--carec-max: 240px;	/* カードの最大幅（広い画面での上限） */
	--carec-n: 3;		/* 実際に表示している枚数（PHPが指定） */
	--carec-cols: 3;	/* columns 固定時のカラム数 */
	--carec-gap: 12px;
	margin: 2.5em 0;
	padding: 1.1em 1em 1em;
	border: 1px solid rgba(0, 0, 0, .09);
	border-radius: 10px;
	background: rgba(0, 0, 0, .015);
	overflow: hidden;
}

/*	見出し（h2/h3は使いません） */
.carec_block .carec_title {
	margin: 0 0 .6em;
	padding: 0 0 .5em;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
	font-size: 1em;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .01em;
	background: none;
	overflow-wrap: break-word;
	word-break: normal;
	line-break: strict;
}

.carec_block .carec_note {
	margin: -.2em 0 .9em;
	font-size: .82em;
	line-height: 1.7;
	opacity: .75;
	overflow-wrap: break-word;
}

/* =====================================================================
	グリッド
	既定は auto-fit。カード幅が --carec-min を下回らないように
	自動で 1 → 2 → 3 カラムへ切り替わります。
   ===================================================================== */

.carec_block ul.carec_cards {
	display: grid !important;
	/*	カラム数は --carec-min（最小幅）で決まります。
		max 側を固定長にするとブラウザがカラム数を max 基準で数えてしまい、
		狭い画面で1カラムに落ちてしまうため、必ず 1fr を使います。 */
	grid-template-columns: repeat(auto-fit, minmax(var(--carec-min), 1fr)) !important;
	/*	カードが広がりすぎないよう、グリッド全体の幅を
		「カード最大幅 × 枚数 + 隙間」で頭打ちにして中央寄せします。 */
	max-width: calc(
		var(--carec-max) * var(--carec-n)
		+ var(--carec-gap) * (var(--carec-n) - 1)
	);
	gap: var(--carec-gap) !important;
	width: 100%;
	margin: 0 auto !important;
	padding: 0 !important;
	list-style: none !important;
}

.carec_block ul.carec_cards::before,
.carec_block ul.carec_cards::after {
	content: none !important;
	display: none !important;
}

/*	columns 属性でカラム数を固定した場合は横幅いっぱいに広げます */
.carec_block.carec_fixed_cols ul.carec_cards {
	grid-template-columns: repeat(var(--carec-cols), minmax(0, 1fr)) !important;
	max-width: none;
}

/* =====================================================================
	カード
   ===================================================================== */

.carec_block ul.carec_cards > li.carec_card {
	position: relative;
	float: none !important;
	width: auto !important;
	min-width: 0 !important;	/* グリッドアイテムのはみ出し防止 */
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .07);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.carec_block ul.carec_cards > li.carec_card::before,
.carec_block ul.carec_cards > li.carec_card::after {
	content: none !important;
	display: none !important;
}

/*	サムネイル */
.carec_block .carec_card .carec_thumb {
	position: relative;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0;
	background: rgba(0, 0, 0, .04);
}

.carec_block .carec_card .carec_thumb a {
	display: block;
	line-height: 0;
	text-decoration: none;
	border: none;
	box-shadow: none;
}

.carec_block .carec_card .carec_thumb img {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center top;
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.carec_block .carec_card .carec_noimg {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	background: repeating-linear-gradient(
		45deg,
		rgba(0, 0, 0, .04) 0,
		rgba(0, 0, 0, .04) 8px,
		rgba(0, 0, 0, .02) 8px,
		rgba(0, 0, 0, .02) 16px
	);
}

/*	出勤バッジ */
.carec_block .carec_card .carec_badge {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 2;
	display: inline-block;
	max-width: calc(100% - 12px);
	padding: .2em .6em;
	border-radius: 999px;
	font-size: .66em;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
	color: #fff;
	background: rgba(0, 0, 0, .6);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.carec_block .carec_card .carec_badge_today    { background: #d6455b; }
.carec_block .carec_card .carec_badge_tomorrow { background: #e08a2e; }
.carec_block .carec_card .carec_badge_soon     { background: #4a7fb5; }

/* =====================================================================
	テキスト部
	見切れの原因になる white-space:nowrap は行全体には使いません。
	日付や時間帯は「まとまり単位では割らず、まとまりの間で折り返す」
	という指定にしています。
   ===================================================================== */

.carec_block .carec_card .carec_info {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	padding: .6em .55em .7em;
	text-align: center;
}

.carec_block .carec_card .carec_name {
	margin: 0 0 .15em;
	font-size: .92em;
	font-weight: 700;
	line-height: 1.4;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
}

.carec_block .carec_card .carec_name a {
	text-decoration: none;
	border: none;
}

.carec_block .carec_card .carec_name a:hover {
	text-decoration: underline;
}

.carec_block .carec_card .carec_age {
	display: inline-block;
	margin-left: .3em;
	font-size: .82em;
	font-weight: 400;
	opacity: .7;
	white-space: nowrap;
}

.carec_block .carec_card .carec_style {
	margin: 0 0 .4em;
	font-size: .7em;
	line-height: 1.55;
	opacity: .65;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
}

/*	次回出勤 */
.carec_block .carec_card .carec_next {
	margin: 0 0 .1em;
	font-size: .74em;
	line-height: 1.65;
	white-space: normal;		/* 見切れ防止 */
	overflow-wrap: break-word;
}

.carec_block .carec_card .carec_next_label {
	display: inline-block;
	margin: 0 .35em .15em 0;
	padding: .05em .45em;
	border-radius: 3px;
	font-size: .92em;
	background: rgba(0, 0, 0, .07);
	white-space: nowrap;
}

.carec_block .carec_card .carec_next_body {
	display: inline;
}

.carec_block .carec_card .carec_next_date {
	display: inline-block;
	margin-right: .3em;
	font-weight: 700;
	white-space: nowrap;		/* 「7/30(木)」は割らない */
}

.carec_block .carec_card .carec_next_time {
	display: inline-block;
	white-space: nowrap;		/* 「09:00〜18:00」は割らない */
}

.carec_block .carec_card .carec_next .attmgr_status,
.carec_block .carec_card .carec_next .attmgr_place {
	display: inline-block;
	margin: 0 0 0 .25em;
	padding: .05em .4em;
	border-radius: 3px;
	font-size: .92em;
	background: rgba(0, 0, 0, .07);
	white-space: nowrap;
}

/*	CTA */
.carec_block .carec_card .carec_cta {
	margin-top: auto;
	padding-top: .5em;
}

.carec_block .carec_card .carec_cta_btn {
	display: block;
	width: 100%;
	padding: .5em .4em;
	border: none;
	border-radius: 5px;
	font-size: .74em;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #333;
	white-space: normal;
	overflow-wrap: break-word;
	transition: opacity .2s;
}

.carec_block .carec_card .carec_cta_btn:hover,
.carec_block .carec_card .carec_cta_btn:focus {
	opacity: .8;
	color: #fff;
	text-decoration: none;
}

/* =====================================================================
	リストレイアウト（layout="list"）
	狭い画面でも文字が詰まらないため、スマートフォン中心のサイトでは
	こちらの方が読みやすいです。
   ===================================================================== */

.carec_block.carec_layout_list ul.carec_cards {
	display: block !important;
	grid-template-columns: none !important;
	max-width: 680px;
}

.carec_block.carec_layout_list ul.carec_cards > li.carec_card {
	flex-direction: row;
	align-items: stretch;
	margin-bottom: .6em !important;
}

.carec_block.carec_layout_list ul.carec_cards > li.carec_card:last-child {
	margin-bottom: 0 !important;
}

.carec_block.carec_layout_list .carec_card .carec_thumb {
	flex: 0 0 88px;
	width: 88px;
}

.carec_block.carec_layout_list .carec_card .carec_thumb img,
.carec_block.carec_layout_list .carec_card .carec_noimg {
	height: 100% !important;
	min-height: 112px;
	aspect-ratio: auto;
}

.carec_block.carec_layout_list .carec_card .carec_info {
	flex: 1 1 auto;
	min-width: 0;
	padding: .6em .7em;
	text-align: left;
}

.carec_block.carec_layout_list .carec_card .carec_cta {
	margin-top: .45em;
	padding-top: 0;
}

.carec_block.carec_layout_list .carec_card .carec_cta_btn {
	display: inline-block;
	width: auto;
	padding: .4em 1.2em;
}

/*	管理者向けの注意書き */
.carec_block.carec_notice {
	padding: .8em 1em;
	border: 1px dashed #d6455b;
	background: rgba(214, 69, 91, .05);
	font-size: .85em;
	color: #a02a3e;
}

/* =====================================================================
	画面幅ごとの調整
   ===================================================================== */

/*	タブレット以上 */
@media screen and (min-width: 768px) {
	.carec_block {
		--carec-gap: 16px;
		padding: 1.3em 1.3em 1.2em;
	}

	.carec_block .carec_title {
		font-size: 1.05em;
	}

	.carec_block .carec_card .carec_name    { font-size: .98em; }
	.carec_block .carec_card .carec_style   { font-size: .74em; }
	.carec_block .carec_card .carec_next    { font-size: .78em; }
	.carec_block .carec_card .carec_cta_btn { font-size: .78em; padding: .55em .6em; }
	.carec_block .carec_card .carec_info    { padding: .7em .8em .85em; }

	.carec_block.carec_layout_list .carec_card .carec_thumb {
		flex: 0 0 110px;
		width: 110px;
	}
}

/*	スマートフォン: 文字が入りきるようサイズを落とします */
@media screen and (max-width: 767px) {
	.carec_block {
		--carec-gap: 10px;
		margin: 2em 0;
		padding: .9em .8em .85em;
	}

	.carec_block .carec_title {
		font-size: .95em;
	}

	.carec_block .carec_card .carec_info {
		padding: .5em .45em .6em;
	}

	.carec_block .carec_card .carec_name    { font-size: .86em; }
	.carec_block .carec_card .carec_age     { font-size: .78em; margin-left: .2em; }
	.carec_block .carec_card .carec_style   { font-size: .66em; }
	.carec_block .carec_card .carec_next    { font-size: .7em; }
	.carec_block .carec_card .carec_cta_btn { font-size: .7em; padding: .45em .3em; }
	.carec_block .carec_card .carec_badge   { font-size: .6em; top: 4px; left: 4px; }

	/*	カラム固定指定でも、スマートフォンでは2カラムを上限にします */
	.carec_block.carec_fixed_cols ul.carec_cards {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.carec_block.carec_fixed_cols.carec_cols_1 ul.carec_cards {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/*	小型スマートフォン（iPhone SE 等）:
	2カラムだと「次回出勤」の行が窮屈になるため、ラベルを縦積みにします */
@media screen and (max-width: 400px) {
	.carec_block {
		padding: .85em .6em .8em;
	}

	.carec_block .carec_card .carec_next_label {
		display: block;
		width: 100%;
		margin: 0 0 .2em;
		text-align: center;
	}

	.carec_block.carec_layout_list .carec_card .carec_next_label {
		display: inline-block;
		width: auto;
		margin: 0 .35em .15em 0;
		text-align: left;
	}

	.carec_block .carec_card .carec_style {
		font-size: .63em;
	}
}

/*	極小幅（320px 前後）: 1列に落として確実に読ませます */
@media screen and (max-width: 340px) {
	.carec_block ul.carec_cards,
	.carec_block.carec_fixed_cols ul.carec_cards {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.carec_block .carec_card .carec_thumb img,
	.carec_block .carec_card .carec_noimg {
		aspect-ratio: 4 / 3;
	}
}