@charset "utf-8";
@import url("root.css");

.sub_page {
	section {
		h4 {
			@media screen and (max-width: 820px) {
				padding: 0;

			}

		}

		&.case {
			padding-top: 77px;
			background: white !important;

			@media screen and (max-width: 820px) {
				padding-top: 45px;
				padding-bottom: 35px;
			}

			@media screen and (max-width: 600px) {
				padding-top: 30px;
			}

			&.case_list {
				.case_box {
					ul {
						li {
							&.case_title {
								width: 100%;
								border-bottom: 1px solid #EFEFEF;

							}



							a {
								color: var(--black);
								display: block;
								padding: 23px 0 26px;
								text-decoration: none;

								@media screen and (max-width: 600px) {
									padding: 15px 0;
								}

								&:hover {
									>div {
										h4 {
											color: var(--blue);
										}
									}
								}

								>div {
									display: flex;
									align-items: center;

									@media screen and (max-width: 600px) {
										flex-wrap: wrap;
									}

									.post_date {
										color: var(--blue);
										font-weight: 500;
										font-size: 1.6rem;
										margin-right: 60px;
										font-family: var(--noto);

										@media screen and (max-width: 820px) {
											margin-right: 30px;
											font-size: 1.4rem;
										}

										@media screen and (max-width: 600px) {
											margin: 0;
											display: block;
											text-align: left;
											width: 100%;
											font-size: 1.2rem;
										}

									}

									h4 {
										font-size: 1.6rem;
										font-weight: 500;
										transition: all .1s;

										@media screen and (max-width: 600px) {
											margin: 0;
											display: block;
											text-align: left;
											width: 100%;
											margin-top: 5px;
											font-size: 1.4rem;
										}
									}

								}
							}
						}
					}
				}
			}


			/* お知らせ記事ページ */
			&.case_page {
				padding-bottom: 100px;

				@media screen and (max-width: 820px) {
					padding-top: 45px;
				}

				@media screen and (max-width: 600px) {
					padding-bottom: 55px;
				}

				.case_box {
					.post_title {
						border-bottom: 1px solid #EFEFEF;

						.post_date {
							font-weight: 500;
							color: var(--blue);
							font-size: 1.6rem;
							letter-spacing: 0.1em;
							display: inline-block;
							font-family: var(--noto);

							@media screen and (max-width: 820px) {
								font-size: 1.4rem;
							}

							@media screen and (max-width: 600px) {
								font-size: 1.2rem;
							}
						}

						h4 {
							margin: 15px 0 20px;
							color: var(--black);
							font-weight: 700;
							font-size: 2.2rem;

							@media screen and (max-width: 820px) {
								font-size: 1.8rem;
								margin-top: 10px;
							}
						}
					}

					.post_content {
						margin-top: 45px;

						@media screen and (max-width: 820px) {
							margin-top: 30px;
						}

						h4 {
							text-align: left;
							font-size: 1.8rem;
						}

						>a {
							display: none;
						}

						p {
							font-size: 1.6rem;
							letter-spacing: 0.08em;
							line-height: 2.8rem;

							@media screen and (max-width: 820px) {
								font-size: 1.4rem;
								line-height: 2.6rem;
							}
						}
					}

				}
			}

			.buttons {
				margin-top: 55px;
				display: flex;
				justify-content: center;

				@media screen and (max-width: 600px) {
					margin-top: 40px;
				}

				a {
					display: flex;
					padding: 5px 30px;
					font-weight: 500;
					color: var(--blue);
					text-decoration: none;
					align-items: center;
					transition: all .1s;
					border-right: 1px solid #A9DDED;
					font: 1.6rem;

					@media screen and (max-width: 600px) {
						width: 49%;
						font-size: 1.2rem;
						padding: 5px 10px;
						justify-content: center;
					}

					&:hover {
						opacity: .7;
					}

					&:last-child {
						border: none;
					}

					img {

						&.to,
						&.back {
							width: 5px;
							height: auto;
							margin: 0 10px;
						}

						&.to {
							transform: rotate(180deg);
						}
					}
				}
			}



		}
	}

	.pkb-jisseki {
		--pj-text: #2b2f3a;
		--pj-sub: #5b6170;
		/* --pj-accent: #d9534f; */
		--pj-accent: #10ABDD;
		/* --pj-accent-soft: #fdeceb; */
		--pj-accent-soft: #ebf7fa;
		--pj-line: #d9dce3;
		--pj-head: #f3f4f7;
		--pj-panel: #f6f7f9;
		--pj-bg: #ffffff;

		/* max-width: 960px; */
		margin: 0 auto;
		padding: 40px 16px 64px;
		color: var(--pj-text);
		background: var(--pj-bg);
		font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
		font-size: 16px;
		line-height: 1.8;
		box-sizing: border-box;

		*,
		*::before,
		*::after {
			box-sizing: border-box;
		}

		img {
			display: block;
			max-width: 100%;
			height: auto;
		}

		h1,
		h2,
		h4,
		p {
			margin: 0;
		}

		/* ページ見出し */
		.pj-hero {
			text-align: center;
			margin-bottom: 40px;

			&-sub {
				color: var(--pj-accent);
				font-weight: 700;
				font-size: 14px;
				letter-spacing: .08em;
			}

			h1 {
				font-size: clamp(26px, 5vw, 36px);
				line-height: 1.4;
				margin: 8px 0 12px;
			}
		}

		.pj-hero-lead {
			color: var(--pj-sub);
		}

		.pj-asof {
			display: inline-block;
			margin-top: 12px;
			font-size: 13px;
			color: var(--pj-sub);
			border: 1px solid var(--pj-line);
			border-radius: 999px;
			padding: 2px 14px;
		}

		/* 目次 */
		.pj-toc {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			justify-content: center;
			margin: 0 0 48px;
			padding: 0;
			list-style: none;

			a {
				display: block;
				padding: 6px 14px;
				border: 1px solid var(--pj-line);
				border-radius: 999px;
				font-size: 14px;
				color: var(--pj-text);
				text-decoration: none;
				background: #fff;

				&:hover {
					border-color: var(--pj-accent);
					color: var(--pj-accent);
				}
			}
		}

		/* セクション共通 */
		.pj-section {
			margin-bottom: 56px;
			scroll-margin-top: 80px;

			h3 {
				font-size: clamp(22px, 4vw, 28px);
				line-height: 1.45;
				margin: 12px 0 8px;
			}
		}

		.pj-label {
			display: inline-block;
			background: var(--pj-accent);
			color: #fff;
			font-weight: 700;
			font-size: 14px;
			padding: 4px 16px;
			border-radius: 8px;
		}

		.pj-catch {
			color: var(--pj-accent);
			font-weight: 700;
			font-size: clamp(16px, 2.6vw, 19px);
			line-height: 1.6;
			margin-bottom: 20px;
		}

		.pj-case {
			border-top: 1px solid var(--pj-line);
			padding-top: 40px;
		}

		/* 表 */
		.pj-table-wrap {
			overflow-x: auto;
			margin-bottom: 24px;
		}

		table {
			width: 100%;
			border-collapse: collapse;
			font-size: 15px;
			line-height: 1.7;

			th,
			td {
				border: 1px solid var(--pj-line);
				padding: 10px 14px;
				vertical-align: top;
				text-align: left;
			}

			th {
				background: var(--pj-head);
				font-weight: 700;
				white-space: nowrap;
				width: 9.5em;
			}
		}

		.pj-overview {
			min-width: 0;

			th {
				width: auto;
			}

			thead th {
				background: #3a4152;
				color: #fff;
			}

			td:first-child {
				font-weight: 700;
				white-space: nowrap;
			}
		}

		.pj-note {
			font-size: 13px;
			color: var(--pj-sub);
			margin-top: 8px;
		}

		.pj-repeat {
			background: var(--pj-accent-soft);
			border-radius: 10px;
			padding: 14px 18px;
			font-size: 15px;
		}

		/* 写真・カード */
		.pj-media {
			display: grid;
			grid-template-columns: 1fr;
			gap: 20px;
		}

		figure {
			margin: 0;

			img {
				width: 100%;
				border-radius: 8px;
				border: 1px solid var(--pj-line);
				background: var(--pj-panel);
			}

			figcaption {
				font-size: 14px;
				font-weight: 700;
				color: var(--pj-sub);
				margin-top: 8px;
			}
		}

		/* ワードクラウド */
		.pj-wc {
			figure img {
				border-radius: 8px;
			}
		}

		.pj-wc-info {
			display: grid;
			grid-template-columns: 1fr;
			gap: 16px;
			margin-top: 20px;

			dl {
				margin: 0;
				display: flex;

				/* grid-template-columns: 7em 1fr; */
				/* gap: 6px 12px; */
				font-size: 15px;
				width: 100%;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-bottom: 1rem;
			}

			dt {
				font-weight: 700;
				width: 27%;
			}

			dd {
				width: 70%;
				margin: 0;
			}
		}

		.pj-read {
			background: var(--pj-panel);
			border-radius: 10px;
			padding: 16px 20px;

			h4 {
				font-size: 15px;
				color: var(--pj-accent);
				margin-bottom: 6px;
			}

			ul {
				margin: 0;
				padding-left: 1.2em;
				font-size: 15px;
				list-style-type: disc;
				text-align: left;
				display: block;
			}

			li {
				text-align: left;
			}
		}

		/* 利用者・導入先の声 */
		.pj-points {
			display: grid;
			grid-template-columns: 1fr;
			gap: 16px;
			margin: 0 0 24px;
			padding: 0;
			list-style: none;

			li {
				background: var(--pj-panel);
				border-radius: 10px;
				padding: 18px 20px;
				display: flex;
				gap: 14px;
				align-items: flex-start;
			}

			strong {
				display: block;
				font-size: 17px;
				text-align: left;
			}

			span {
				font-size: 15px;
				text-align: left;
				justify-content: flex-start;
				margin-top: 0.5em;
display: flex;
				color: var(--pj-sub);

				&.pj-num {
					border-radius: 50%;
					background: var(--pj-accent);
					color: #fff;
					font-weight: 700;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 3.6rem;
					aspect-ratio: 1/1;
					display: flex;
					align-items: center;
					justify-content: center;

				}

			}
		}


		.pj-voices {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin: 0 0 32px;
			padding: 0;
			list-style: none;

			li {
				border: 1px solid var(--pj-line);
				border-radius: 999px;
				padding: 8px 18px;
				font-size: 15px;
				background: #fff;
			}
		}

		.pj-cta {
			text-align: center;
			border: 2px solid var(--pj-accent);
			border-radius: 12px;
			padding: 24px 16px;
			font-weight: 700;
			font-size: clamp(16px, 2.6vw, 18px);
			line-height: 1.8;
		}

		/* タブレット・PC */
		@media (min-width: 720px) {
			.pj-media {
				grid-template-columns: 1fr 1fr;
			}

			.pj-wc-info {
				grid-template-columns: 1fr 1fr;
			}

			.pj-points {
				grid-template-columns: repeat(3, 1fr);

				li {
					flex-direction: column;
				}
			}
		}

		/* スマートフォン */
		@media (max-width: 719px) {
			table {

				th,
				td {
					padding: 8px 10px;
					font-size: 14px;
				}

				th {
					white-space: normal;
					width: 6.5em;
				}
			}

			.pj-overview {
				min-width: 600px;
			}
		}
	}
}