@charset "utf-8";


/* スライドショー */
/* =========================================
			1. スライダー全体のコンテナ
========================================= */
.cs-manual-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.cs-manual-slider input[type="radio"] {display: none;}

/* =========================================
			2. スライド本体（横並びと移動の設定）
========================================= */
.cs-slider-viewport {
	width: 100%;
	overflow: hidden;
}

:root {
	/* スライド枚数 */
--count: 3;
}
.cs-slider-track {
	display: flex;
	/* width: 300%; スライド3枚分（100% × 3） */
	width: calc(100% * var(--count));
	height: 900px;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	
	height: calc(500vw / 12.4);
	min-height: 350px;
}

.cs-slide-item {
	width: 33.3333%; /* 300%のうちの3分の1 */
	width: calc(100% / var(--count));
	height: 100%;
}

.cs-slide-item img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
}

/* =========================================
			3. ラジオボタンの状態に応じたスライドの移動
========================================= */
#cs-slide-1:checked ~ .cs-slider-viewport .cs-slider-track {
				transform: translateX(0%);
}
#cs-slide-2:checked ~ .cs-slider-viewport .cs-slider-track {
				transform: translateX(calc(-100% / var(--count)));
}
#cs-slide-3:checked ~ .cs-slider-viewport .cs-slider-track {
				transform: translateX(calc(-100% / var(--count) * 2));
}

/* =========================================
			4. 左右の矢印ナビゲーション
========================================= */
.cs-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	/* background-color: rgb(0 0 0 / 10%); */
	color: #e9e9e9;
	border-radius: 0%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 4.2rem;
	cursor: pointer;
	transition: background-color 0.3s, opacity 0.3s;
	opacity: 0;
	pointer-events: none;
	z-index: 10;
	border-radius: 30px;
}

.cs-arrow:hover {
				background-color: rgba(0, 0, 0, 0.2);
				
}

.cs-arrow-prev { left: 20px; }
.cs-arrow-next { right: 20px; }

/* ラジオボタンの状態に応じて、対応する矢印だけを表示する */
#cs-slide-1:checked ~ .cs-arrow-nav .cs-nav-1,
#cs-slide-2:checked ~ .cs-arrow-nav .cs-nav-2,
#cs-slide-3:checked ~ .cs-arrow-nav .cs-nav-3 {
				opacity: 1;
				pointer-events: auto; /* クリックを有効化 */
}

/* =========================================
			5. 下部のドットナビゲーション
========================================= */
.cs-dot-nav {
				position: absolute;
				bottom: 16px;
				left: 0;
				width: 100%;
				display: flex;
				justify-content: center;
				gap: 12px;
				z-index: 10;
}

.cs-dot {
				width: 6px;
				height: 6px;
				background-color: #48455da6;
				border-radius: 50%;
				cursor: pointer;
				transition: background-color 0.3s, transform 0.3s;
}

.cs-dot:hover {
				background-color: #222;
}

/* ラジオボタンの状態に応じて、対応するドットの色を変える */
#cs-slide-1:checked ~ .cs-dot-nav .cs-dot:nth-child(1),
#cs-slide-2:checked ~ .cs-dot-nav .cs-dot:nth-child(2),
#cs-slide-3:checked ~ .cs-dot-nav .cs-dot:nth-child(3) {
				background-color: rgba(142, 142, 142, 0.5);
				transform: scale(1.2); /* アクティブなドットを少し大きくする */
}





#top .mv.new .copy {
				width: 400px;
				
				width: calc(400vw / 12.4);
}
.page .mv.new .copy h1{
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
}
#top .mv.new .copy h2{
	font-size: calc(48vw / 12.4);
	font-weight: normal;
	font-weight: bold;
}





/* .top_block .row{align-items: center;} */
.top_block .col{
	/* width: 50%; */
}
.top_block .col.col1{
	width: 40%;
}
.top_block .col.col2{
	width: 60%;
}
.top_block .col h2 {
				font-weight: bold;
				font-weight: normal;
				font-size: 2.8rem;
				line-height: 1.6;
				margin-bottom: 40px;
}
.top_block .col h2 span {
				font-size: 2.4rem;
}
.top_block .col p {
	line-height: 1.8;
}

.top_block figure img{
	width: 100%;
}

.top_block .row{
	gap: 20px;
}
.top_block .row.figbox{
	gap: 0;
}
.top_block .row.figbox img.pc{
	max-width: 320px;
	margin-top: 25px;
	
}
.top_block .row.figbox .menu{
	margin-left: -20px;
	min-width: 240px;
}

.top_block .row .menu li{
	margin-bottom: 0.8em;
}
.top_block .row .menu li:nth-child(2){
}

.top_block .row .menu li a{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
}
.top_block .row .menu li a:hover{
	/* background: #eee; */
}

.top_block .row .menu li a:hover h3,
.top_block .row .menu li a:hover h4,
.top_block .row .menu li a:hover p{
	color: var(--blue);
}

.top_block .row .menu li h3{
	color: #48455D;
	font-size: 2.0rem;
}
.top_block .row .menu li h4{
	color: #5A7397;
	font-size: 1.6rem;
}
.top_block .row .menu li p{
	color: #5A7397;
	font-size: 1.4rem;
	line-height: 1.0;
}


.top_function .function .box{
	margin-bottom: 60px;
}
.top_function .function h3{
	font-weight: 400;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.6;
	margin-bottom: 16px;
	padding-left: 24px;
	display: flex;
	justify-content: space-between;
	position: relative;
	display: flex;
}
.top_function .function h3 span{
	color: #48455D;
	font-size: 12px;
	font-size: 1.2rem;
}
.top_function .function h3:before{
	position: absolute;
	content: '';
	mask-position: center center;
	-webkit-mask-position: center center;
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	width: 18px;
	height: 18px;
	top: 4px;
	left: 0;
}

.function ul.row {
	gap: 8px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.function ul.row li{
	width: 24.3%;
	height: 5em;
	box-sizing: border-box;
	display: flex;
	background: #FFFFFF;
	border: 1px solid #BBBBBB;
	border-radius: 4px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.function ul.row li a,
.function ul.row li p{
	display: block;
	width: 100%;
	height: 100%;
	display: flex;
	gap: 0;
	justify-content: flex-start;
	align-items: center;
}
.function ul.row li a img,
.function ul.row li p img{
	width: 28px;
	height: 28px;
	padding: 10px;
}
.function ul.row li a span,
.function ul.row li p span{
	padding-right: 20px;
	color: #2E3130
}

.function ul.row li{
	position: relative;
}

.function ul.row li a:after{
	position: absolute;
	content: '';
	background: #BBBBBB;
	-webkit-mask-image: urlurl(../images/btn_arrow.svg);
	mask-image: url(../images/btn_arrow.svg);
	mask-position: center center;
	-webkit-mask-position: center center;
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	width: 24px;
	height: 24px;
	right: 0;
}

.function ul.row li a:hover{
	background: #ededed;
}


:root {
		--aiportal: #D24434;
		--agentx: #EB6EA5;
		--api: #00A73C;
		--shared: #595757;
		--sfa: #0099D9;
		--crm: #F08300;
		--setting: #595757;
		
}
.top_function .function .aiportal h3{
	border-bottom: 1px solid var(--aiportal);
	color: var(--aiportal);
}
.top_function .function .agentx h3{
	border-bottom: 1px solid var(--agentx);
	color: var(--agentx);
}
.top_function .function .api h3{
	border-bottom: 1px solid var(--api);
	color: var(--api);
}
.top_function .function .shared h3{
	border-bottom: 1px solid var(--shared);
	color: var(--shared);
}
.top_function .function .sfa h3{
	border-bottom: 1px solid var(--sfa);
	color: var(--sfa);
}
.top_function .function .crm h3{
	border-bottom: 1px solid var(--crm);
	color: var(--crm);
}
.top_function .function .setting h3{
	border-bottom: 1px solid var(--setting);
	color: var(--setting);
}

.top_function .function .aiportal h3:before{
-webkit-mask-image: url('../images/icon/icon_aiportal.svg');
mask-image: url('../images/icon/icon_aiportal.svg');
background: var(--aiportal);
}
.top_function .function .agentx h3:before{
-webkit-mask-image: url('../images/icon/icon_agentx.svg');
mask-image: url('../images/icon/icon_agentx.svg');
background: var(--agentx);
}
.top_function .function .api h3:before{
-webkit-mask-image: url('../images/icon/icon_api.svg');
mask-image: url('../images/icon/icon_api.svg');
background: var(--api);
}
.top_function .function .shared h3:before{
-webkit-mask-image: url('../images/icon/icon_shared.svg');
mask-image: url('../images/icon/icon_shared.svg');
background: var(--shared);
}
.top_function .function .sfa h3:before{
-webkit-mask-image: url('../images/icon/icon_sfa.svg');
mask-image: url('../images/icon/icon_sfa.svg');
background: var(--sfa);
}
.top_function .function .crm h3:before{
-webkit-mask-image: url('../images/icon/icon_crm.svg');
mask-image: url('../images/icon/icon_crm.svg');
background: var(--crm);
}
.top_function .function .setting h3:before{
-webkit-mask-image: url('../images/icon/icon_setting.svg');
mask-image: url('../images/icon/icon_setting.svg');
background: var(--setting);
}

.top_function .function .aiportal li a:after{
	background: var(--aiportal);}
.top_function .function .agentx li a:after{
	background: var(--agentx);}
	.top_function .function .api li a:after{
		background: var(--api);}
	.top_function .function .shared li a:after{
		background: var(--shared);}
		.top_function .function .sfa li a:after{
			background: var(--sfa);}
			.top_function .function .crm li a:after{
				background: var(--crm);}
				.top_function .function .setting li a:after{
					background: var(--setting);}


@media screen and (max-width: 768px) {
	
	.cs-arrow-nav{
		display: none;
	}
	.page #top .mv .copy h2 {
		font-size: calc(68vw / 7.68);
	}
	
	.page .inner_block .contents{
		padding: 40px 4%;
		margin: 0 0 4% 0;
	}
	
	.top_block figure {
					margin: 1em 0;
	}
	.cs-slider-track {
		/* max-height: 600px; */
		height: calc(720vw / 3.75);
		background: #fff;
	}
	
	#top .mv.new .copy {
		width: 100%;
	}
	
	.top_block .row {
			flex-direction: column;
	}
	.top_block .col.col1,
	.top_block .col.col2,
	.top_block .col {
					width: 100%;
	}
	

	
	
	.top_block .col h2 {
					margin-bottom: 32px;
					font-size: calc(48vw / 7.68);
	}
	.top_block .col h2 span {
					font-size: calc(48vw / 7.68);
	}
	.top_function .function h3 {
		flex-direction: column;
		font-size: 2.0rem;
	}
	.function ul.row{
		flex-direction: column;
	}
	.function ul.row li {
		width: 100%;
	}
	.top_function .function h3 span {
	color: #48455D;
	font-size: 14px;
	font-size: 1.4rem;
}



	.top_block .row .menu{
		/* display: none; */
	}
	.top_block .row.figbox {
					flex-direction: row;
	}
	.top_block .row.figbox .col:nth-child(1) {width: 60%;}
	.top_block .row.figbox .col:nth-child(2) {width: 40%;}
	
	.top_block .row.figbox img.pc {
				width: 100%;
					margin-top: 20px;
	}
	.top_block .row.figbox .menu {
					margin-left: -10px;
					min-width: auto;
	}
	
	.top_block .row .menu li a{
		/* display: block;
		border: 1px solid #009CDB;
		border-radius: 6px;
		padding: 6px;
		margin-bottom: 1em; */
	}
	
	.top_block .row .menu li h3{
		font-size: calc(26vw / 7.68);
	}
	.top_block .row .menu li h4{
		font-size: calc(20vw / 7.68);
	}
	.top_block .row .menu li p{
		font-size: calc(16vw / 7.68);
	}

	
}