/**
 * /channel/
   /channel/solution/tool-integration/
   /channel/solution/gen-ai/
 */
 :root {
    --color-Background-Primary: #FFFFFF;
    --color-Background-Secondary: #F5F5F5;
    --color-Text-Primary: #202E30;
    --color-Text-White: #FFFFFF;
    --color-Theme-Primary: #80A81B;
    --color-Theme-Light: /*#B7CD7C*/#E9F7DD;
    --color-Accent-Primary: #FFA81B;
    --color-Accent-Secondary: #FFDB1B;
	--color-Design01: #51999E;
	--color-Design02: #F57F7F;
	--color-Design03: #ADC333;
	--color-Design04: #398CBD;
    --color-Gray-Dark: #676E6E;
    --color-Gray-Medium: #BFBFBF;
    --color-Gray-Light: #EDEEEE;

    --section-padding: 64px;
    @media (min-width: 768px) {
        --section-padding: 80px;
    }
}
.l-main {
	line-height: 1.0;
}
.topsp-only {
	display: block;
}
.toppc-only {
	display: none;
}
@media (min-width: 768px) {
	.topsp-only {
		display: none;
	}
	.toppc-only {
		display: block;
	}
}
figure {
	margin: 0;
	padding: 0;
}
section {
	position: relative;
	padding: var(--section-padding) 0;
}
.container {
    position: relative;
	width: calc(100% - 40px);
	max-width: 1200px;
	margin: 0 auto;
}
@media (min-width: 768px) {
	.container {
		width: calc(100% - 64px);
	}
}
@media (min-width: 1024px) {
	.container {
		width: calc(100% - 96px);
	}
}
.child-content + .child-content {
	margin-top: 48px;
}
@media (min-width: 768px) {
	.child-content + .child-content {
		margin-top: 64px;
	}
}

/* button */
.cta-button {
	margin: 48px auto 0;
	width: 100%;
	max-width: 480px;
	p {
		position: relative;
		.btn {
			font-size: clamp(18px, 2.5vw, 24px);
			font-weight: bold;
			line-height: 1.5;
			letter-spacing: .05em;
		}
	}
}
/* button */
.more-button {
	margin-top: 48px;
	margin-inline: auto;
	max-width: 480px;
	.btn {
		background-color: var(--color-Text-Primary);
		color: var(--color-Text-White);
		font-size: 18px;
		font-weight: bold;
		line-height: 1.5;
		&:hover {
			color: var(--color-Text-Primary);
			background-color: var(--color-Text-White);
		}
	}
	.btn-icon-self:hover::after {
		background-image: url(/web/jp/channel/img/icon_self_black.png);
	}
	.btn-icon-blank:hover::after {
		background-image: url(/web/jp/channel/img/icon_blank_black.png);
	}
}
.function-button {
	.btn {
		width: 190px;
		height: 48px;
		background-color: var(--color-Text-Primary);
		color: var(--color-Text-White);
		font-size: 14px;
		font-weight: bold;
		&:hover {
			color: var(--color-Text-Primary);
			background-color: var(--color-Text-White);
			&::after {
			background-image: url(/web/jp/channel/img/icon_self_black.png);
			}
		}
	}
}
.color-theme {
	color: var(--color-Theme-Primary);
}
.color-accent {
	color: var(--color-Accent-Primary);
}
.text-band {
	display: inline-block;
	padding: 0 .25em;
	background-color: var(--color-Theme-Primary);
	color: var(--color-Text-White);
}
.text-dot {
	padding-top: 0.4em;
	background-repeat: repeat-x;
	background-position: left top;
	background-size: 1.0em .20em;
	background-image: radial-gradient(circle at center, var(--color-Text-Primary) 20%, transparent 20%);
	font-weight: 700;
}
.text-dot.color-theme {
	background-image: radial-gradient(circle at center, var(--color-Theme-Primary) 20%, transparent 20%);
}
.text-dot.color-white {
	background-image: radial-gradient(circle at center, var(--color-Text-White) 20%, transparent 20%);
}

/* heading h2 */
.common-new-heading {
	margin-bottom: 2em;
	font-size: min(calc(24 / 390 * 100vw), 24px);
	line-height: 1.5;
	text-align: center;
}
@media (min-width: 768px) {
	.common-new-heading {
		font-size: min(calc(32 / 1200 * 100vw), 32px);
	}
}
.common-new-heading-line {
    position: relative;
    margin-inline: auto;
	width: fit-content;
    padding-bottom: 0.5em;
    border-bottom: 3px solid var(--color-Theme-Primary);
}
.common-new-heading-line::after {
    content: "";
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 16px 0 16px;
    border-color: var(--color-Theme-Primary) transparent transparent transparent;
}

/* hedding h3 */
.child-heading {
	border-bottom: 1px solid #E2E2E2;
	text-align: center;
	margin: 0 auto 32px auto;
}
.child-heading span {
	display: inline-block;
	position: relative;
	padding: 0 0 8px 0;
	color: var(--color-Text-Primary);
	font-size: min(calc(18 / 390 * 100vw), 18px);
	font-weight: 700;
}
.child-heading span::after {
	content: "";
	width: 100%;
	height: 3px;
	position: absolute;
	bottom: -2px;
	left: 50%;
	transform: translate(-50%, 0);
	background-color: var(--color-Theme-Primary);
	z-index: 1;
}
@media (min-width: 767px) {
	.child-heading {
		margin-bottom: 48px;
	}
	.child-heading span {
		font-size: min(calc(24 / 1200 * 100vw), 24px);
	}
}