@charset "utf-8";
/* CSS Document */

/*==============================*/
/* 共通 */
/*==============================*/
:root {
	--themecolor: #42BDF2;
}


/*==============================*/
/* 電話番号設定 */
/*==============================*/
@media (min-width:768px){
	a[href^="tel:"]{
		pointer-events:none;
		text-decoration:none;
		color:inherit;
	}
}

/*==============================*/
/* section */
/*==============================*/
section { padding-top: 88px; padding-bottom: 0px;}

	/* ======= SP =======*/
	@media (max-width: 767px) {
		section { padding-top: 72px; padding-bottom: 0px;}
	}

/*==============================*/
/* bg */
/*==============================*/
.bgDefault{
	padding-top: 80px;
	padding-bottom: 80px;
	background: #EFFAFD;
}


/*==============================*/
/* タイトル */
/*==============================*/
/*-- メインタイトル
------------------------- */
.mainTitle{
	margin-bottom: 40px;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.3em;
	text-align: center;
	color: #00ABDC;
}

    /* ======= TB =======*/
    @media screen and (min-width: 768px) and (max-width: 1024px) {
		.mainTitle{
			margin-bottom: 28px;
			font-size: 28px;
		}
    }
    /* ======= SP =======*/
    @media (max-width: 767px) {
		.mainTitle{
			margin-bottom: 28px;
			font-size: 26px;
		}
    }


/*-- シンプルタイトル
------------------------- */
.subTitle{
    margin-bottom: 20px;
	color: #000;
    font-size: 24px;
	font-weight: 600;
	line-height: 1.3em;
}


/*-- シンプルタイトル
------------------------- */
.simpleTitle{
    margin-bottom: 24px;
	color: #000;
    font-size: 28px;
	font-weight: 600;
	line-height: 1.3em;
}

	/* ======= TB =======*/
	@media (max-width: 1024px){
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		.simpleTitle{
			font-size: 24px;
		}
	}


/*==============================*/
/* ボタン */
/*==============================*/

/*-- main
------------------------- */
.mainBtn a{
	position: relative;
	display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 80px 12px 68px;
    background: #F3FF4A;
	color: #00abdc;
	font-size: 18px;
    border-radius: 200px;
    box-sizing: border-box;
}
.mainBtn a::before{
	position: absolute; top: 50%; right: 10px;
	content: "";
	width: 34px;
	height: 34px;
	background: #D7E23E;
	border-radius: 50%;
	margin-top: -17px;
}
.mainBtn a::after{
	position: absolute; top: 50%; right: 24px;
	content: "";
	width: 10px;
	height: 10px;
	border-top: 2px solid #F3FF4A;
	border-right: 2px solid #F3FF4A;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	margin-top: -5px;
}
.mainBtn a:hover{ background: #DFED26;}


/*-- サブ
------------------------- */
.subBtn a{
	display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 32px 8px 32px;
    background: #F3FF4A;
	color: #00abdc;
	font-size: 15px;
    border-radius: 200px;
    box-sizing: border-box;
}
.subBtn a:hover{ background: #DFED26;}



/*-- simple
------------------------- */
.simpleBtn a{
	display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 64px 10px 64px;
    background: #fff;
	font-size: 15px;
    border-radius: 200px;
    box-sizing: border-box;
	border: 1px solid #828282;
}
.simpleBtn a:hover{
	background: var(--themecolor);
	color: #fff;
}


/*==============================*/
/* Ul */
/*==============================*/
ul.disc li { list-style: disc inside!important; padding-left: 1.5em; text-indent: -1.5em; }
ul.circle li { list-style: circle inside!important; padding-left: 1em; text-indent: -1em; }
ul.square li {
	position: relative;
	padding-left: 1em;
	text-indent: 0.1em;
    line-height: 1.414em;
}
ul.square li:before {
	position: absolute; top: 0.5em; left: 0em;
	content: "";
	width: 0.5em;
	height: 0.5em;
	background: #124D5D;
}
ul.decimal li { list-style: decimal inside!important; padding-left: 1em; text-indent: -1em; }



/*==============================*/
/* サービスラインナップ */
/*==============================*/
div.serviceLineup{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px 24px;
}
div.serviceLineup dl{ width: calc(calc(100% - 24px * 2) / 3);}
div.serviceLineup dl a{
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 24px 48px;
	border-radius: 8px;
	background: var(--themecolor);
}
div.serviceLineup dl a:hover{ opacity: 0.7;}
div.serviceLineup dl a::before{
	position: absolute; top: 50%; right: 16px;
	content: "";
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #05B1E7;
	margin-top: -16px;
}
div.serviceLineup dl a::after{
	position: absolute; top: 50%; right: 29px;
	content: "";
	width: 10px;
	height: 10px;
	border-top: 2px solid var(--themecolor);
	border-right: 2px solid var(--themecolor);
	transform: rotate(45deg);
	margin-top: -5px;
}
div.serviceLineup dl a dt{
	order: 2;
	color: #fff;
	font-size: 18px;
	line-height: 1.3em;
	text-align: center;
}
div.serviceLineup dl a dd{
	order: 1;
	margin-bottom: 10px;
	text-align: center;
}
div.serviceLineup dl:not(:last-child) a dd{ min-height: 44px;}

/*-- 個別設定
------------------------- */
div.serviceLineup dl:last-child a{ padding: 16px 20px;}
div.serviceLineup dl:last-child a dt{ font-size: 16px;}
div.serviceLineup dl:last-child a dd{ margin-bottom: 8px;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.serviceLineup{
			gap: 12px 12px;
		}
		div.serviceLineup dl{ width: calc(calc(100% - 12px * 2) / 3);}
		div.serviceLineup dl a{
			padding: 24px 48px;
			border-radius: 8px;
			background: var(--themecolor);
		}
		div.serviceLineup dl a::before{
			position: absolute; top: 50%; right: 16px;
			content: "";
			width: 32px;
			height: 32px;
			border-radius: 50%;
			background: #05B1E7;
			margin-top: -16px;
		}
		div.serviceLineup dl a::after{
			position: absolute; top: 50%; right: 29px;
			content: "";
			width: 10px;
			height: 10px;
			border-top: 2px solid var(--themecolor);
			border-right: 2px solid var(--themecolor);
			transform: rotate(45deg);
			margin-top: -5px;
		}
		div.serviceLineup dl a dt{
			order: 2;
			color: #fff;
			font-size: 17px;
			line-height: 1.3em;
			text-align: center;
		}
		div.serviceLineup dl a dd{
			order: 1;
			margin-bottom: 10px;
			text-align: center;
		}
		div.serviceLineup dl:not(:last-child) a dd{ min-height: 44px;}


		/*-- 個別設定
		------------------------- */
		div.serviceLineup dl:last-child a dt{ font-size: 15px;}
		div.serviceLineup dl:last-child a dd{ margin-bottom: 8px;}
	}
	
	/* ======= SP =======*/
	@media (max-width: 767px){
		div.serviceLineup{
			flex-direction: column;
			gap: 10px 0px;
		}
		div.serviceLineup dl{ width: 100%;}
		div.serviceLineup dl a{
			flex-direction: row;
			align-items: center;
			padding: 18px 40px 18px 16px;
			border-radius: 6px;
		}
		div.serviceLineup dl a:hover{ opacity: 0.7;}
		div.serviceLineup dl a::before{
			position: absolute; top: 50%; right: 12px;
			width: 28px;
			height: 28px;
			margin-top: -14px;
		}
		div.serviceLineup dl a::after{
			position: absolute; top: 50%; right: 24px;
			width: 8px;
			height: 8px;
			margin-top: -4px;
		}
		div.serviceLineup dl a dt{
			font-size: 17px;
			text-align: left;
		}
		div.serviceLineup dl a dd{
			margin-bottom: 0px;
			margin-right: 12px;
			text-align: left;
		}
		div.serviceLineup dl:not(:last-child) a dd{ min-height: auto;}
		
		div.serviceLineup dl:nth-child(1) a dd img{ width: 28px;}
		div.serviceLineup dl:nth-child(2) a dd img{ width: 28px;}
		div.serviceLineup dl:nth-child(3) a dd img{ width: 28px;}
		div.serviceLineup dl:nth-child(4) a dd img{ width: 28px;}
		div.serviceLineup dl:nth-child(5) a dd img{ width: 28px;}
		div.serviceLineup dl:nth-child(6) a dd img{ width: 28px;}
				
		/*-- 個別設定
		------------------------- */
		div.serviceLineup dl:last-child a{ padding: 14px 40px 14px 16px;}
		div.serviceLineup dl:last-child a dt{ font-size: 15px;}
		div.serviceLineup dl:last-child a dd{ margin-bottom: 0px;}

	}


/*==============================*/
/* 対応システム */
/*==============================*/
dl.compatibleSystem dt{
	margin-bottom: 28px;
	padding: 4px 0;
	background: #EFFAFC;
	color: #00ABDC;
	text-align: center;
	font-size: 20px;
}
dl.compatibleSystem dd ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px 28px;
}
dl.compatibleSystem dd ul li img{
	width: auto;
	height: 32px;
}

	 /* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		dl.compatibleSystem dd ul{ gap: 20px 24px;}
		dl.compatibleSystem dd ul li img{ height: 24px;}
	}


/*==============================*/
/* FAQ */
/*==============================*/

/*---------------------------------
   Frame
---------------------------------*/
div.faqWrap{
	padding: 48px 64px 56px 64px;
	border-radius: 5px;
	background: #EFFBFE;
}
#top div.faqWrap{
	padding: 0;
	border-radius: 0px;
	background: none;
	max-width: 944px;
	margin: 0 auto;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.faqWrap{ padding: 48px 40px 48px 40px;}
		#top div.faqWrap{ padding: 0;}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.faqWrap{ padding: 32px 18px 20px 18px;}
		#top div.faqWrap{ padding: 0;}
	}


/*---------------------------------
   Title
---------------------------------*/
div.faqWrap h3{
	margin-bottom: 24px;
	color: #000;
	font-size: 27px;
	font-weight: 600;
	line-height: 1.3em;
	text-align: center;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		div.faqWrap h3{
			margin-bottom: 16px;
			font-size: 25px;
		}
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.faqWrap h3{
			margin-bottom: 16px;
			font-size: 22px;
		}
	}


/*---------------------------------
   Content
---------------------------------*/
div.faq dl{
	box-shadow: 1px 2px 3px 0px rgba(153,153,153,0.3);
	border-radius: 5px;
	background: #fff;
}

div.faq dl:not(:last-child){ margin-bottom: 12px;}
div.faq dl dt{
	position: relative;
	width: 100%;
	padding: 20px 48px 19px 58px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3em;
	cursor: pointer;
	transition: 0.4s;
}
div.faq dl dt::after{
	position: absolute; top: 13px; left: 18px;
	content: "Q";
	color: #CAEEF8;
	font-size: 32px;
	font-weight: 600;
	font-family: "Inter", sans-serif;
	line-height: 1.3em;
	letter-spacing: 0.01em;
}
div.faq dl dt::before{
	position: absolute; top: 50%; right: 24px;
	content: "";
	width: 13px;
	height: 13px;
	border-top: 3px solid #b8e7f4;
	border-right: 3px solid #b8e7f4;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	transition: transform 260ms ease;
	margin-top: -7px;
}
div.faq dl dt.active::before{
	position: absolute; top: 50%; right: 24px;
	transform: rotate(-45deg);
	margin-top: -3px;
}

div.faq dl dd{
	max-height: 0;
  	transition: max-height 0.2s ease-out;
}
div.faq dl dd div{
	position: relative;
	padding: 24px 24px 24px 58px;
	border-top: 1px solid #d2e5e9;
	opacity: 0;
  	transition: opacity 0.2s ease-out;
}
div.faq dl dd div::after{
	position: absolute; top: 17px; left: 18px;
	content: "A";
	color: var(--themecolor);
	font-size: 32px;
	font-weight: 600;
	font-family: "Inter", sans-serif;
	line-height: 1.3em;
	letter-spacing: 0.01em;
}
div.faq dl dd.active { max-height: 500px; }
div.faq dl dd.active div { opacity: 1;}

div.faq dl dd div p{
	font-size: 15px;
	line-height: 1.618em;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px){
		div.faq dl dt{
			padding: 20px 48px 19px 50px;
			font-size: 17px;
		}
		div.faq dl dt::after{
			position: absolute; top: 12px; left: 16px;
			content: "Q";
			font-size: 28px;
		}
		div.faq dl dt::before{
			position: absolute; top: 50%; right: 20px;
			width: 12px;
			height: 12px;
			border-top: 2px solid #b8e7f4;
			border-right: 2px solid #b8e7f4;
			margin-top: -7px;
		}
		div.faq dl dt.active::before{
			position: absolute; top: 50%; right: 20px;
			transform: rotate(-45deg);
			margin-top: -3px;
		}

		div.faq dl dd div{ padding: 18px 24px 18px 50px;}
		div.faq dl dd div::after{
			position: absolute; top: 13px; left: 16px;
			content: "A";
			font-size: 28px;
		}
		div.faq dl dd div p{
			font-size: 15px;
			line-height: 1.618em;
		}
	}


/*==============================*/
/* ダウンロードボックス */
/*==============================*/
dl.downloadBox{
	width: min(600px,100%);
	margin: 0 auto;
	padding: 40px 24px 38px 24px;
	background: #EFFBFE;
	border-radius: 8px;
}
dl.downloadBox dt{
	margin-bottom: 18px;
	color: #0FAAD9;
	font-size: 22px;
	font-weight: 600;
	text-align: center;
	line-height: 1.414em;
}
dl.downloadBox dd{
	width: min(460px,100%);
	margin: 0 auto;
}
dl.downloadBox dd a{
	display: block;
	padding: 10px 0 11px 0;
	background: #0FAAD9;
	color: #fff;
	font-size: 17px;
	text-align: center;
	border-radius: 200px;
}
dl.downloadBox dd a:hover{ background: #1096BF;}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px){
		dl.downloadBox{ padding: 32px 24px 30px 24px;}
		dl.downloadBox dt{
			margin-bottom: 16px;
			font-size: 21px;
		}
		dl.downloadBox dd a{
			padding: 10px 0 11px 0;
			font-size: 16px;
		}
	}