@charset "UTF-8";

/* ==============================================
	詳細リンク
================================================= */
.p-detail__link-link {
	position: relative;
	display: flex;
	justify-content: center;
	background: #F5F5F5;
	margin-top: 20px;
}

#content .p-detail__link-list a:hover,
#content .p-related-link__list a:hover {
	opacity: 0.6;
	color: inherit;
}

body #content .p-detail__heading {
	margin-bottom: 13px;
}

.p-detail__text-area {
	flex: 1;
	padding: 30px 32px 30px 40px;
}

.p-detail__image-area {
	position: relative;
	flex: 1;
    width: 100%;
    max-width: 313px;
}

.p-detail__image-area img {
	width: 100%;
	height: 100%;
    object-fit: cover;
}

.p-detail__more-text {
	position: absolute;
	bottom: 24px;
	right: 14px;
	display: inline-flex;
    align-items: center;
    gap: 6px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.8;
}

.p-detail__more-text::after {
	content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}

@media (max-width: 768px) {
	.p-detail__more-text {
		font-size: 13px;
	}
}

/* NOTE: 768pxだとリンクサムネイルが大きくなってしまうため、このサイズでレスポンシブ */
@media (max-width: 440px) {
	.p-detail__link-link {
		flex-direction: column;
	}
	body #content .p-detail__heading {
		margin-bottom: 5px;
	}

	.p-detail__text-area,
	.p-detail__image-area {
		max-width: 100%;
		flex: auto;
	}

	.p-detail__text-area {
		padding: 10px 10px 20px 10px;
	}
}

/* ==============================================
	タイムライン
================================================= */

.p-timeline__list {
	margin-top: 22px;
}

.p-timeline__item {
	position: relative;
	display: flex;
	justify-content: flex-start;
}

/* タイムラインの線 */
.p-timeline__item::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 48px;
	width: 2px;
	height: 100%;
	background:#F00;
	translate: -50% 0;
}

/* 時間のテキスト */
.p-timeline__item::after {
	position: absolute;
	left: 50%;
	top: 0;
	width: 65px;
	padding: 6px 0;
	background: #fff;
	font-size: 19px;
	text-align: center;
	line-height: 1.89474;
	translate: -50% 0;
}

.is-nine::after {
	content: '9:00';
}

.is-ten::after {
	content: '10:00';
}

.is-eleven::after {
	content: '11:00';
}

.is-twelve::after {
	content: '12:00';
}

.is-thirteen::after {
	content: '13:00';
}

.is-fourteen::after {
	content: '14:00';
}

.is-fifteen::after {
	content: '15:00';
}

.is-sixteen::after {
	content: '16:00';
}

.is-seventeen::after {
	content: '17:00';
}

.is-eighteen::after {
	content: '18:00';
}

.p-timeline__content {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 298px;
	background: #F5F5F5;
    padding: 20px 30px 30px 30px;
	box-sizing: border-box;
}

.p-timeline__title {
	font-size: clamp(16px, 0.56vw + 11px, 19px);
	line-height: 1.89474;
	margin-bottom: 15px;
}

.p-timeline__text {
	font-size: 14px;
	line-height: 1.5;
}

.is-empty {
	display: block;
}

@media (min-width: 901px) and (max-width: 1010px) {
	.p-timeline__content {
		padding: 10px 20px 20px 20px;
	}
}

@media (min-width: 769px) {
    .is-left {
        justify-content: flex-start;
    }

    .is-left .p-timeline__content {
        margin-right: 57.5%;
    }

    .is-right {
        justify-content: flex-end;
    }

    .is-right .p-timeline__content {
        margin-left: 57.5%;
    }

	.is-nine .p-timeline__content {
		margin-top: 12px;
	}

	.is-ten {
		margin-top: -121px;
	}

	.is-eleven {
		margin-top: -15px;
	}

	.is-twelve {
		margin-top: -140px;
	}

	.is-thirteen,
	.is-fifteen,
	.is-eighteen {
		margin-top: 118px;
	}

	.is-fourteen {
		margin-top: -67px;
	}

	.is-sixteen {
		margin-top: -67px;
	}

	.is-seventeen {
		margin-top: -109px;
	}

	.is-eleven::after {
		top: -52px;
	}

	.is-eighteen::before {
		height: calc( 100% - 48px );
	}

	.p-timeline__end-dot {
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 10px;
        height: 10px;
        background: #F00;
        border-radius: 50%;
        translate: -50% 0;
        z-index: 3;
	}
}

@media (max-width: 768px) {
	.p-timeline__item:not(:first-child) {
		margin-top: 20px;
	}

	.p-timeline__item {
		padding-left: 67px;
	}

	.p-timeline__item::before {
		top: 36px;
		left: 30px;
	}

	.p-timeline__item::after {
		left: 0;
		padding: 0;
		translate: 0;
	}

	.is-eighteen::before {
		height: calc( 100% - 36px );
	}

	.p-timeline__content {
		max-width: 100%;
		padding: 20px 30px;
	}

	.p-timeline__title {
		margin-bottom: 5px;
		font-size: 19px;
	}

	.p-timeline__text {
		font-size: 14px;
	}

	.is-empty {
		display: none;
	}

}

/* ==============================================
	work下層ページスタイル(service, shop, management)
================================================= */

.p-flex-wrap {
	display: flex;
	justify-content: center;
}

.p-flex__image-area {
	flex: 1;
	width: 100%;
    max-width: 261px;
	padding-right: 30px;
}

.p-flex__text-area {
	flex: 1;
}

body #content .p-work-lower__h2 {
	margin-bottom: 10px;
}

.p-related-link__list {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-top: 20px;
}

.p-related-link__item {
	width: 50%;
	aspect-ratio: 531 / 165;
}

.p-related-link {
	position: relative;
    display: flex;
	align-items: center;
	height: 100%;
	padding-left: 9.2%;
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
	font-size: clamp(14px, 2vw, 30px);
	line-height: 1.5;
}

.p-related-link::after {
	content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
	margin-left: 8px;
    border-top: 2px solid #F00;
    border-right: 2px solid #F00;
    transform: rotate(45deg);
}

.p-related-link.is-service {
	background-image: image-set(
        url(/employment/zh_cht/uniqlo/tw/storestaff/images/work/img_bg01.jpg) 1x,
        url(/employment/zh_cht/uniqlo/tw/storestaff/images/work/img_bg01@2x.jpg) 2x
    );
}

.p-related-link.is-shop {
	background-image: image-set(
        url(/employment/zh_cht/uniqlo/tw/storestaff/images/work/img_bg02.jpg) 1x,
        url(/employment/zh_cht/uniqlo/tw/storestaff/images/work/img_bg02@2x.jpg) 2x
    );
}

.p-related-link.is-management {
	background-image: image-set(
        url(/employment/zh_cht/uniqlo/tw/storestaff/images/work/img_bg03.jpg) 1x,
        url(/employment/zh_cht/uniqlo/tw/storestaff/images/work/img_bg03@2x.jpg) 2x
    );
}

@media (min-width: 769px) {
	.p-work__lower-section {
		padding-top: 70px;
		padding-bottom: 70px;
	}
}

/* NOTE: 768pxだと画像が大きくなってしまうため、このサイズでレスポンシブ */
@media (max-width: 680px) {
	.p-flex-wrap {
		flex-direction: column;
	}

	.p-flex__image-area {
		margin: 0 auto;
		padding: 0 0 10px 0;
	}

	.p-related-link__list {
		flex-direction: column;
	}

	.p-related-link__item {
		width: 100%;
	}

	.p-related-link {
		padding-left: 30px;
		font-size: 20px;
	}
}