/**
/solution/tool-integration/
*/

 /* main visual */
.mainv {
	position: relative;
    margin-top: var(--header-height);
	padding : 32px 0 48px;
	width: 100%;
    overflow: hidden;
    background-color: #10212C;
    background-image: url(/web/jp/channel/solution/tool-integration/img/mainv_bg.png);
    background-repeat: no-repeat;
    background-position: center left 75%;
    background-size: cover;
	.container {
		display: flex;
		flex-flow: column;
		align-items: center;
		.mainv-content {
			display: contents;
			.mainv-title {
				display: flex;
				flex-flow: column;
				align-items: flex-start;
				max-width: 480px;
				.subtitle {
					display: inline-block;
					margin-bottom: 1em;
					padding: .75em 2em;
					background-color: #10212C;
					border: 1px solid var(--color-Text-White);
					border-radius: 999px;
					color: var(--color-Text-White);
					font-size: 16px;
					font-weight: bold;
					line-height: 1;
					letter-spacing: .05em;
				}
				h1 {
					font-size: clamp(24px, 3.8vw, 48px);
					font-weight: 700;
					line-height: 1.5;
					letter-spacing: .05em;
					color: var(--color-Text-White);
				}
				.lead {
					margin-top: 24px;
					p {
						color: var(--color-Text-White);
						font-size: 14px;
						font-weight: bold;
						line-height: 1.75;
					}
				}
			}
			.cta-button {
				order: 3;
				margin-top: 32px;
				max-width: 368px;
				p {
					.btn {
						font-size: 18px;
						font-weight: bold;
						line-height: 1.5;
						letter-spacing: .05em;
					}
				}
			}
		}
		.mainv-img {
			margin-top: 24px;
			width: min(calc(320 / 390 * 100vw), 480px);
			order: 2;
		}
	}
}
@media (min-width: 768px) {
	.mainv {
		.container {
			.mainv-content {
				.mainv-title {
					max-width: 640px;
					.subtitle {
						font-size: 18px;
					}
				}
			}
		}
	}
}
@media (min-width: 1024px) {
	.mainv {
		padding-top : 48px;
    	background-position: center center;
		.container {
			flex-flow: row;
			align-items: center;
			justify-content: flex-start;
			.mainv-content {
				display: flex;
				flex-flow: column;
				align-items: flex-start;
				width: 50%;
				.mainv-title {
					max-width: inherit;
					.lead {
						margin-top: 32px;
					}
				}
				.cta-button {
					margin: 48px auto 0 0;
					order: inherit;
				}
				.lead {
					margin-top: 32px;
					padding-right: 24px;
					padding-left: 24px;
					border-left: 1px solid var(--color-Text-White);
				}
			}
			.mainv-img {
				position: absolute;
				margin-top: 0;
				width: min(calc(620 / 1200 * 100vw), 620px);
				left: 52%;
				top: 50%;
				transform: translateY(-50%);
				max-width: inherit;
				order: inherit
			}
		}
	}
}

/* section merit */
.sec-merit {
	background-color: var(--color-Background-Secondary);
	.merit-items {
		display: flex;
		flex-flow: row wrap;
		gap: 16px;
		.merit-item {
			width:  100%;
			padding: 16px;
			background-color: var(--color-Text-White);
			h3 {
				display: flex;
				flex-flow: row wrap;
				align-items: center;
				gap: 12px;
				font-size: 14px;
				font-weight: bold;
				line-height: 1.5;
				figure {
					width: 48px;
				}
			}
			.text {
				flex: 1;
				margin-top: 16px;
				font-size: 14px;
				line-height: 1.75;
			}
		}
	}
}
@media (min-width: 600px) {
	.sec-merit {
		.merit-items {
			gap: 12px;
			.merit-item {
				width: calc(50% - 12px * 1 / 2);
				padding: 24px;
				.text {
					margin-top: 24px;
				}
			}
		}
	}
}
@media (min-width: 1024px) {
	.sec-merit {
		.merit-items {
			.merit-item {
				width: calc(25% - 12px * 3 / 4);
			}
		}
	}
}
@media (min-width: 1200px) {
	.sec-merit {
		.merit-items {
			.merit-item {
				h3 {
					gap: 16px;
					font-size: 16px;
				}
			}
		}
	}
}

/* section integration */
.sec-integration {
	background-color: var(--color-Background-Secondary);
	padding-top: 0;
	.child-tab {
		.list-items {
			display: flex;
			margin: -1px;
			flex-flow: row wrap;
			justify-content: center;
			align-items: stretch;
			.list-item {
				display: flex;
				width: 100%;
				padding: 1px;
				flex: 1;
				justify-content: center;
				align-items: stretch;
				a {
					display: flex;
					flex-flow: row wrap;
					justify-content: center;
					align-items: center;
					width: 100%;
					min-height: 60px;
					padding: 10px;
					border: 0;
					outline: 0;
					color: var(--color-Text-Primary);
					font-weight: bold;
					text-decoration: none;
					text-align: center;
					background-color: #E6E6E6;
				}
				a:hover,
				a:focus,
				a:active{
					opacity: 1;
					color: var(--color-Text-White);
					background-color: var(--color-Theme-Primary);
				}
				a.is-current,
				button.is-current {
					opacity: 1;
					color: var(--color-Text-White);
					background-color: var(--color-Theme-Primary);
					cursor: default;
				}
			}
		}
	}
	.sec-tab-contents {
		display: none;
		padding: 20px 16px 16px;
		background-color: var(--color-Background-Primary);
		&.is-current {
			display: block;
		}
		.tab-contents-heading {
			margin-bottom: 24px;
			text-align: center;
			h2 {
				display: flex;
				flex-flow: row wrap;
				align-items: center;
				justify-content: center;
				gap: 12px;
				font-size: min(calc(24 / 390 * 100vw), 24px);
				line-height: 1.5;
				figure {
					/*width: 124px; */
					width: min(calc(96 / 390 * 100vw), 96px);
				}
			}
			p {
				margin-top: 12px;
				font-size: 14px;
				line-height: 1.75;
				text-align: left;
			}
		}
		.tab-contents-body {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 24px;
			.tab-contents-image,
			.tab-contents-text {
				width: 100%;
				max-width: 600px;
			}
			.tab-contents-image {
				text-align: center;
				figure {
					background-color: var(--color-Background-Secondary);
					padding: 20px 16px 16px;
					figcaption {
						margin-top: 16px;
						font-size: 12px;
						font-weight: bold;
						line-height: 1.5;
						text-align: center;
					}
					img {
						width: 100%;
					}
				}
				.note {
					margin-top: 10px;
					color:var(--color-Gray-Dark);
					font-size: 10px;
					line-height: 1.5;
					text-align: right;
				}
			}
			.tab-contents-text {
				.discription {
					padding: 16px;
					border: 1px solid var(--color-Theme-Primary);
					border-radius: 8px;
					p {
						font-size: 14px;
						line-height: 1.75;
						.font-bold {
							font-weight: bold;
						}
					}
				}
				h3 {
					margin-bottom: 12px;
					font-size: 16px;
				}
				.tab-contens-list {
					margin: 0 0 16px 1.5em;
					list-style-type: disc;
					li {
						font-size: 14px;
						line-height: 1.5;
						& + li {
							margin-top: .5em;
						}
					}
				}
			}
		}
	}
}
@media (min-width: 768px) {
	.sec-integration {
		.sec-tab-contents {
			padding: 40px;
			.tab-contents-heading {
				margin-bottom: 40px;
				h2 {
					font-size: min(calc(32 / 1200 * 100vw), 32px);
					figure {
						width: 124px;
					}
				}
				p {
					width: fit-content;
					margin-inline: auto;
					text-align: left;
				}
			}
			.tab-contents-body {
				.tab-contents-image {
					figure {
						padding: 24px 20px 20px;
					}
				}
				.tab-contents-text {
					.discription {
						padding: 20px;
					}
				}
			}
		}
	}
}
@media (min-width: 1024px) {
	.sec-integration {
		.sec-tab-contents {
			.tab-contents-body {
				align-items: center;
				.tab-contents-image,
				.tab-contents-text {
					width: calc(50% - 24px * 1 / 2);
				}
			}
		}
	}
}

/* section cta-solution */
.sec-cta-solution {
	&::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -2;
		width: 100%;
		height: 100%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-image: url(/web/jp/channel/solution/tool-integration/img/cta_bg.png);
	}
	.cta-wrap {
		max-width: 1024px;
		margin-inline: auto;
		.cta-items {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 48px;
			.cta-item {
				position: relative;
				width: 100%;
				max-width: 400px;
				padding: 40px 20px 20px;
				background-color: var(--color-Background-Secondary);
				border-radius: 8px;
				.note {
					margin-top: 12px;
					font-size: 12px;
					line-height: 1.5;
					width: fit-content;
					margin-inline: auto;
				}
				.icon-cta {
					position: absolute;
					width: 64px;
					top: -24px;
					left: 50%;
					transform: translateX(-50%);
					img {
						aspect-ratio: 1/1;
					}
				}
				.cta-button {
					margin-top: 0;
					p {
						&::before {
							content: none;
						}
						.btn {
							font-size: 16px;
						}
					}
				}
			}
		}
	}
}
@media (min-width: 768px) {
	.sec-cta-solution  {
		.cta-wrap {
			padding: 56px 0 20px;
			border-radius: 16px;
			background-color: var(--color-Background-Secondary);
			.cta-items {
				justify-content: flex-start;
				gap: 0;
				background-color: var(--color-Background-Secondary);
				.cta-item {
					position: relative;
					width: 33.333334%;
					padding: 0 24px;
					border-radius: 0;
					& + .cta-item {
						border-left: 1px dotted var(--color-Gray-Dark);
					}
					.icon-cta {
						width: 80px;
						top: -80px;
					}
					.cta-button {
						margin-top: 0;
						p {
							&::before {
								content: none;
							}
							.btn {
								font-size: 16px;
							}
						}
					}
				}
			}
		}
	}
}