/**
* @file recommend.css
* @path \kaikyunavi_renewal\public\css\offer_detail\recommend\recommend.css
*
* このファイルはおすすめ求人カードのレイアウト・デザインを管理します。
* 主にFlexboxによるレイアウト調整、背景やグラデーション、ボタン・カードのスタイル、
* レスポンシブ対応（スマートフォン・タブレット・PC）などのスタイルを記述しています。
* メディアクエリを用いて画面幅ごとに細かい調整を行っています。
*/

@media print, screen and (min-width: 768px) {
    .pf-container--box-001 .recommend-card {
        background-color: #fff;
        border-radius: 6px;
        padding: 20px 30px;
        margin: 20px auto;
    }
    .recommend-card-ttl {
        margin-top: -20px;
        margin-bottom: -50px;
    }

    .recommend_detail {
        right: -12px !important;
    }
    .r-white-space {
        background: #fff;
        margin-top: -40px;
    }
}

/* 早期レコメンド枠 */
@media print, screen and (min-width: 768px) {
    /* PCのスタイル */
	.recommend-slider-wrapper {
		position: relative;
		display: flex;
		align-items: center;
	}
	.recommend-slide-btn--next img {
		-webkit-transform: rotate(180deg) !important; /* Chrome, Safari, Opera */
		transform: rotate(180deg) !important; /* Standard syntax */
		transform: rotate(180deg);
	}

	.recommend-slide-btn {
		flex-shrink: 0;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		border: 2px solid #effbff;
		background: #effbff;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
		transition: background-color 0.2s, border-color 0.2s;
	}

	.recommend-slide-btn:hover {
		background: #effbff;
		border-color: #effbff;
	}

	.recommend-slide-btn:disabled {
		opacity: 0.3;
		cursor: default;
	}

	.recommend-slide-btn--prev {
		margin-right: 8px;
	}

	.recommend-slide-btn--next {
		margin-left: 8px;
	}
}


@media (max-width: 767px) {
	.recommend-slide-btn {
		display: none;
	}
}
/* 早期レコメンド枠 */

/* 3枠レコメンド枠 */
@media print, screen and (min-width: 768px) {
	.pf-table-rcd th::before {
		content: none;
	}
}

.pf-tag-rcd {
	font-size: 12px !important;
	font-weight: bold !important;
	height: 20px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 1px 8px 0 8px !important;
	background-color: #EFFBFF !important;
	color: #238FE8 !important;
	border: 1px solid #238FE8 !important;
	box-sizing: border-box !important;
}


/* SP: カセット間に5pxの間隔を追加 */
@media screen and (max-width: 768px) {
    /* カセット間隔をSwiperのtransformに影響しない形で */
    .entry-oubo-together-show-sp .pf-card--015_02 {
        margin-right: 5px;
        box-sizing: border-box;
    }

    /* 角丸・線切れ防止 */
    .entry-oubo-together-show-sp .js-pf-carousel-slide {
        padding: 5px;
    }
}

/* 3枠レコメンド枠 */