/* ------------------
block
-------------------- */

.block {
	padding-inline: 20px;
	margin-bottom: 60px;
	scroll-margin-top: 90px;
}

.block .title-set {
	margin-bottom: 20px;
}

.block .title-set h2 {
	padding: 16px;
	margin-bottom: 20px;
	font-size: calc(2.4rem / 1.6);
	font-weight: bold;
	line-height: 1.5;
	color: #fff;
	text-align: center;
	border-radius: 10px;
}

.block.industry .title-set h2 {
	background: linear-gradient(135deg, #b57200, #ecad3e);
}

.block.workplace .title-set h2 {
	background: linear-gradient(135deg, #004181, #2685df);
}

.block.print .title-set h2 {
	background: linear-gradient(135deg, #007177, #009cb5);
}

.block.solutions .title-set h2 {
	background: linear-gradient(135deg, #a94a8f, #e253cb);
}

.block.functions .title-set h2 {
	background: linear-gradient(135deg, #384c4c, #869494);
}

.block .title-set p {
	font-size: calc(2rem / 1.6);
	font-weight: bold;
	line-height: 1.6;
}

@media (width >= 751px) {
	/* PC */

	.block {
		max-width: 1360px;
		padding-inline: 70px;
		margin: 0 auto 160px;
		scroll-margin-top: 150px;
	}

	.block.workplace {
		margin-bottom: 80px;
	}

	.block.functions {
		margin-bottom: 0;
	}

	.block .title-set {
		display: flex;
		gap: 0 30px;
		align-items: center;
	}

	.block .title-set h2 {
		width: calc(588 / 1360 * 100%);
		padding: 16px;
		margin-bottom: 0;
		font-size: calc(3.2rem / 1.6);
		border-radius: 16px;
	}

	.block .title-set p {
		flex: 1;
		font-size: calc(2.4rem / 1.6);
		line-height: 1.33;
	}
} /* @media */

/* ------------------
intro
-------------------- */

.block.intro {
	padding-top: 50px;
}

.block.intro .text {
	margin-bottom: 10px;
	font-size: calc(1.8rem / 1.6);
}

.block.intro .text strong {
	font-weight: bold;
}

.block.intro .title {
	margin-bottom: 20px;
	font-size: calc(2.4rem / 1.6);
	font-weight: bold;
	line-height: 1.5;
	color: var(--blue);
}

@media (width >= 751px) {
	/* PC */

	.block.intro {
		padding-top: 80px;
	}

	.block.intro .text {
		margin-bottom: 20px;
	}

	.block.intro .title {
		margin-bottom: 100px;
	}
} /* @media */

/* ------------------
category-set
-------------------- */

.category-set {
	position: relative;
	margin-inline: 20px;
}

.category-set::before {
	position: absolute;
	top: calc(50% - 1.5px);
	left: 0;
	width: 100%;
	height: 3px;
	content: "";
	background: linear-gradient(90deg, #3c86e2, #288577);
}

.category-set p {
	position: relative;
	margin-bottom: 14px;
	font-size: calc(1.4rem / 1.6);
	text-align: center;
}

.category-set p::before,
.category-set p::after {
	position: absolute;
	top: calc(50% - 10px);
	width: 3px;
	height: 20px;
	content: "";
}

.category-set p::before {
	left: 0;
	background: #3c86e2;
}

.category-set p::after {
	right: 0;
	background: #288577;
}

.category-set p span {
	display: inline-block;
	padding-inline: 10px;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(90deg, #3594c8, #339bb2) border-box;
	border: 3px solid transparent;
	border-radius: 8px;
}

@media (width >= 751px) {
	/* PC */

	.category-set {
		margin-top: -47px;
	}

	.category-set p {
		letter-spacing: 0.1em;
	}

	.category-set p span {
		padding-inline: 20px;
	}

	.category-set-wrap {
		position: relative;
		max-width: 1500px;
		margin-inline: auto;
	}

	.category-set-wrap .category-set-pc {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
	}

	.category-set-wrap .category-set {
		height: 100%;
		margin-top: 0;
	}

	.category-set-wrap .category-set.is-sp {
		display: none;
	}

	.category-set-wrap .category-set::before {
		top: 0;
		left: 17px;
		width: 4px;
		height: 100%;
		background: linear-gradient(0deg, #288577, #3c86e2);
	}

	.category-set-wrap .category-set p {
		display: flex;
		align-items: center;
		height: 100%;
		margin-bottom: 0;
		font-size: calc(2rem / 1.6);
		line-height: 1.5;
		letter-spacing: 0.25em;
	}

	.category-set-wrap .category-set p::before,
	.category-set-wrap .category-set p::after {
		top: auto;
		width: 28px;
		height: 4px;
	}

	.category-set-wrap .category-set p::before {
		top: 0;
		left: 5px;
	}

	.category-set-wrap .category-set p::after {
		right: 5px;
		bottom: 0;
	}

	.category-set-wrap .category-set p span {
		background:
			linear-gradient(#fff, #fff) padding-box,
			linear-gradient(0deg, #3496c4, #339aba) border-box;
		border: 4px solid transparent;
		border-radius: 12px;
		writing-mode: vertical-rl;
	}
} /* @media */

/* ------------------
page-link
-------------------- */

.page-link {
	margin-bottom: 10px;
}

.page-link li + li {
	margin-top: 24px;
}

.page-link li a {
	position: relative;
	display: block;
	padding: 14px 10px 35px;
	font-size: calc(1.8rem / 1.6);
	font-weight: bold;
	line-height: calc(27 / 18);
	color: #fff;
	text-align: center;
	border-radius: 8px;
}

.page-link li .industry {
	background: linear-gradient(135deg, #b57200, #ecad3e);
}

.page-link li .workplace {
	background: linear-gradient(135deg, #004181, #2685df);
}

.page-link li .print {
	background: linear-gradient(135deg, #007177, #009cb5);
}

.page-link li .solutions {
	background: linear-gradient(135deg, #a94a8f, #e253cb);
}

.page-link li .functions {
	background: linear-gradient(135deg, #384c4c, #869494);
}

.page-link li a::after {
	position: absolute;
	bottom: 12px;
	left: calc(50% - 10px);
	width: 20px;
	height: 18px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	content: "";
	background: #fff;
}

.page-link .category-set {
	margin-inline: 0;
}

.page-link li ul {
	display: flex;
	gap: 0 9px;
}

.page-link li ul li {
	width: 100%;
}

.page-link li ul li + li {
	margin-top: 0;
}

.page-link li ul li a {
	padding-inline: 5px;
	font-size: calc(1.7rem / 1.6);
}

@media (width >= 751px) {
	/* PC */

	.page-link {
		display: flex;
		gap: 0 20px;
		margin-bottom: 174px;
	}

	.page-link > li {
		width: 23%;
	}

	.page-link > li:nth-child(2) {
		width: 52%;
	}

	.page-link li + li {
		margin-top: 0;
	}

	.page-link li a {
		padding: 7px 5px 27px;
		font-size: calc(1.6rem / 1.6);
		letter-spacing: 0;
	}

	.page-link li a::after {
		bottom: 8px;
		left: calc(50% - 7px);
		width: 16px;
		height: 14px;
	}

	.page-link li ul {
		gap: 0 20px;
	}

	.page-link li ul li a {
		font-size: calc(1.6rem / 1.6);
	}
} /* @media */

/* ------------------
inner item
-------------------- */

.block .inner {
	padding: 15px;
}

.block.industry .inner {
	background: linear-gradient(90deg, #fcf0dc, #fefaf6);
}

.block.workplace .inner {
	background: linear-gradient(90deg, #dfebf7, #fafbfc);
}

.block.print .inner {
	background: linear-gradient(90deg, #cfebed, #f1f8f9);
}

.block.solutions .inner {
	background: linear-gradient(90deg, #f4ddf1, #fcf6fe);
}

.block.functions .inner {
	background: linear-gradient(90deg, #d4d6d6, #f2f3f2);
}

.block .inner.no-bg {
	background: transparent;
}

.block .item-wrap {
	margin-bottom: 36px;
}

.block .item {
	padding: 14px;
	background: #fff;
	box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
}

.block .item + .item {
	margin-top: 18px;
}

.block .item .set {
	padding-top: 20px;
}

.block .item h3 {
	position: relative;
	margin-bottom: 20px;
	font-size: calc(1.8rem / 1.6);
	font-weight: bold;
	line-height: 1.5;
}

.block .item h3::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	content: "";
}

.block.industry .item h3::after {
	background: linear-gradient(90deg, #b57200, #ecad3e);
}

.block.workplace .item h3::after {
	background: linear-gradient(90deg, #2685df, #004181);
}

.block.print .item h3::after {
	background: linear-gradient(90deg, #009cb5, #007177);
}

.block.solutions .item h3::after {
	background: linear-gradient(90deg, #a94a8f, #e253cb);
}

.block.functions .item h3::after {
	background: linear-gradient(90deg, #869494, #384c4c);
}

.block .item .no-detail h3 {
	margin-bottom: 0;
}

.block .item .no-detail h3 + h3 {
	margin-top: 20px;
}

.block .item h4 {
	font-size: calc(1.6rem / 1.6);
	font-weight: bold;
	line-height: 1.5;
}

.block .item p {
	margin-bottom: 12px;
	font-size: calc(1.6rem / 1.6);
	line-height: 1.5;
}

.block .item a {
	font-size: calc(1.6rem / 1.6);
	line-height: 1.5;
	border-bottom: 1px solid;
}

.block.industry .item a {
	border-bottom-color: #b59000;
}

.block.workplace .item a {
	border-bottom-color: #004181;
}

.block.print .item a {
	border-bottom-color: #007177;
}

.block.solutions .item a {
	border-bottom-color: #a94a8f;
}

.block.functions .item a {
	border-bottom-color: #384c4c;
}

.block .item a[target="_blank"]::after {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 0 4px 4px;
	vertical-align: middle;
	content: "";
	background: url(/shared/corporate_opt/images/new_window_icon2024.svg)
		no-repeat 0 0;
}

@media (width >= 751px) {
	/* PC */

	.block .inner {
		display: flex;
		gap: 0 50px;
		align-items: center;
		padding: 30px 0 30px 30px;
	}

	.block.industry .inner {
		background: linear-gradient(90deg, #fcf0dc, #fff);
	}

	.block.workplace .inner {
		background: linear-gradient(90deg, #dcebfa, #fff);
	}

	.block.print .inner {
		background: linear-gradient(90deg, #c8ecef, #fff);
	}

	.block.solutions .inner {
		background: linear-gradient(90deg, #f9dcf4, #fff);
	}

	.block.functions .inner {
		background: linear-gradient(90deg, #d2d7d7, #fff);
	}

	.block .inner.no-bg {
		padding-bottom: 0;
		background: transparent;
	}

	.block .inner.no-bg .item {
		border: 1px solid #f2f2f2;
	}

	.block .item-wrap {
		width: calc(814 / 1330 * 100%);
		margin-bottom: 0;
	}

	.block .item {
		display: flex;
		gap: 0 14px;
		align-items: start;
		padding: 8px;
		box-shadow: 6px 6px 3px rgb(0 0 0 / 16%);
	}

	.block .item + .item {
		margin-top: 28px;
	}

	.block .item img {
		width: calc(368 / 814 * 100%);
	}

	.block .item .set {
		flex: 1;
		padding-top: 0;
	}

	.block .item h3 {
		padding-bottom: 5px;
		margin-right: calc(70 / 416 * 100%);
		font-size: calc(2rem / 1.6);
	}

	.block .item h3::after {
		height: 3px;
	}

	.block .item .no-detail h3 + h3 {
		margin-top: 10px;
	}

	.block .item p {
		margin-bottom: 15px;
	}
} /* @media */

@media (width <= 1023px) and (width >= 751px) {
	/* TABLET */

	.block .inner {
		display: block;
		padding: 20px;
	}

	.block .item-wrap {
		width: auto;
		margin-bottom: 40px;
	}
} /* @media */

/* ------------------
feature
-------------------- */

.block .feature h3 {
	position: relative;
	padding-top: 16px;
	margin-bottom: 16px;
	font-size: calc(2rem / 1.6);
	font-weight: bold;
	line-height: 1.5;
}

.block .feature h3::before,
.block .feature h3::after {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
}

.block .feature h3::before {
	width: 100%;
	height: 1px;
}

.block .feature h3::after {
	width: 50%;
	height: 8px;
}

.block.industry .feature h3::before,
.block.industry .feature h3::after {
	background: #b57200;
}

.block.workplace .feature h3::before,
.block.workplace .feature h3::after {
	background: #004181;
}

.block.print .feature h3::before,
.block.print .feature h3::after {
	background: #007177;
}

.block.solutions .feature h3::before,
.block.solutions .feature h3::after {
	background: #a94a8f;
}

.block.functions .feature h3::before,
.block.functions .feature h3::after {
	background: #384c4c;
}

.block .feature h4 {
	margin-bottom: 10px;
	font-size: calc(1.8rem / 1.6);
	font-weight: bold;
	line-height: 1.5;
}

.block.industry .feature h4 {
	color: #b57200;
}

.block.workplace .feature h4 {
	color: #004181;
}

.block.print .feature h4 {
	color: #007177;
}

.block.solutions .feature h4 {
	color: #a94a8f;
}

.block.functions .feature h4 {
	color: #384c4c;
}

.block .feature ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.block .feature ul li a {
	display: block;
	font-size: calc(1.6rem / 1.6);
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.block .feature ul li a img {
	display: block;
	margin-bottom: 10px;
}

.block .feature ul li a span {
	box-decoration-break: clone;
}

.block.industry .feature ul li a span {
	background: linear-gradient(#b57200, #b57200) 0 100% / 100% 1px no-repeat;
}

.block.workplace .feature ul li a span {
	background: linear-gradient(#004181, #004181) 0 100% / 100% 1px no-repeat;
}

.block.print .feature ul li a span {
	background: linear-gradient(#007177, #007177) 0 100% / 100% 1px no-repeat;
}

.block.solutions .feature ul li a span {
	background: linear-gradient(#a94a8f, #a94a8f) 0 100% / 100% 1px no-repeat;
}

.block.functions .feature ul li a span {
	background: linear-gradient(#384c4c, #384c4c) 0 100% / 100% 1px no-repeat;
}

.block .feature ul li a[target="_blank"] span::after {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 0 4px 4px;
	vertical-align: middle;
	content: "";
	background: url(/shared/corporate_opt/images/new_window_icon2024.svg)
		no-repeat 0 0;
}

@media (width >= 751px) {
	/* PC */

	.block .feature {
		flex: 1;
	}

	.block .feature ul {
		gap: 28px;
		max-width: 408px;
	}
} /* @media */