@charset "utf-8";

@layer base, region;

@layer region {
	:root {
		--like_icon_text: "🩷";
	}

	:where(
		.example_index_article,
		.example,
	) {
		& .title_heading {
			margin-block-start: 0;
			margin-block-end: 1.5rem;
		}
	}

	/* 解説書(事例集)目次 リスト調整 */
	.index_list {
		list-style-type: none;
		font-size: 1rem;

		> :where(li) {
			margin-block: 1px 0.625rem;
			box-sizing: content-box;
			min-block-size: 5rem;
			border-block-end-style: solid;
			border-block-end-width: 1px;
			border-block-end-color: #cccccc;
			border-inline-start-style: solid;
			border-inline-start-width: 3px;
			border-inline-start-color: #017a6a;
			padding-block: 0.625em;
			padding-inline: 0.625em;
		}
		& :where(.index_title) {
			font-size: 1.25rem;
		}
		& :where(.index_list_defined_term) {
			font-style: normal;

			> :where(abbr) {
				border-bottom: revert;
				text-decoration-line: unset;
				cursor: revert;
			}
		}
		& :where(.index_list_full_term) {
			margin-block-start: 0.25rem;
			margin-block-end: 0;
		}
		& :where(.index_list_updated) {
			font-size: 0.8125rem;
		}
	}

	/* 解説書(事例集)目次 過去の解説書を見る 各社事例の戻るボタン */
	.browse-history,
	.go-back {
		margin-block: 2rem;
		text-align: end;
	}
	.browse-history .history-button,
	.go-back :any-link {
		border-style: solid;
		border-width: 1px;
		border-radius: 4px;
		border-color: #54967a;
		padding-block: 6px;
		padding-inline: 12px;
		outline-offset: -2px;
		background-color: #5ea587;
		color: #ffffff;
	}
	.browse-history :is(.history-button:focus, .history-button:active, .history-button:hover),
	.go-back :is(:link:focus, :link:active, :link:hover) {
		border-color: #3e6f5a;
		background-color: #4b856d;
		text-decoration: none;
	}

	/* フィルター上 */
	.example_filter {
		margin-block: 1rem;
		padding-block: 1em;
		padding-inline: 3em;
		background-color: #cccccc;
		border-style: solid;
		border-width: thin;
		border-color: #333333;
	}
	.example_filter_category_list {
		margin-inline-start: 3em;
		padding-inline: 0;
		list-style-type: none;

		> li {
			display: inline;
			border-inline-end-style: solid;
			border-inline-end-width: 1px;
			border-inline-end-color: gray;
		}
	}

	:is(
		.example_filter_reset_button,
		.example_filter_button,
	) {
		background-color: transparent;
		border-style: none;
	}
	.example_filter_reset_button {
		display: block;
		margin-inline: auto 0;
		max-inline-size: fit-content;
	}
	.example_filter_button {
		padding-inline-end: 1.5rem;

		&::before {
			content: "✓";
			font-size: 1.5em;
		}
		&:not([aria-checked="true"])::before {
			visibility: hidden;
		}
	}


	/*
 * 企業事例リスト
 *
 * 【企業アイテムの寸法】
 * ボーダーの太さは1px
 * 幅(1px + 16rem + 1px) × 高さ(1px + 26rem + 1px)
 *  ----------------
 * |   サムネイル   |
 * | 16rem × 12rem |
 *  ---------------
 * |   0.25rem     |
 * |4| タイトル   | |
 * | | 15.5rem × 4.5rem | |
 * |   0.25rem     |
 * | | 社名       | |
 * | | 15.5rem ×  2.5rem | |
 * | 0.25rem            |
 * | | 日付       | |
 * | | 15.5rem × 1rem | |
 * | 0.25rem            |
 * | | カテゴリ   | |
 * | | 15.5rem × 4.5rem | |
 * | 0.25rem        |
 *  ----------------
*/
	.example_list {
		--example_list_border_size: 1px;
		--example_list_item_size: calc(16rem + var(--example_list_border_size) * 2);

		display: grid;
		grid-template-columns: repeat(auto-fill, min(var(--example_list_item_size), 100%));
		grid-auto-rows: max-content;
		row-gap: 0.5rem;
		column-gap: 0.5rem;
		justify-content: center;
		padding-inline-start: 0;
		padding-inline-end: 0;
		list-style-type: none;
	}

	/* 企業事例リストアイテム */
	.example_list_item {
		--text_item_margin: 0.25rem;

		display: grid;
		grid-template-rows: subgrid;
		grid-row-end: span 6;
		box-sizing: content-box;
		border-style: solid;
		border-width: var(--example_list_border_size);
		box-shadow: 0 0 0.25rem gray;
	}

	/* いいね数表示 */
	.example_list_like_count {
		justify-self: start;
		margin-block: var(--text_item_margin);
		margin-inline: var(--text_item_margin);
		text-align: center;
		font-size: 0.875rem;

		&::before {
			content: var(--like_icon_text);
		}
	}

	/* 企業リストアイテムサムネイルと見出しのリンク */
	.example_list_item_header {
		display: grid;
		grid-template-rows: subgrid;
		grid-row-end: span 2;
		color: unset;
	}

	/* 企業リストアイテム 画像 */
	.example_thumbnail {
		/* 中央寄せ */
		justify-self: center;
		border-block-end-style: solid;
		border-block-end-width: var(--example_list_border_size);
	}
	.example_thumbnail img {
		block-size: auto;
		inline-size: 100%;
		object-fit: contain;
	}

	/* 企業リストアイテム テキスト部分 */
	:is(
		.example_subject,
		.example_corporation,
		.example_date,
		.example_category_list,
	) {
		margin-block: var(--text_item_margin);
		margin-inline: var(--text_item_margin);
		line-height: 1;
	}
	/* 企業リストアイテム 題名 */
	.example_subject {
		font-size: 1.125rem;
		font-weight: normal;
	}
	/* 企業リストアイテム 社名 */
	.example_corporation {
		font-size: 0.875rem;
		color: #555555;
	}
	/* 企業リストアイテム 日付 */
	.example_date {
		font-size: 0.875rem;
		color: #555555;
	}

	/* 企業リストアイテム カテゴリ */
	.example_category_list {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem;
		justify-content: end;
		align-content: end;
		list-style-type: none;
	}
	.example_category_tag {
		background-color: rgb(255, 242, 204);
	}

	/*
 * フィルタによって事例アイテムが隠れるときのアニメーション設定
 * スクリプトから使用
 * "prefers-reduced-motion: no-preference"はアニメーション無効化の設定を行っていない
 * "prefers-reduced-motion: reduce"はアニメーション無効化の設定を行っている
 */
	@keyframes show {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	@keyframes hide {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}
	@media (prefers-reduced-motion: no-preference) {
		.example_list_item {
			animation: show 0.25s;
			opacity: 1;
		}
		.script_fading_out_item {
			animation: hide 0.25s;
			opacity: 0;
		}
	}
	@media (prefers-reduced-motion: reduce) {
		.example_list_item {
			animation: show 1ms;
			opacity: 1;
		}
		.script_fading_out_item {
			animation: hide 1ms;
			opacity: 0;
		}
	}
	/* フィルタによって非表示になっているアイテム */
	.script_hidden_item {
		display: none;
	}

	/* 事例記事 */
	.example {
		margin-block: 1rem;

		& .title_heading {
			margin-block-start: 0;
			margin-block-end: 1.5rem;
		}
	}
	/* 事例ページ 見出し */
	:is(
		.example_chapter_heading,
		.example_section_heading,
		.example_subsection_heading,
	) {
		margin-block: 0;
		font-size: 1rem;
	}
	.example_chapter_heading {
		color: #017a6a;

		&::before {
			content: "◆";
		}
	}

	.example_section_heading {
		font-weight: bold;
		text-decoration: underline;
	}

	.example_subsection_heading {
			font-weight: normal;

			&::before {
				content: "<";
			}

			&::after {
				content: ">";
			}
	}

	.example_header {
		--example_heading_font_size: 1.3125rem;
		--example_heading_font_weight: bolder;
		--example_heading_color: #017a6a;

		display: grid;
		grid-template-columns: 1fr max-content;
		margin-block: 2rem;
		margin-inline: 0;
		border-block-start-style: unset;
		border-block-end-style: solid;
		border-block-end-width: 1px;
		border-block-end-color: #cccccc;
		border-inline-start-style: solid;
		border-inline-start-width: 3px;
		border-inline-start-color: var(--example_heading_color);
		border-inline-end-style: unset;
		padding-block: 0.625rem;
		padding-inline: 0.625rem;

		& :where(.example_heading) {
			grid-row-start: 1;
			grid-column-start: 1;
		}
		& :where(.example_corporate_name) {
			grid-row-start: 2;
			grid-column-start: 1;
		}
		& :where(.example_like_button) {
			grid-column-start: 2;
			align-self: start;
		}
	}
	/* 事例ページタイトル、企業名 */
	:is(
	.example_heading,
	.example_corporate_name,
	) {
		font-size: var(--example_heading_font_size);
		font-weight: var(--example_heading_font_weight);
	}
	.example_heading {
		margin-block: 0;
		color: var(--example_heading_color);
	}
	/* 事例ページのいいねボタン */
	.example_like_button {
		--like_button_shadow_color: #80808080;
		--like_button_shadow_x: 0.125rem;
		--like_button_shadow_y: 0.125rem;

		border-style: none;
		border-radius: 4rem;
		background-color: transparent;
		color: inherit;

		&::before {
			content: var(--like_icon_text);
			aspect-ratio: 1;
		}
	}
	/* 押せる状態 */
	:is(
		.example_like_button:enabled,
	) {
		box-shadow: var(--like_button_shadow_color) var(--like_button_shadow_x) var(--like_button_shadow_y);
	}
	/* 押せない状態 */
	:is(
		.example_like_button:not(.script_pressed_like_button),
	) {
		filter: grayscale(0.5);
		opacity: 0.5;
	}
	/* 押しこまれている状態 */
	:is(
		.script_pressed_like_button,
		.example_like_button:active,
	) {
		box-shadow: inset var(--like_button_shadow_color) var(--like_button_shadow_x) var(--like_button_shadow_y);
	}

	/* 事例ページ 日付 */
	.example_date {
		display: block;
		text-align: end;
	}

	/* 事例ページ セクション */
		:is(
		.example_chapter,
		.example_section,
		.example_subsection,
	) {
		margin-block: 2rem;
	}

	/* チャプターのinline-start側の隙間 見出し以外 */
	@media (width >= 768px) {
		.example_chapter {
			--content_indent_inline_start: 1.5rem;

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

			> .example_chapter_heading {
				margin-inline-start: calc(var(--content_indent_inline_start) * -1);
			}
		}
	}

	/* 事例ページ リスト */
	.example ul {
		padding-inline-start: 1.5em;
		list-style-type: disc;
	}
	.example ul li::marker {
		content: "● ";
	}
	.example ul ul li::marker {
		content: "- ";
	}

	.example dl > div {
		margin-block: 1rem;
	}
	.example dl ul {
		margin-block: 1rem;
	}

	.ordered_description_list {
		& p {
			margin-block: 0;
		}
	}

	/* 事例ページ 用語定義 */
	.word_definition {
		font-style: normal;
	}

	/* 事例ページ フッター */
	.example_corporate_information {
		box-sizing: content-box;
		margin-block: 4rem;
		margin-inline: auto;
		padding-block: 2rem;
		background-color: #dcf4f1;
		color: #017a6a;
		font-style: normal;

		& :any-link {
			color: #3c763d;
		}
	}

	.example_corporate_information_name {
		margin-block: 0 1rem;
		font-size: 1.75rem;
		font-weight: bold;
		color: #3c763d;
	}

	:is(
		.example_corporate_information_department,
		.example_corporate_information_postal_code,
		.example_corporate_information_address,
	) {
		margin-block-start: 0.5rem;
		margin-block-end: 0;
		margin-inline-start: var(--corporate_information_margin_inline_start, 0);
	}
	.example_corporate_information_postal_code::before {
		content: "〒";
	}

	@container page_container (inline-size < 48rem) {
		.example_corporate_information {
			--corporate_information_margin_inline_start: 1rem;

			max-inline-size: 100%;
			padding-inline: 0.5rem;
		}
	}
	@container page_container (inline-size >= 48rem) {
		.example_corporate_information {
			--corporate_information_margin_inline_start: 4rem;

			max-inline-size: 75%;
			padding-inline: 4rem;
		}
	}

	/* 画像親要素 */
	.example .image-box {
		display: block;
		text-align: center;
		margin-block: 2.5rem;
		margin-inline: auto;
	}
	@media (width >= 768px) {
		/* 幅9割くらい、図 */
		:where(.example) .figure {
			max-width: 87.5%;
		}
		/* 幅6割くらい、写真 */
		:where(.example) .picture {
			max-width: 62.5%;
		}
		/* 小さい画像 */
		:where(.example) .small-image {
			max-width: 25%;
		}
	}
	figcaption {
		text-align: center;
	}
	/* 画像 */
	@media (width < 768px) {
		.example :where(.image-box img) {
			max-height: 340px;
		}
	}
	@media (768px <= width < 992px) {
		.example :where(.image-box img) {
			max-height: 420px;
		}
	}
	@media (992px <= width) {
		.example :where(.image-box img) {
			max-height: 500px;
		}
	}
	.example :where(.image-box img) {
		object-fit: contain;
	}

	/* 画像を横並びに */
	:where(.example) .image-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin-block: 4rem;
		margin-inline: auto;
		text-align: center;
	}

	:where(.example .image-list) > .item {
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: 16rem;
	}
	:where(.example .large-image-list) > .item {
		flex-basis: 32rem;
	}
	:where(.example .small-image-list) .item {
		flex-grow: 0;
		flex-basis: 12rem;
	}
	:where(.example .image-list > .item) img {
		object-fit: contain;
		margin-inline: auto;
	}

	/* 映像 */
	:where(.example) .video-container {
		margin-block: 2.5rem;
	}
	:where(.example) .embedded-video {
		display: block;
		max-inline-size: 100%;
	}

	@media (width >= 768px) {
		/* 事例ページ サイド画像(フロート、フロート解除) */
		.has-floating {
			display: block flow-root;
		}
		.example .has-floating .image-box {
			float: inline-end;
			display: block;
			margin-block: 0 1rem;
			margin-inline: 1rem 0;
			inline-size: 18.75%;
		}
	}

	/* URLを含むテキスト */
	:where(.example) .url {
		overflow-wrap: anywhere;
	}
}