@charset "UTF-8";

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

/* header (Top page only)
------------------------------------------------------------------------- */
/* #header */
.index_page_header {
	padding-block-end: 50px;
	background-color: #ffffff;
	background-image: url("../image/bg-header_home.webp");
	background-repeat: no-repeat;
	background-position: 0px 104px;
}

/* #global-nav */
.index_page #global-nav {
	margin-top: 45px;
}

/* トップページ法人説明 */
.top_description {
	height: 100px;

	& :where(.top_description_text) {
		height: 0;
		overflow: hidden;
	}
}

/* contents (Top page only)
------------------------------------------------------------------------- */
/* .news */
.work_center_news_list {
	margin-block: 0;
	line-height: 2;

	> :where(dt) {
		float: left;
		padding-left: 16px;
		background: url("../image/news_mark.gif") no-repeat left center;
	}
	> :where(dd) {
		margin-block: 0 3rem;
		margin-inline: 10rem 0;
	}
}

.news_frame {
	container-name: news_frame_container;
	container-type: inline-size;
	border: solid 2px #ff0000;
	padding-block: 0.25rem;
	padding-inline: 0.25rem;
}

/* ニュース見出し */
.news_heading {
	margin: 0;
	color: #ff6c00;
	font-size: 1.125rem;
	font-weight: bold;
}

.notice {
	color: #313f0f;
	font-size: 0.8125rem;
}

.oshirase {
	line-height: 2;
	margin-bottom: 10px;
}
/* ニュース小見出し */
.sub_heading {
	margin-block: 0;
	font-size: inherit;
	font-weight: normal;
}
.attention_list {
	padding-inline: 1rem;
	list-style-type: "※";
}
.sales_location_list {
	padding-inline-start: 1rem;
	list-style-type: "◆";
}


/* かてかてショップ、イベント情報 */
.shop_info {
	display: grid;
	column-gap: 0.25rem;
	margin-block: 0.25rem;

	> :where(div) {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;

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

		> :where(dd) {
			margin-inline: 0;
		}
	}

	/* 場所 */
	& :where(.shop_info_place > dd) {
		grid-column: 2 / -1;
	}
}

/* news_frameのinline-sizeによって日時の配置を調整 */
@container news_frame_container (inline-size >= 32em) {
	/* 幅が十分なときは、日時を一行で表示する */
	.shop_info {
		grid-template-columns: max-content max-content 1fr;
	}
	/* 日時 */
	.shop_info_datetime > :where(dd) {
		display: contents;

		& :where(.shop_info_date) {
			grid-column: 2;
			text-align: end;
		}

		& :where(
			.shop_info_business_hours,
		) {
			grid-column: 3;
		}
	}
}

@container news_frame_container (inline-size < 32em) {
	/* 幅が小さいときは、日時を一行で表示する */
	.shop_info {
		grid-template-columns: max-content 1fr;
	}

	/* 日時 */
	& :where(.shop_info_datetime > dd) {
		grid-column: 2;
	}
}

.sale_info {
	margin-block: 0;

	> :where(div) > :where(dd) {
		margin-inline-start: 0;
	}
}

/* スタンプラリーイベントのお知らせ */
.event_info_list {
	display: grid;
	column-gap: 0.25rem;
	grid-template-columns: max-content 1fr;
	margin-block: 0.25rem;

	> :where(div) {
		display: contents;

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

		> :where(dd) {
			grid-column: 2;
			margin-inline: 0;
		}
	}
}
.url {
	word-break: break-all;
}
.stamp_collecting_event {
	& :where(img) {
		block-size: auto;
		max-inline-size: 100%;
		object-fit: contain;
	}

	& :where(.stamp_collecting_thumbnail) {
		max-inline-size: 16rem;
		margin-inline: auto;
	}

	& :where(.event_info_list) {
		& :where(p) {
			margin-block-start: 0;
			margin-block-end: 0.25rem;
		}

		& :where(.how_to_join .qr_code) {
			grid-column: 1 / -1;

			& :where(figure) {
				margin-block: 0;
				margin-inline: auto;
				max-inline-size: 8rem;
				block-size: auto;
				background-color: inherit;
			}

			& :where(figcaption) {
				/* 8文字で改行するよう調整 */
				margin-inline: auto;
				max-inline-size: min(8em, 100%);
				text-align: center;
			}
		}
	}
}
} /* @layer legacy */

@layer modern {
	.news_subsection {
		--subsection_padding: 2rem;

		padding-inline-start: var(--subsection_padding);

		& :where(.news_subheading) {
			margin-block: 0;
			margin-inline-start: calc(var(--subsection_padding) * (-1));
			font-size: 1em;
			font-weight: bolder;
		}
	}
	/* ポスターのページとリンク */
	.poster_link:hover {
		background-color: revert;
		color: revert;
	}
	.poster_link {
		display: block;
	}
	.poster_page {
		margin-block: 1rem;
		margin-inline: 1rem;
	}
	.poster_page_list {
		display: flex;
		margin-block: 0;
		padding-inline: 0;
		list-style-type: none;

		& .poster_page_list_item {
			flex-shrink: 1;
		}
		& .poster_page_image {
			display: block;
			block-size: auto;
			inline-size: 100%;
			object-fit: scale-down;
		}
	}
	.poster_page_caption {
		margin-inline: auto;
		inline-size: fit-content;
	}
} /* @layer modern */