@charset "utf-8";
/*-------------------
cta_btn_top
-------------------*/
.cta_btn_top {
    position: relative;
    display: flex;
	flex-flow: row wrap;
    align-items: center;
    justify-content: center;
	gap: min(calc(14 / 390 * 100vw), 18px) ;
    width: 100%;
	padding: min(calc(14 / 390 * 100vw), 18px) min(calc(18 / 390 * 100vw), 20px) min(calc(14 / 390 * 100vw), 18px) min(calc(14 / 390 * 100vw), 18px);
    background-color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    border-radius: 999px;
    transform: translate(0, 0);
    transition: .3s;
	.free {
		width: min(calc(50 / 390 * 100vw), 56px);
		aspect-ratio: 1 / 1;
		background-color: var(--color-wh);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: var(--color-secondary);
		font-size: min(calc(16 / 390 * 100vw), 16px);
		font-weight: bold;
	}
	.text {
		display: flex;
		flex-flow: column;
		align-items: center;
		gap: 8px;
		position: relative;
		padding-right: min(calc(32 / 390 * 100vw), 32px);
		.sub_text {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 0;
			color: var(--color-tertiary);
			font-size: min(calc(14 / 390 * 100vw), 14px);
			font-weight: 700;
			line-height: 1.25;
			&::before,
			&::after {
				content: "";
				height: 2px;
				width: min(calc(16 / 390 * 100vw), 16px);
				background-color: var(--color-tertiary);
				border-radius: 3px;
			}
			&::before {
				transform: rotate(60deg);
			}
			&::after {
				transform: rotate(-60deg);
			}
		}
		.main_text {
			color: var(--color-wh);
			font-size: min(calc(18 / 390 * 100vw), 18px);
			font-weight: 700;
			line-height: 1;
    		position: relative;
		}
		&::before {
			content: '';
			position: absolute;
			bottom: 0;
			right: 0;
			width: min(calc(24 / 390 * 100vw), 24px);
			aspect-ratio: 30 / 18;
			background-image: url(/ai-ocr/img/top/icon_arrow_down_yellow.svg);
			background-size: cover;
		}
	}
	&:hover {
		background-color: #809BD3;
    	border-color: #809BD3;
		transform: translate(8px, 8px);
	}
}
@media screen and (min-width:768px) {
	.cta_btn_top {
		gap: 20px;
		padding: 16px 20px 16px 16px;
		.free {
			width: 56px;
		}
		.text {
			gap: 12px;
			padding-right: 40px;
			.sub_text {
				font-size: 14px;
				&::before,
				&::after {
					width: 18px;
				}
				&::before {
					transform: rotate(60deg);
				}
				&::after {
					transform: rotate(-60deg);
				}
			}
			.main_text {
				font-size: 20px;
			}
			&::before {
				width: 30px;
			}
		}
	}
}
/*---------------------------------
btn
---------------------------------*/
.transition_btn {
	width: 100%;
    max-width: 400px;
    margin: 0 auto;
	background-color: var(--color-wh);
	border: 1px solid var(--color-primary);
	box-shadow: 8px 8px 0 rgba(var(--color-primary-rgb), .1);
    border-radius: 9999px;
    text-align: center;
    transform: translate(0, 0);
    transition: .3s;
	a {
		display: inline-block;
		width: 100%;
		height: 100%;
		padding: 20px 10px;
	}
	p {
		color: var(--color-primary);
		font-size: 1.6rem;
		font-weight: 600;
	}
	&:hover {
		background-color: var(--color-primary);
		border: none;
		box-shadow: none;
		transform: translate(4px, 4px);
		p {
			color: var(--color-wh);
		}
	}
}

/*---------------------------------
mv
---------------------------------*/
.mv {
	margin-top: 50px;
    padding: 40px 0;
	background: linear-gradient(to bottom, #1B2947 0%, #1B2947 53%, #6077A7 100%);
	.section_inner {
		max-width: 1300px;
	}
}
.mv_wrapper {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	.mv_content {
		display: flex;
		flex-direction: column;
		align-items: center;
		hgroup {
			display: flex;
			flex-direction: column;
			width: fit-content;
			h2 {
				margin-bottom: 12px;
				text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
				color: #FFFFFF;
				font-size: 24px;
				span {
					line-height: 1.25;
				}
				.mv_title_text{
					display: block;
					position: relative;
					z-index: 1;
				}
				.mv_title_bigtext{
					position: relative;
					font-size: 38px;
					margin-right: 8px;
					margin-left: 12px;
					&:before{
						content: '';
						background-image: url(/ai-ocr/img/top/mv_title_bg.png);
						background-repeat: no-repeat;
						background-size: 110px;
						width: 169px;
						height: 138px;
						display: block;
						position: absolute;
						top: -18px;
						left: -43px;
					}
				}
				.mv_title_bgtext{
					z-index: 1;
					position: relative;
				}
			}
			p {
				font-size: 12px;
				font-weight: bold;
				color: #FFFFFF;
				position: relative;
				z-index: 1;
				span{
					font-size: 16px;
				}
			}
		}
		.cta_topbtn_content {
			margin-top: 24px;
			.cta_btn_top {
				background-color: var(--color-tertiary);
				border-color: var(--color-wh);
				.free {
					background-color: #1B2947;
					color: var(--color-wh);
				}
				.text {
					.sub_text {
						color: #1B2947;
						&::before, &::after {
							background-color: #1B2947;
						}
					}
					&::before {
						background-image: url(/ai-ocr/img/top/icon_arrow_down_navy.svg);
					}
					.main_text{
						color: #1B2947;
					}
				}
				&:hover {
					background-color: #EDED9C;
				}
			}
		}
	}
	.mv_visual {
		max-width: 670px;
		position: relative;
		.mv_visual_list {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 8px;
			width: fit-content;
			margin: 0 auto 12px;
			color: #FFFFFF;
			font-size: 16px;
			li{
				background-image: url('/ai-ocr/img/top/ic_check.png');
				background-repeat: no-repeat;
				background-position: center left;
				padding-left: 17px;
			}
		}
		.mv_video{
			position: relative;
			img{
				width: 100%;
				height: auto;
				display: block;
				position: relative;
				pointer-events: none;
			}
			video {
				width: 80%;
				filter: drop-shadow(0px 0px rgba(0,0,0,0));
				outline: none;
				border: none;
				vertical-align: middle;
				position: absolute;
				top: 8.5%;
				left: 9.5%;
				z-index: 1;
			}
		}
	}
}
@media screen and (min-width: 500px) {
	.mv_wrapper {
		.mv_content {
			hgroup {
				.sp_only {
					display: none;
				}
			}
		}
		.mv_visual {
			.mv_visual_list{
				width: 100%;
				flex-direction: row;
				gap: 16px;
			}
		}
	}
}
@media screen and (min-width: 1024px) {
    .mv {
		margin-top: 80px;
	}
}
@media screen and (min-width: 1151px) {
    .mv {
        padding: 40px 0 64px;
    }
	.mv_wrapper {
		flex-direction: row;
		align-items: center;
		gap: 0;
		.mv_content {
			width: 590px;
			align-items: flex-start;
			hgroup {
				h2 {
					font-size: 40px;
					margin: 0 0 30px;
					.mv_title_bigtext {
						font-size: 64px;
						margin-right: 10px;
						&:before {
							background-size: inherit;
							width: 169px;
							height: 138px;
							top: -18px;
							left: -62px;
						}
					}
				}
				p{
					font-size: 20px;
					span{
						font-size: 24px;
					}
				}
			}
			.cta_topbtn_content {
				margin-top: 48px;
				width: fit-content;
			}
		}
		.mv_visual {
			flex: 1;
		}
	}
}

/*---------------------------------
company logo
---------------------------------*/
.slider_title{
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 32px;
	text-align: center;
	span{
		color: #139EA8;
	}
}
.slider_title_inner{
	display: inline-block;
	position: relative;
	padding: 0 2%;
	&:before, &:after{
		content: '';
		display: block;
		position: absolute;
		width: 30px;
		height: 1px;
		top: 16px;
		background-color: #000000;
	}
	&:before{
		transform: rotate(60deg);
		left: -30px;
	}
	&:after{
		transform: rotate(-60deg);
		right: -30px;
	}
}

.slider_content{
	width: 100%;
	max-width: 1300px;
	padding: 0 20px;
	margin: 40px auto 0;
	.slider_inner{
		padding: 24px 12px 8px;
		background-color: #FFFFFF;
		border-radius: 12px;
	}
}
.swiper-image{
	display: grid;
	gap: 12px;
    overflow: hidden;
}
.slider {
	width: 100%;
	/*overflow: hidden;*/
}

.slider-wrapper {
	display: flex;
	gap: 60px;
	width: max-content;
	&.scroll-left {
		animation: scroll-left 80s infinite linear .5s;
	}
	&.scroll-right {
		animation: scroll-right 80s infinite linear .5s;
	}
	&.scroll-left .slide, &.scroll-right .slide {
        max-width: 172px;
        max-height: 76px;
	}
}

.slide {
	box-sizing: border-box;
}

@keyframes scroll-left {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
@keyframes scroll-right {
	0% { transform: translateX(-50%); }
	100% { transform: translateX(0); }
}

@media screen and (max-width: 768px) {
	.slider_title{
		font-size: 18px;
	}
	.company-logo img {
		width: 150px;
	}
}
@media screen and (max-width: 600px) {
	.slider_title_inner{
		&:before{
			left: -10px;
		}
		&:after{
			right: -10px;
		}
	}
}
@media screen and (max-width: 500px) {
	.slider_title_inner:before, .slider_title_inner:after{
		top: 35px;
	}
}
@media screen and (max-width: 400px) {
	.slider_title{
		font-size: 14px;
	}
	.slider_title_inner{
		&:before{
			left: -15px;
		}
		&:after{
			right: -15px;
		}
	}
}

/*---------------------------------
about
---------------------------------*/
#about.section_wrapper {
    background-color: var(--color-wh);
}
.about_lead {
	display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: fit-content;
		margin-inline: auto;
	p {
		font-size: 14px;
		font-weight: 400;
		line-height: 1.5;
		& + p {
			margin-top: .25em;
		}
	}
}
.about_img {
	margin: 32px auto 0;
	max-width: 720px;
	img {
		display: block;
		margin-inline: auto;
		box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, .1);
	}
}
@media screen and (min-width:768px) {
	#about.section_wrapper {
		h2 {
			margin-bottom: 48px;
		}
	}
	.about_lead {
		p {
			font-size: 16px;
		}
	}
	.about_img {
		margin-top: 48px;
		img {
			box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, .1);
		}
	}
}

/*---------------------------------
feature
---------------------------------*/
#feature.section_wrapper {
    background-color: var(--color-wh);
	hgroup {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		h2 {
			padding: 0;
			color: var(--color-secondary);
			.color-primary {
				color: var(--color-primary);
				font-weight: 700;
			}
			.number {
				font-size: 2em;
				line-height: 1;
			}
			&:before {
				content: none;
			}
		}
		.subtitle {
			span {
				padding: .5em 1em;
				background-color: var(--color-secondary);
				border-radius: 999px;
				color: var(--color-wh);
				font-size: 14px;
				font-weight: 700;
				line-height: 1;
				text-align: center;
			}
		}
	}
	.section_inner {
		.feature_wrap {
			display: flex;
			flex-flow: row wrap;
			gap: 24px;
			max-width: 500px;
			margin-inline: auto;
			margin-bottom: 48px;
			.feature_item {
				position: relative;
				width: 100%;
				border-radius: 16px;
				border-top: 4px solid var(--color-secondary);
				box-shadow: 0 4px 10px 0 rgba(0,0,0, .1);
				overflow: hidden;
				.number {
					position: absolute;
					top: 0;
					left: 0;
					background-color: var(--color-secondary);
					padding: 8px 8px 10px;
					color: var(--color-wh);
					font-size: 14px;
					font-weight: 700;
					line-height: 1;
				}
				.feature_img {
					background-color: #EEF4F9;
					img {
						display: block;
						margin-inline: auto;
							padding: 32px 8px 24px;
					}
				}
				.text {
						padding: min(calc(20 / 390 * 100vw), 24px);
						background-color: var(--color-wh);
					h3 {
						margin-bottom: 1em;
						color: var(--color-secondary);
						font-size: clamp(16px, calc(16 / 390 * 100vw), 18px);
						font-weight: 700;
						line-height: 1.5;
						text-align: center;
						em {
							font-style: normal;
							color: #F39C12;
						}
					}
					p {
						font-size: clamp(12px, calc(14 / 390 * 100vw), 14px);
						line-height: 1.5;
					}
				}
			}
		}
	}
}
@media screen and (min-width:768px) {
	#feature.section_wrapper {
		.section_inner {
			.feature_wrap {
				max-width: inherit;
				.feature_item {
					width: calc(33.33333% - 24px * 2 / 3);
					.text {
						padding: min(calc(24 / 1024 * 100vw), 24px);
						background-color: var(--color-wh);
						h3 {
							font-size: clamp(14px, calc(18 / 1024 * 100vw), 18px);
						}
						p {
							font-size: clamp(12px, calc(14 / 1024 * 100vw), 14px);
						}
					}
				}
			}
		}
	}
}

/*---------------------------------
demo
---------------------------------*/
#demo.section_wrapper {
    background-color: rgba(var(--color-secondary-rgb), .8);
	& * {
    	color: var(--color-wh);
	}
}
.demo_video {
	padding: 12px;
    background-color: var(--color-wh);
	video {
		width: 100%;
        filter: drop-shadow(0px 0px rgba(0,0,0,0));
        outline: none;
        border: none;
	}
}
.demo_note {
	margin-top: 32px;
	p {
    	font-weight: 300;
		&.indent {
			margin-top: 16px;
			text-indent: -1em;
			padding-left: 1em;
		}
	}
}

/*---------------------------------
table
---------------------------------*/
#table.section_wrapper {
    background-color: var(--color-wh);
}
/*#table.section_wrapper * {
    text-align: center;
} */
#table [class^="table_list"]  * {
    text-align: center;
}
#table .section_inner {
    max-width: 800px;
}
.table_list_sp {
    margin-bottom: 40px;
}
.table_list_sp.last {
    margin-bottom: 0;
}
.table_list_sp h3 {
    font-size: 1.8rem;
    padding: 10px 0;
    font-weight: 400;
    color: var(--color-bl);
    background-color: var(--color-quaternary);
    margin-bottom: 6px;
}
.table_list_sp h3 span {
    font-size: 1.4rem;
}
.table_list_sp dl {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.table_list_sp dl dt,
.table_list_sp dl dd {
    margin: 0;
    height: 60px;
    background-color: var(--color-wh);
    box-shadow: 3px 3px 12px rgba(var(--color-secondary-rgb), 0.1);
    width: calc((100% - 8px) / 2);
    font-weight: 300;
    font-size: 1.8rem;
    line-height: 60px;
}
.table_list_sp dl dt.first {
    background-color: var(--color-secondary);
    color: var(--color-wh);
    font-weight: 600;
}
.table_list_sp dl dd.first {
    font-weight: 600;
    font-size: 2.5rem;
    color: var(--color-or);
}
.table_list_sp dl dd.first.notes p {
    font-weight: 600;
    font-size: 2.5rem;
    color: var(--color-or);
    line-height: 60px;
    display: inline-block;
}
.table_list_sp dl dd.first.notes p,
.table_list_pc ul.middle li p.notes{
    position: relative;
}
.table_list_sp dl dd.first.notes p::before,
.table_list_pc ul.middle li p.notes::before {
    content: '※';
    font-size: 1.4rem;
    color: var(--color-bk);
    position: absolute;
    top: -1em;
    right: -1em;
}
.table_list_pc {
    display: none;
}
#table .table_notes {
	margin-top: 1em;
    font-size: 1.2rem;
    text-align: right;
}
.table_hint {
    margin-top: 24px;
}
.table_hint_img {
    margin-bottom: 16px;
	img {
		display: block;
		margin-inline: auto;
		width: 60%;
		max-width: 150px;
	}
}
.table_hint_text {
	p {
		font-weight: 300;
	}
}
@media screen and (min-width: 768px) {
    .table_hint {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .table_hint_img {
    	margin-bottom: 0;
        width: 20%;
		img {
			width: 100%;
			max-width: inherit;
		}
    }
    .table_hint_text {
        width: 76%;
    }
}
@media screen and (min-width: 1024px) {
    #table .section_inner {
        max-width: 1024px;
    }
    .table_list_sp {
        display: none;
    }
    .table_list_pc {
        display: block;
    }
    .table_list_pc h3 span {
        font-size: 1.4rem;
        display: block;
        text-align: left !important;
    }
    .table_list_pc ul.top {
        height: 60px;
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 16px;
    }
    .table_list_pc ul.top li {
        width: 234px;
    }
    .table_list_pc ul.top li:first-child {
        width: 231px;
    }
    .table_list_pc ul.top li p {
        font-weight: 300;
        font-size: 1.8rem;
        line-height: 60px;
    }
    .table_list_pc ul.top li:not(:first-child) {
        background-color: var(--color-wh);
        box-shadow: 3px 3px 12px rgba(var(--color-secondary-rgb), 0.1);

    }
    .table_list_pc ul.top li:last-child {
        background-color: var(--color-secondary);
    }
    .table_list_pc ul.top li:last-child p {
        color: var(--color-wh);
        font-weight: 600;
    }
    .table_list_pc ul.middle {
        height: 78px;
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .table_list_pc ul.middle:not(:last-child) {
        margin-bottom: 16px;
    }
    .table_list_pc ul.middle li {
        height: 78px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .table_list_pc ul.middle li p {
        font-weight: 300;
        font-size: 1.8rem;
    }
    .table_list_pc ul.middle li h3 {
        color: var(--color-bl);
        font-weight: 400;
        font-size: 1.8rem;
        line-height: 21px;
        text-align: left !important;
    }
    .table_list_pc ul.middle li:not(:first-child) {
        width: 234px;
        background-color: var(--color-wh);
        box-shadow: 3px 3px 12px rgba(var(--color-secondary-rgb), 0.1);
    }
    .table_list_pc ul.middle li:first-child {
        width: 231px;
        background-color: var(--color-quaternary);
        box-shadow: none;
        padding: 0 24px;
        justify-content: left;
    }
    .table_list_pc ul.middle li:last-child p {
        color: var(--color-or);
        font-weight: 600;
        font-size: 2.5rem;
    }
    .table_list_pc ul.middle li p.notes {
        position: relative;
    }
    .table_list_pc ul.middle li p.notes::before {
        content: '※';
        font-size: 1.4rem;
        color: var(--color-bk);
        position: absolute;
        top: -1em;
        right: -1em;
    }
}

/*---------------------------------
case
---------------------------------*/
#case {
	background-color: var(--color-wh);
}
.case_slider {
   width: 100%;
   margin-inline: auto;
   .slick-slide {
    	margin: 0;
    	height: auto;
	}
	.slick-prev,
	.slick-next {
		position: absolute;
		top: 40%;
		height: 48px;
		width: 48px;
		cursor: pointer;
		outline: none;
		z-index: 1;
	}
	.slick-prev{
		background: url("/ai-ocr/img/top/slider_prev.svg") 0 0 no-repeat;
		background-size: contain;
		left: -4%;
		}
	.slick-next {
		background: url("/ai-ocr/img/top/slider_next.svg") 0 0 no-repeat;
		background-size: contain;
		right: -4%;
	}
	.slick-dots li {
		margin-right: 10px;
		margin-left: 10px;
	}
	.slick-dots li button::before {
		font-size: 14px;
		line-height: 14px;
	}
	.slick-dots li button:before {
		color: var(--color-secondary);
	}
	.slick-dots li.slick-active button:before {
		color:var(--color-secondary);
	}
	.slick-track {
		display: flex;
	}
	.case_slider_item {
		&:not(.slick-active) {
			opacity: .5;
			a {
				pointer-events: none;
			}
		}
		a {
			display: flex;
			flex-direction: column;
			position: relative;
			height: 100%;
			background-color: var(--color-wh);
			border-radius: 12px;
			margin: 0 10px;
			box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, .1);
			figure {
				margin: 0;
				overflow: hidden;
				img {
					border-radius: 12px 12px 0 0;
    				transition: .3s;
				}
			}
			.text {
				padding: 16px;
				.tag {
					display: flex;
					flex-flow: row wrap;
					gap: 8px;
					li {
						padding: .5em 1.5em;
						background-color: var(--color-secondary);
						border-radius: 9999px;
						color: var(--color-wh);
						font-size: 14px;
						font-weight: 600;
						line-height: 1;
					}
				}
				h3 {
					margin-top: 1em;
					color: var(--color-secondary);
					font-size: 18px;
					font-weight: 600;
					line-height: 1.5;
				}
				.company {
					margin-top: 1.5em;
					font-size: 16px;
				}
			}
			&:hover {
				figure {
					img {
						transform: scale(1.08);
					}
				}
			}
		}
	}
}
.slick-list {
	padding-bottom: 15px !important ;
}
@media (min-width:600px) {
	.case_slider {
		.slick-slide {
			margin: 0 12px;
		}
		.slick-prev,
		.slick-next {
			top: 40%;
			height: 64px;
			width: 64px;
		}
		.case_slider_item {
			a {
				margin-bottom: 30px;
				box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, .1);
				.text {
					padding: 32px;
					h3 {
						font-size: 20px;
					}
				}
			}
		}
	}
	.slick-list {
		padding-bottom: 30px !important ;
	}
}

@media (min-width: 1024px) {
	.case_slider {
		.case_slider_item {
			a {
				.text {
					h3 {
						font-size: 18px;
					}
				}
			}
		}
	}
}
#case {
	.transition_btn {
		margin-top: 30px;
	}
}
/*---------------------------------
faq
---------------------------------*/
#faq.section_wrapper {
    background-color: rgba(var(--color-quaternary-rgb), .5);
}
.faq_item {
    max-width: 960px;
    margin: 0 auto 16px;
    cursor: pointer;
}

.faq_question {
    padding: 0 20px 0 56px;
    position: relative;
    background-color: var(--color-secondary);
    border-radius: 10px;
    height: 66px;
    font-weight: 600;
    display: flex;
    align-items: center;
    color: var(--color-wh);
}

.faq_question::after {
    content: '';
    width: 18px;
    height: 30px;
    background-image: url(/ai-ocr/img/top/icon-question.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
}
.faq_question.open::before {
    transform: translateY(-50%) rotate(0deg);
}

.faq_answer {
    padding: 16px;
    font-size: 1.2rem;
    color: var(--color-bl);
    position: relative;
    display: none;
}

.faq_answer span {
    position: relative;
    color: #809BD3;
    display: block;
    text-align: right;
    margin-top: 1em;
    padding-top: 0.5em;
    font-size: 1.2rem;
}

.faq_answer span::before,
.faq_answer span::after {
    content: '';
    width: 6px;
    height: 1px;
    background-color: #809BD3;
    position: absolute;
    top: 0;
}

.faq_answer span::before {
    transform: rotate(45deg);
    left: calc(100% - 19px);
}

.faq_answer span::after {
    transform: rotate(-45deg);
    right: 17px;
}

.more_btn_faq {
    position: relative;
    display: block;
    margin: 0 0 0 auto;
    padding-right: 20px;
    width: fit-content;
	color: var(--color-primary);
    font-size: 1.6rem;
    font-weight: 600;
    text-align: right;
}

.more_btn_faq::after,
.more_btn_faq::before {
    content: '';
    width: 8px;
    height: 1px;
    background-color: var(--color-primary);
    position: absolute;
    right: 0;
}

.more_btn_faq::before {
    transform: rotate(45deg);
    top: 0.6em;
}

.more_btn_faq::after {
    transform: rotate(-45deg);
    bottom:0.5em;
}

@media screen and (min-width: 768px) {
    .faq_question {
        padding: 0 4% 0 10%;
    }

    .faq_question::after {
        left: 4%;
    }

    .faq_answer {
        font-size: 1.4rem;
    }
}

@media screen and (min-width: 1024px) {
    .faq_answer {
        font-size: 1.6rem;
        padding: 32px 32px 24px 32px;
    }
    .faq_answer span {
        margin-top: 2em;
    }

    .more_btn_faq {
        font-size: 1.8rem;
    }
}

/*---------------------------------
cta
---------------------------------*/
.cta.section_wrapper {
	position: relative;
	&::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(/ai-ocr/img/top/cta_bg.png);
	}
	.section_inner {
		.cta_wrap {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 32px;
			.cta_img {
				width: 100%;
				max-width: 400px;
				margin-inline: auto;
			}
			.cta_body {
				width: 100%;
				display: flex;
				flex-flow: column;
				align-items: center;
				gap: 24px;
				.cta_heading {
					display: flex;
					flex-flow: column;
					align-items: center;
					gap: 8px;
					.text01 {
						display: flex;
						flex-flow: row wrap;
						align-items: center;
						justify-content: center;
						gap: 4px;
						img {
							width: 240px;
						}
						.band {
							padding: 2px 8px;
							border-radius: 4px;
							background-color: var(--color-wh);
						}
					}
					& p, span {
						font-size: 18px;
						font-weight: 700;
						line-height: 1.5;
					}
				}
			}
		}
	}
}
@media screen and (min-width:768px) {
	.cta.section_wrapper {
		.section_inner {
			.cta_wrap {
				align-items: center;
				justify-content: space-between;
				gap: 0;
				.cta_img {
					width: 30%;
					max-width: inherit;
					margin: 0;
				}
				.cta_body {
					width: 65%;
					gap: 32px;
					.cta_heading {
						gap: 12px;
						.text01 {
							gap: 4px;
							img {
								width: 296px;
							}
						}
						& p {
							font-size: 20px;
						}
					}
				}
			}
		}
	}
}
/*---------------------------------
news
---------------------------------*/
#news.section_wrapper {
    background: var(--color-secondary) ;
	.section_inner {
		h2 {
			color: var(--color-wh);
			&:before {
				background-color: var(--color-wh);
			}
		}
		.news_wrap {
			display: grid;
			grid-template-columns: 1fr;
			gap: 24px;
			margin-inline: auto;
			width: 100%;
			max-width: 500px;
			.news_item {
				background-color: var(--color-wh);
				border: 1px solid #F3F4F6;
				border-radius: 6px;
				box-shadow: 0 4px 6px -1px rgba(0,0,0, .1), 0 2px 4px -2px rgba(0,0,0, .1);
				overflow: hidden;
				.news_img {
    				overflow: hidden;
					img {
						width: 100%;
						aspect-ratio: 128 / 67;
						object-fit: cover;
    					transition: .3s;
					}
				}
				.news_text {
					padding: min(calc(20 / 390 * 100vw), 20px);
					.news_date {
						margin-bottom: 1em;
						color: #99A1AF;
						font-size: 12px;
						line-height: 1.5;
					}
					h3 {
						margin-bottom: 1.0em;
						font-size: clamp(14px, calc(16 / 390 * 100vw), 16px);
						font-weight: 700;
						line-height: 1.5;
						font-feature-settings: "palt";
					}
					.news_tag {
						span {
							display: inline-block;
							padding: 0 .5em;
							color: #0A0A0A;
							border: 1px solid rgba(0,0,0, .1);
							font-size: 11px;
							line-height: 1.5;
						}
					}
				}
			}
		}
		a:hover.news_item {
			.news_img {
				img {
					transform: scale(1.05);
				}
			}
			.news_text {
				h3 {
					color: var(--color-secondary);
				}
			}
		}
	}
}
@media screen and (min-width:768px) {
	#news.section_wrapper {
    	background: linear-gradient(180deg, var(--color-secondary) 0%, var(--color-secondary) 80%, #ffffff 80%, #ffffff 100%);
		.section_inner {
			.news_wrap {
				grid-template-columns: repeat(3, 1fr);
				gap: 0 min(calc(24 / 1024 * 100vw), 24px);
				max-width: inherit;
				.news_item {
					display: grid;
					grid-template-rows: subgrid;
					grid-row: span 4;
					gap: 0;
					.news_text {
						display: grid;
						grid-template-rows: subgrid;
						grid-row: span 3;
						gap: 0;
						padding: min(calc(20 / 1024 * 100vw), 20px);
						h3 {
							font-size: clamp(14px, calc(16 / 1024 * 100vw), 16px);
						}
					}
				}
			}
		}
	}
}