@charset "UTF-8";

/* 八王子ワークセンター
	<i.com> pagelayout.css
---------------------------------------------------- */
@layer legacy {

/* ---------------------------------------
For Profile Pages
------------------------------------------ */

/* .main .unit */
body.profile .main .unit th,
body.profile .main .unit td {
	padding: 7px;
	line-height: 1.5;
}
body.profile .main .unit th {
	font-weight: bold;
	white-space: nowrap;
}
body.profile .main .unit td ul li {
	list-style: disc;
	padding-left: 5px;
}
body.profile .main article.origin h3 {
	color: #99cc33;
}
body.profile .main section.list ul.list-index li {
	display: inline;
	background: url("../profile/img/mark.gif") no-repeat left center;
	padding-left: 18px;
	color: #ff3333;
	margin-right: 15px;
}
body.profile .main article.list-category ul.list-2column li {
	width: 270px;
	display: block;
	float: left;
	list-style: none;
	margin: 5px 0px 5px 25px;
	border: 1px solid #ccde9e;
	padding: 10px;
	height: 15em;
}

/* ---------------------------------------
For Summary Pages
------------------------------------------ */

/* ボーダー付きのテーブルスタイル 概要、役員表、報告書 */
:is(
	.outline_table,
	.officer_table,
	.report_table,
) {
	--table_border_color: #ffffff;
	--table_border_width: 1px;
	--table_cell_padding: 7px;
	--table_line_height: 1.5;

	border-style: solid none none solid;
	border-width: var(--table_border_width);
	border-color: var(--table_border_color);
	border-collapse: collapse;
	padding: 0px;

	& :where(th, td) {
		border-style: none solid solid none;
		border-width: var(--table_border_width);
		border-color: var(--table_border_color);
		padding: var(--table_cell_padding);
		line-height: var(--table_line_height);
	}
	& :where(th) {
		font-weight: bold;
		white-space: nowrap;
	}
}

/* 法人概要 概要 */
.outline_table {
	--table_border_color: #ffffff;
	--table_border_width: 1px;
	--table_cell_padding: 7px;
	--table_line_height: 1.5;

	inline-size: 100%;

	& :where(tr:nth-of-type(1)) {
		background-color: #dcdafd;
	}
	& :where(tr:nth-of-type(2)) {
		background-color: #eae9fe;
	}
	& :where(tr:nth-of-type(3)) {
		background-color: #f4f3ff;
	}
}

/* 法人概要 あゆみ */
.summary_history_table {
	inline-size: 100%;

	& :where(th) {
		font-weight: bold;
		white-space: nowrap;
	}
	& :where(td) {
		word-break: auto-phrase;
	}
	& :where(th, td) {
		padding-block: 0.25rem;
		padding-inline: 0.25rem;
		line-height: 1.5;
	}
}

/* 法人概要 役員表 */
.officer_table {
	--table_border_color: #8e87fc;
	--table_border_width: 1px;
	--table_cell_padding: 7px;
	--table_line_height: 1.5;

	inline-size: 90%;

	& :where(th) {
		background-color: #e7e6fe;
	}

	& :where(
		.job_title,
	) {
		inline-size: 15%;
	}
	& :where(
		.name,
		.order,
	) {
		inline-size: 40%;
	}
}

/* 法人概要 報告書 */
.report_table {
	--table_border_color: #ffffff;
	--table_border_width: 1px;
	--table_cell_padding: 10px;
	--table_line_height: 1.5;

	inline-size: 100%;

	& :where(th) {
		background-color: #e0ecfc;
	}
}
body.summary .main .bg-image {
	background: url("../image/summary_bg-image.jpg") no-repeat 0px 0px;
}

/* ---------------------------------------
For Service Pages　（共通）
------------------------------------------ */

/* body.service .lead */
.wakuwaku_lead {
	--lead_background_image: url("../service/images/wakuwaku_bg-lead.webp");
	--lead_background_color: #f2e7f9;
}
.reborn_lead {
	--lead_background_image: url("../service/images/reborn_bg-lead.webp");
	--lead_background_color: #dafdde;
}
.kurieito_lead {
	--lead_background_image: url("../service/images/kurieito_bg-lead.webp");
	--lead_background_color: #fdf2d9;
}
:is(
	.wakuwaku_lead,
	.reborn_lead,
	.kurieito_lead,
) {
	margin-inline-start: auto;
	margin-inline-end: auto;
	min-height: var(--lead_min_height, 266px);
	width: var(--lead_width, 540px);
	background-position: top center;
	background-repeat: no-repeat;
	background-image: var(--lead_background_image);
	background-color: var(--lead_background_color, transparent);
}

.navigation_in_page_list {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1em;
	align-content: start;
	min-height: 95px;
	padding: 8px 0px 0px 11px;
}

.service {
	& :where(.lead-column) {
		display: flex;
		flex-wrap: wrap;
		margin-block-end: 1.75rem;
		margin-inline-start: 0.25rem;
		margin-inline-end: 0.25rem;
		padding: 0px;

		> :where(.photo) {
			flex-shrink: 0;
			flex-grow: 0;
			flex-basis: 220px;
			padding: 5px;
		}
		> :where(.text) {
			flex-shrink: 1;
			flex-grow: 1;
			flex-basis: 50%;
			word-break: auto-phrase;

		}
	}
}

.excursion_photo_container {
	margin-block: 1rem;
	text-align: center;

	& .excursion_photo {
		vertical-align: top;
	}
}

/*  .main */

/*  .column */
body.service .main .column {
	position: relative;
	width: 499px;
	margin: 0px 0px 30px;
	padding: 0px;
}
body.service .main .column p.photo {
	position: absolute;
	display: inline;
	top: 0px;
	left: 0px;
}
body.service .main .lead-column p#pWakuwaku img,
body.service .main .column p#pWakuwaku img {
	border: 3px solid #c59dfb;
}
body.service .main .lead-column p#pKurieito img,
body.service .main .column p#pKurieito img {
	border: 3px solid #cc9c6c;
}
body.service .main .column .text {
	margin-left: 180px;
}
body.service .main .column p.detail-link {
	clear: both;
	font-size: 1.125rem;
	font-weight: bold;
	text-align: right;
	padding: 0px 0px 10px;
}

/*  .unit-frame */
body.service .main .unit-frame {
	margin: 0px 0px 30px 30px;
}

/* アクセス・お問い合わせ */
.facility_access {
	display: flex;
	column-gap: 1rem;

	& :where(.map_container) {
		flex-basis: 230px;
	}
	& :where(.facility_table) {
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: auto;
	}
	& :where(.facility_table_caption) {
		font-size: 0.9375rem;
		font-weight: bolder;
		text-align: start;
		color: #0070c0;
	}
	& :where(th, td) {
		border-style: solid;
		border-width: 1px;
		border-color: white;
		padding: 0.5rem;
	}
	& :where(.facility_table_heading) {
		min-inline-size: 6rem;
		background-color: #e0ecfc;
	}
	& :where(.facility_table_data) {
		background-color: #f5f5f5;
	}
}

/*  .line */
body.service .main .line {
	clear: both;
	text-align: center;
}

/* ---------------------------------------
For Service-index Pages
------------------------------------------ */

/*  .lead */
.service_index_lead {
	margin-block: 1rem 2rem;
	margin-inline: 4rem;
	border-radius: 1rem;
	padding-block: 1.5rem;
	padding-inline: 1.5rem;
	background-color: #f0f0fe;
}

/*  .section */
body#service-index .main .section {
	margin: 0px 35px 50px 40px;
	padding: 0px;
}
body#service-index .main .section h2 {
	margin: 0px 0px 25px;
	padding: 0px;
}

.employment_support_service_heading {
	text-align: center;
}
.employment_support_service_list {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 0.25rem;
	row-gap: 0.5rem;
	padding: 0.5rem;
	background-color: #fdd2c7;

	> :where(div) {
		display: contents;

		> :where(dt) {
			grid-column: 1;
		}

		> :where(dd) {
			grid-column: 2;
			margin-inline-start: 0;
		}
	}

	& :where(p) {
		word-break: auto-phrase;
	}

	& :where(.details_link) {
		text-align: end;
	}

	& :where(.employment_support_service_image) {
		display: block;
		max-width: 100%;
		height: auto;
		object-fit: contain;
	}
}

/*  .unit */
body#service-index .main .section .unit {
	margin: 0px 0px 0px 3px;
	padding: 0px 0px 20px;
}
body#service-index .main .section .unit .detail-link {
	text-align: right;
	margin: 0px 25px 10px 0px;
	padding: 0px;
}


/* サービスのセクションの見出し */
.service_section_heading {
	text-align: center;
}


/* ---------------------------------------
For Wakuwaku Pages
------------------------------------------ */

/* わくわくバナー */
.wakuwaku_lead_banner_container {
	margin-block: 1rem;
	text-align: center;

	& :where(img) {
		vertical-align: top;
	}
}

/* わくわくのモットーリスト */
.wakuwaku_motto_list {
	margin-block: 0.5em;
	padding-inline-start: 2rem;
	list-style-type: disc;
}

/* わくわくのお知らせ */
.wakuwaku_news_section {
	padding-inline: 2rem;
}
.wakuwaku_news_category {
	margin-block-start: 1rem;
	margin-block-end: 1rem;
}
.wakuwaku_news_category_heading {
	margin-block: 0.5rem;
	font-size: 1.25rem;
	font-weight: normal;
}

.wakuwaku_news_list {
	--border_top_width: 22;
	--border_bottom_width: 22;
	--border_left_width: 22;
	--border_right_width: 22;
	--border_top_width_px: calc(var(--border_top_width) * 1px);
	--border_bottom_width_px: calc(var(--border_bottom_width) * 1px);
	--border_left_width_px: calc(var(--border_left_width) * 1px);
	--border_right_width_px: calc(var(--border_right_width) * 1px);

	max-block-size: 24rem;
	margin-block: 0;
	border-style: solid solid solid solid;
	border-width: var(--border_top_width_px) var(--border_right_width_px) var(--border_bottom_width_px) var(--border_left_width_px);
	border-color: #d5c0f6;
	border-image-source: url("../service/images/wakuwaku_news_frame.webp");
	border-image-repeat: stretch;
	border-image-slice: var(--border_top_width) var(--border_right_width) var(--border_bottom_width) var(--border_left_width);
	overflow: auto;

	/* ニュースの各要素の隙間 最初以外の要素はblock-startに1rem、最後以外の要素はblock-endに1rem */
	& :where(.wakuwaku_news_item:not(:first-of-type)) {
		margin-block-start: 1rem;
	}
	& :where(.wakuwaku_news_item:not(:last-of-type)) {
		margin-block-end: 1rem;
	}

	& :where(
		.wakuwaku_news_item_topic,
		.wakuwaku_news_item_description,
	) {
		margin-inline: 0;
	}
}

/* 活動紹介 */
.wakuwaku_activity_content {
	margin-inline-start: 2rem;
}

.wakuwaku_activity_list {
	margin-block: 1rem;
	padding-inline-start: 2rem;
	list-style-type: circle;
}

/* 活動時間 */
.wakuwaku_business_hours {
	margin-inline-start: 2rem;
}
.wakuwaku_business_hours_list {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 1rem;
	margin-block: 0;

	> :where(div) {
		display: contents;

		> :where(dt) {
			grid-column: 1;
		}
		> :where(dd) {
			grid-column: 2;
			margin-inline-start: 0;
		}
	}
}

/* ---------------------------------------
For Reborn Pages
------------------------------------------ */

/*  .unit-frame */
.reborn_work_process_list {
	/* 背景画像に点線が入っているため、中央に配置+画像が足りない部分を背景色に+border-radiusで丸める */
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-content: space-around;
	margin-block: 0;
	margin-inline: 2rem;
	width: 498px;
	min-height: 471px;
	padding-block: 0.5rem;
	border-radius: 1rem;
	line-height: 1.25;
	list-style-type: none;
	background-image: url("../service/images/reborn_bg_03.gif");
	background-repeat: no-repeat;
	background-color: #dcffc1;

	& .reborn_work_process_image {
		display: block;
		margin-block: 0.25rem;
		margin-inline: auto;
		height: auto;
		width: 150px;

		> img {
			vertical-align: top;
		}
	}
	& .reborn_work_process_description {
		margin-block: 0.25rem;
		margin-inline: 0.25rem;
	}
}

/* ---------------------------------------
For Workport Pages
------------------------------------------ */
/* ワークポート説明文 */
.workport_lead_description {
	padding-block: 0.5rem;
	padding-inline: 0.5rem;
}
.workport_lead_text {
	margin-inline: auto;
	width: 540px;
	min-height: 266px;
	background-image: url("../service/images/workport_bg-lead.webp");
	background-repeat: no-repeat;
}

.workport_structure_container {
	text-align: center;
}

/* ワークポート施設紹介 */
.workport_facility {
	margin-block: 1rem;
	margin-inline: auto;
	border-style: solid;
	border-width: medium;
	border-color: var(--facility_border_color);
	width: 499px;
	display: grid;
	grid-template-columns: 176px 1fr;

	& :where(.workport_facility_heading) {
		grid-column-start: 1;
		grid-column-end: -1;

		& :where(img) {
			display: block;
		}
	}

	& :where(.workport_facility_photo) {
		grid-column: 1;
		grid-row: span 2;
		padding-block-start: 0.5rem;
		text-align: center;
		background-color: var(--photo_background_color, transparent);
	}
	& :where(.workport_fafility_description) {
		grid-column: 2;
		padding-block: 0.5rem;
		padding-inline: 0.5rem;
	}
	& :where(.workport_details_link) {
		grid-column: 2;
		text-align: end;
	}
}

.workport_facility_kurieito {
	--facility_border_color: #ca8c63;
	--photo_background_color: #fccca9;
}
.workport_facility_katekate {
	--facility_border_color: #95c97c;
	--photo_background_color: #e2f4bc;
}

/* ---------------------------------------
For Kurieito Pages
------------------------------------------ */

/*  .unit-frame */
.kurieito_business_description {
	margin-block: 1rem;
	margin-inline: auto;
	box-sizing: border-box;
	min-block-size: 379px;
	inline-size: 465px;
	padding-block: 50px;
	padding-inline: 20px;
	background-image: url("../service/images/kurieito_bg-unit.webp");
	background-repeat: no-repeat;
}
.kurieito_photo_container {
	text-align: center;
}
.kurieito_business_hours {
	color: #cc6600;
}

.kurieito_menu_image_list {
	margin-block: 0;
	padding-inline: 4rem;
	list-style-type: none;

	& .kurieito_menu_image {
		display: block;
		block-size: auto;
		inline-size: 100%;
		object-fit: scale-down;
	}
}
:is(
	.kurieito_menu_before,
	.kurieito_menu_after,
) {
	display: block;
	width: 458px;
	height: 57px;
	object-fit: scale-down;
}
.kurieito_menu_after {
	margin-inline-start: auto;
	margin-inline-end: 0;
}

/* ---------------------------------------
For Member Pages
------------------------------------------ */
body.member .main li {
	float: left;
	width: 19em;
}

/* ---------------------------------------
For Press Pages
------------------------------------------ */

/*  .unit  */
:where(.press) .unit {
	background: url("../press/images/bg-katekate.gif") no-repeat 0px 0px;
	width: 490px;
}
:where(.press .unit) > .heading {
	padding-top: 10px;
	text-align: center;
}
:where(.press .unit) .text {
	padding: 10px 35px;
}
:where(.press) .detail-link {
	padding: 10px 0px 20px;
}
:where(.press .detail-link) img {
	display: block;
	margin-block: 10px 20px;
	margin-inline: auto;
}
:where(.press .latest_freepaper_image) img {
	display: block;
	margin-inline: auto;
	max-width: 320px;
	max-height: 240px;
	block-size: auto;
	inline-size: 100%;
	object-fit: contain;
}

/*  ul.list-2column  */
.press .list-2column {
	padding: 0px;
	margin: 0px 0px 0px 30px;
	list-style-type: none;
}
.press .list-2column > li {
	width: 260px;
	display: block;
	float: left;
	border: 1px solid #ccde9e;
	margin: 0px 5px 5px 0px;
}
.press .list-2column .column {
	position: relative;
	width: 260px;
}
.press .list-2column .column .photo {
	position: absolute;
	top: 15px;
	left: 15px;
	width: 55px;
	height: 55px;
}
.press .list-2column .column .photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.press .list-2column .column .text {
	margin-left: 80px;
	min-height: 6em;
	padding: 20px 0px 0px;
}

/* ---------------------------------------
For Link Pages
------------------------------------------ */

/* #lead-area */
body.link #lead-area ul {
	background: url("../semi/img-link/btn_bg.gif") no-repeat center center;
	height: 66px;
}
body.link #lead-area ul li {
	margin: 0px 0px 0px 15px;
}
body.link #lead-area ul li img {
	margin: 15px 0px 0px;
}

/* .main */
body.link .main dl {
	margin: 0px 0px 0px 90px;
}
body.link .main dt {
	float: left;
	margin: 0px 25px 0px 0px;
}
} /* @layer legacy */