@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap");
.bg-blue{background:#0073c1;}
.bg-lblue{background:#71e4fc;}
.bg-wlblue{background:#8ee5e1;}
.bg-lyellow{ background: rgba(255, 214, 0, 1);}
.bg-yellow{ background: rgba(255, 177, 37, 1);}
.bg-wlyellow{ background: #fddfc7;}
.bg-salmon{background: #ff7673;}
.bg-lpink{background: #f7c8cb;}
.bg-green {background: #00a2a2;}
.bg-lgreen {background: #8ee5e1;}
.bg-gray{ background: #d8eef3;}
.bg-grad{background-image: linear-gradient(30deg, #0d70b1, #63c0db 40%);}
.bg-grad2{background-image: linear-gradient(to right, var(--sku-color), #68c2dd);}

.txt-yellow{ color: #ffb125;}
.txt-blue{ color: #0073c1;}
.txt-green{ color: #00a2a2;}
.txt-salmon{color: #ff7673;}
.txt-bk{color: #333;}
.txt-shadow{text-shadow:0 1px 0 #333;}
.c-heading-prim{border:none;}
.section{padding:60px 0;}
.section,
.row,
.c-imageset-small__title{position:relative;}

.st0{fill:#231815;}
.st1{fill:none;stroke:#231815;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}

.notice{margin:2em 0 0 1em;font-size:0.86em;}
.notice li {
	list-style:none;
}
.notice li::before{
	content: "※ ";
	margin-left: -16px;
	background: rgb(255, 255, 255);
}
.radius-age{
	margin:10px 10px 0 auto;
	display:block;
	width:fit-content;
	padding:0 20px;
	font-size: 1.4rem;
	color:var(--color-prim);
	border:solid 2px var(--color-prim);
	border-radius:15px;
}
.box_gray{
	display:inline-block;
	padding:0 30px;
	background: #d8eef3;
	border-radius:40px;
}
/* square_btn */
a.square_btn:link{
	display: flex;
	align-items: center;
	justify-content: center;
	max-width:100%;
	min-height: 50px;
	margin:0 25px;
	font-weight: bold;
	text-align:center;
	line-height: 1.4;
	text-decoration: none;
	color: #353434;
	background: #ffb125;
	letter-spacing: 0;
	padding: 4px 26px 5px 14px;
	position: relative;
	transition: all 0.3s ease-in-out;
}
a.square_btn.c-spike-navi1__txt{color: #fff;background: #ffb125;}
a.square_btn.c-spike-navi1__txt:hover {color: #333;background: #ffd0ad;}
a.square_btn.c-spike-navi1__txt:hover svg{fill: #333;}
a.square_btn.b_btn{color: #fff;background: #00a2a2;}
a.square_btn.b_btn:hover {color: #00a2a2;background: #8ee5e1;}
a.square_btn.b_btn:hover svg{fill: #00a2a2;}
a.square_btn.links{
	margin:0.8em 0 0;
	max-width:100%;
	color: #fff;
	background: #0073c1;
	transition:0.4s;
	text-align:center;
}
.c-spike-navi1__txt::after{filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(293deg) brightness(106%) contrast(101%);}
a.square_btn.links:hover {color: #ff7673;opacity:0.8;}
a.square_btn.links:hover svg{fill: #ff7673;opacity:0.8;}
a.square_btn.toshop{
	position:relative;
	max-width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0.8em 0 0;
	color: #fff;
	font-size:1.35em;
	text-shadow:0 1px 0 #333;
	transition:0.4s;
}
a.square_btn.toshop.bg-green{background-color: #00a2a2;}
a.square_btn.toshop:hover {
	color: #00a2a2;
	background-color: #ffd600;
	text-shadow:0 0 0;
}
a.square_btn.toshop .arrow {
	position: relative;
	display: inline-block;
	margin-left:1em;
	width: 12.5px;
	height: 21px;
	transition:0.4s;
}
a.square_btn.toshop .arrow::before,
a.square_btn.toshop .arrow::after {
	content: "";
	position: absolute;
	top: calc(50% - 2px);
	right: 0;
	width: 16px;
	height: 4px;
	border-radius: 9999px;
	background-color: #ffffff;
	transform-origin: calc(100% - 2px) 50%;
}
a.square_btn.toshop .arrow::before {
	transform: rotate(45deg);
}
a.square_btn.toshop .arrow::after {
	transform: rotate(-45deg);
}
a.square_btn.toshop:hover .arrow::before,
a.square_btn.toshop:hover .arrow::after {background-color: #00a2a2;}

a.tec_btn:link{
	position:relative;
	display:block;
	max-width:90%;
	font-weight: bold;
	margin:0 auto;
	padding:0.8em;
	text-decoration: none;
	color: #0073c1;
	border:solid 1px #0073c1;
	letter-spacing:0.1em!important;
	transition:0.4s;
}
a.tec_btn:link img.tec_ico{
	position:absolute;
	width:32px;
	top:23%;
	left:2%;
	filter: brightness(0) saturate(100%) invert(31%) sepia(46%) saturate(2161%) hue-rotate(179deg) brightness(99%) contrast(105%);
}
a.tec_btn:link svg{position:absolute;top:35%;right:5%;fill: #0073c1;}
a.tec_btn:hover {color: #fff;background:#0073c1;}
a.tec_btn:hover svg{fill: #fff;}
a.tec_btn:hover img.tec_ico{filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(293deg) brightness(106%) contrast(101%);}

.icon-set {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	margin: 0 auto 10px;
	padding-top: 10px;
	width: 80px;
	height: 80px;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 2em;
	font-weight:bold;
	color: #fff;
	line-height: 1;
	background: #ffb125;
	z-index:4;
}
.icon-set.green {background: #00a2a2;}
.icon-set span {
	display: block;
	padding-top: 4px;
	font-size: 0.7em;
}
/* balloon */
.balloon1-right {
	position: relative;
	display: inline-block;
	margin: 1.5em 15px 1.5em 0;
	padding: 7px 20px;
	min-width: 120px;
	max-width: 100%;
	color: #fff;
	font-size:24px;
	background: #0073c1;
}
.balloon1-right:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 20px solid #0073c1;
}
.balloon1-right p {
	margin: 0;
	padding: 0;
}

/* #sec-set ------------------------------*/
#sec-set{padding:40px 0 50px;}
#sec-set .box-set{
	position: relative;
	background:#fff;
	margin-bottom:2em;
}
#sec-set .box-set .set-box {
	position: relative;
	padding:25px;
}

/* #sec-hardware#sec-software ------------------------------*/
#sec-hardware .row,
#sec-software .row {
	position:relative;
}
#sec-hardware .c-caption,
#sec-software .c-caption {
	color:#333;
}
.bgen-l {
	font-size: 10vw;
	top: 0;
	z-index: -1;
}
[class^="bgen-"], [class*=" bgen-"] {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 400;
	position: absolute;
	line-height: 0.75;
}
@media (min-width: 768px) {
	.bgen-l {
		font-size: 10vw;
	}	
}
@media (max-width: 570px) {
	.bgen-l {
		font-size: 15.5vw;
	}	
}
.c-imageset-small__inner{
	border:none;
	position:relative;
}
.c-imageset-small__text{
	font-weight: 500;
	font-size: 1.6rem;
	line-height: var(--line-height-s);
}
.c-imageset-small__inner::before {
	content: "";
	display: block;
	width: 120%;
	height: calc(100% + 50px);
	position: absolute;
	top: -30px;
	z-index: -1;
}
/* #sec-hardware ------------------------------*/
#sec-hardware .c-imageset-small__inner::before {
	left: 0;
	background: rgba(113, 228, 252, 0.3);	
}
#sec-hardware .c-imageset-small__image figure{
	margin-top:0;
}
#sec-hardware .bgen-l {
	z-index: 1;
	top:-5.8em;
	left: 0;
	color:#0073c1;
}
#sec-hardware .bgen-l span{
	display:block;
	padding-top:20px;
	text-align:right;
	font-size:0.2em;
}
#sec-hardware {
	padding-top: 80px;
	overflow:hidden;
}
/* #sec-software ------------------------------*/
#sec-software .c-imageset-small__inner::before {
	right: 0;
	background: rgba(142, 229, 225, 0.4);
	overflow:hidden;
}
#sec-software .bgen-l{
	z-index: 1;
	top:-5.2em;
	right: 0;
	color:#00a2a2;
}
#sec-software .bgen-l span{
	display:block;
	padding-top:20px;
	text-align:right;
	font-size:0.2em;
}
@media screen and (min-width: 768px){
	#sec-hardware{padding-top: 180px;padding-left:10%;padding-bottom:180px;}
	#sec-software{padding-right:10%;}
	#sec-hardware .bgen-l {
		top:-0.8em;
		left: 0;
	}
	#sec-software .bgen-l {
		top:-0.8em;
		right: -0.1em;
	}
	.c-imageset-small__image figure{
		margin-top:-80px;
	}
	#sec-hardware .c-imageset-small__image figure{
		margin-top:-180px;
	}
	.c-imageset-small__inner{
		padding:0;
	}
	#sec-hardware .c-imageset-small__text{
		padding-left:50px;
	}
	#sec-software .c-imageset-small__inner {
		grid-template-columns: 500px 1fr ;
	}
	#sec-hardware .c-imageset-small--reverse .c-imageset-small__inner {
		grid-template-columns: 1fr 500px;
	}
}
@media (max-width: 767px) {
	.c-imageset-small__inner {
		display:block;
	}	
}
/* #sec-set --------------------------
#set-8 {background:rgba(255, 177, 37, 0.3);}
#set-11 {background:rgba(0, 162, 162, 0.3);}----*/
#set-8 .c-grid__item.radius,
#set-11 .c-grid__item.radius{
	position:relative;
	padding:10px 20px;
	background:#fff;
	border:solid 2px rgba(255, 177, 37, 1);
	border-radius:20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#set-11 .c-grid__item.radius{
	border-color:#71e4fc;
}
@media screen and (min-width: 768px){
	#set-8 .c-grid__item.radius,
	#set-11 .c-grid__item.radius{
		padding:30px 40px;
		border-radius:40px;
	}
}
.sndttl{
	display:block;
	min-height:60px;
	padding-left: 20px;
	font-size:2.4rem;
	font-weight:bold;
}
#set-8 .icon-set,
#set-11 .icon-set{
	position:relative;
	padding-top: 20px;
	height:70px;
}
#set-11 .icon-set{
	background:#00a2a2;
}
#set-8 h2.txt-big,
#set-11 h2.txt-big{
	font-size:2em;
	font-weight:bold;
	line-height:1.2;
	letter-spacing:0.1em;
}
#set-8 h2.txt-big span,
#set-11 h2.txt-big span{
	font-size:0.5em;
}
@media screen and (min-width: 768px){
	#set-8 h2.txt-big,
	#set-11 h2.txt-big{
		font-size:3em;
	}
}
.ico_plus{width:60px;}
/* #sec-bnr ------------------------------*/
.flex{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
}
.item1 {flex-basis: auto;order:1;}
.item2 {flex-basis: auto;flex-grow: 2;order:3;}
.item3 {flex-basis: auto;order:2;}
@media screen and (min-width: 768px){
	.item1 {flex-basis: 90px;order:1;}
	.item2 {flex-basis: auto;flex-grow: 2;order:2;}
	.item3 {flex-basis: 200px;order:3;}
}
.circle-text {
	position:relative;
	width: 300px;
	height: 300px;
	background-color: #ffd600;
	color: #333;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 4rem;
	font-weight:bold;
}

.circle-text .item:not(:first-child) ::before {
	content: "";
	width: 50px;
	height: 50px;
	border-top: solid 4px #0073c1;
	border-right: solid 4px #0073c1;
	position: absolute;
	right: -50px;
	top: 40%;
}
@media screen and (min-width: 768px){
	.circle-text .item:not(:first-child) ::before {
		right: -50px;
		transform: rotate(45deg);
	}
}
#sec-bnr .ban-step .stxt h3.sttl-m{
	padding-top:20px;
	font-size:1em;
	color:#0073c1;
}
#sec-bnr .ban-step .col-thumb {
	width:100%;
	height:auto;
	display: flex;
}
#sec-bnr .ban-step .col-thumb a{
	display:block;
}
#sec-bnr .ban-step .col-thumb a img{
	width:60%;
	filter: brightness(0) saturate(100%) invert(31%) sepia(46%) saturate(2161%) hue-rotate(179deg) brightness(99%) contrast(105%);
}
#sec-bnr .ban-step .col-thumb a img:hover{
	filter: brightness(0) saturate(100%) invert(86%) sepia(35%) saturate(3615%) hue-rotate(360deg) brightness(105%) contrast(101%);
}
@media screen and (min-width: 768px){
	.w60 {
		width:60%;
		margin-left:auto;
		margin-right:auto;
	}
}
@media screen and (max-width: 767px){
	.c-grid--4up {
		display:grid;
		grid-template-columns: repeat(2, 1fr);
	}
	.c-grid--4up .c-grid__item + .c-grid__item {
		margin-top: 0;
	}
}

/* mv-wrap ------------------------------*/
.mv-wrap {
	position: relative;
	margin-top: 0;
	width: 100%;
}
.mv__copy__inter {
	position: relative;
	padding:30px 0;
}
.mv__copy__inter h2{
	margin:0 auto;
	padding:10px 60px ;
	width:fit-content;
	font-size:2.2em;
	font-weight:bold;
	color: #fff;
	font-feature-settings: "palt";
	line-height:1.1;
	text-shadow: 0 2px 0 #333;
	background: linear-gradient(transparent 10%, rgba(0, 53, 93, 0.2) 10%);
}
@media (min-width: 768px) {
	.mv__copy__inter h2 {
		margin-top:-15px;
		font-size:4.2em;
		background: transparent;
	}
	.mv__copy__inter h2 .ltminus{
		letter-spacing:-2px;
	}
}
.mv__copy__inter h2 span.txt-small{
	font-size:0.56em;
}
.marker {
	margin:0 auto;
	padding:0 10px 10px;
	width:fit-content;
	background-image: repeating-linear-gradient(-45deg,
	rgba(255, 214, 0, 1)  0, rgba(255, 214, 0, 1) 3px,
	transparent 3px, transparent 8px);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% 16%;
}
.bg-kv{
	position: relative;
	background-image: url(/assets/images/product/csai/main-img.jpg) ;
	background-position: right;
	background-size:cover;
	min-height:330px;
}
.new-box{
	margin:20px auto 0;
	padding:0 20px;
	display:block;
	width:fit-content;
	font-size:1.6em;
	font-weight:bold;
	color:#333;
	background:#fff;
	border-radius:4px;
}
.c-spike-list8__content{position:relative;}
/* #sec-set ------------------------------*/
.kikan{
	margin-left:auto;
	margin-right:auto;
	padding:8px 0;
	display:grid;
	display: grid;
	grid-template-columns: 140@x 1fr;
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	align-items:center;
}
.kikan .c-lead span,
#sec-set .c-heading-prim.txt-blue span{font-size:0.8em;}
.txt-topics{
	max-width: 500px;
	margin-left:auto;
	margin-right:auto;
	padding:20px;
	font-size: 1.4em;
	font-weight: bold;
	line-height:1.2;
	color: #00a2a2;
	background: #ffd600;
}
@media screen and (max-width: 767px){
	.div1 { grid-area: 1 / 1 / 2 / 2; }
	.div2 { grid-area: 1 / 2 / 2 / 3; }
	.div3 { grid-area: 2 / 1 / 3 / 3; }
	.c-spike-list8__content .c-text.u-txt-fz30{
		font-feature-settings: "palt";
		line-height:1.2;
	}
}
@media screen and (min-width: 768px){
	.kikan{
		grid-template-columns: 260px 1fr 260px;
		grid-template-rows: 1fr;
		grid-column-gap: 20px;
		grid-row-gap: 0px;
	}
	.txt-topics{padding:8px 20px;}
}
.start-bnr{
	display:block;
	font-weight: bold;
	margin:0;
	padding:6px 20px;
	text-align:center;
	text-decoration: none;
	color: rgba(255, 118, 115, 1);
	font-size: 1.25em;
	background:#fff;
	border:solid 3px rgba(255, 118, 115, 1);
	border-radius:20px;
	/*filter: drop-shadow(0 2px 2px rgb(0, 0, 0));*/
}
.book-box{
	display:block;
	width:fit-content;
	margin:20px auto 0;
	padding:8px 25px;
	font-size:0.56em;
	font-weight:bold;
	text-align:center;
	line-height: 1.2;
	color:#fff;
	text-shadow: 1px 1px 2px #333;
	background:rgba(0, 115, 193, 0.9);
	border-radius:20px;
}

.circle-topics{
	position: absolute;
	top: 100px;
	left: 80%;
	width: 96px;
	height: 96px;
	
	display: flex;
	flex-direction: column; /* 縦並び */
	justify-content: center; /* 上下中央 */
	align-items: center;    /* 左右中央 */
	
	text-align: center;
	font-size: 0.9em;
	font-weight: bold;
	color: #00a2a2;
	line-height: 1.2;
	background: #fff;
	border:solid 3px #ffd600;
	border-radius: 100vh;
	filter: drop-shadow(0 2px 2px rgb(0, 0, 0));
	z-index:3;
}
@media (max-width: 767px) {
	.book-box{font-feature-settings: "palt";}
}
.c-imageset-small__link {border:solid 2px #0073c1;}
.c-imageset-small__link > a::after{
	right:42%;
	color: #333;
}
.c-imageset-small__link > a:hover {
	color: #333;
}
@media (min-width: 768px) {
	.circle-topics{
		top:-30px;
		left: 24%;
		width: 130px;
		height: 130px;
		font-size: 1.4em;
	}
	.start-bnr{
		line-height:1.1;
	}
	.book-box{
		bottom:20px;
	}
	.c-imageset-small__link {margin: 0 auto;max-width:100%;}
	.c-imageset-small__link > a {justify-content: center;font-size: 2.4rem;font-weight:bold;}
}
.c-heading-tert{font-weight:bold;background-color: #fff;filter: drop-shadow(0 2px 1px #0073c1);}