@font-face {
font-family: Inter;
font-display: swap;
src: url("../../fonts/Inter/Inter-VariableFont_opsz,wght.ttf") format("TrueType");
}
@font-face {
font-family: Noto_Sans;
font-display: swap;
src: url("../../fonts/Noto_Sans_JP/NotoSansJP-VariableFont_wght.ttf") format("TrueType");
}

*{box-sizing: border-box;color:#2F2F2F}


:root{

	--comColor:#036EB8;
	--secColor:#0F3284;
	--graColor:linear-gradient(90deg,#036EB8,#2EA7E0);
	--color:#2F2F2F;
	--main:#EBF7FF;

}


html,body{
	padding:0;
	margin:0;
	font-family: 'Inter', 'Noto_Sans', sans-serif;
}

.inner{
	width:100%;
	max-width:1040px;
	padding:0 20px;
	margin:0 auto;
	box-sizing: border-box;
}

.button{
	text-decoration: none;
	font-size:14px;
	display: flex;
	justify-content: center;
	align-items: center;
	border:1px solid #999;
	width:100px;
	height:40px;
	color:#333;
	border-radius: 30px;
}

/* header
-------------------------------*/
header{
	border-bottom:1px solid #CCC;
	box-sizing: border-box;
}

header .inner{
    max-width:100%;
	display:flex;
	align-items: center;
	justify-content: space-between;
	height:87px;
}

header #logo.active{
    opacity: 1;
    transform: translateX(0);
}


header #logo{
	padding:5px 0 0;
	margin:0;
	width:100%;
	max-width:215px;
	line-height: 1.0;
}

header #logo img{
	width:100%;
	height:auto;
}

header #logo a#logosp{
	display:none;
}


header #right-block{
	display:flex;
}

header #sign{
	display:flex;
	align-items: center;
	gap:20px;
}

header #sign > a{
	display:block;
	text-decoration: none;
	font-weight: bold;	
}

header #sign #signup{
	border:none;
	border-radius: 0;
/*	color:#1A73E8;*/
	color:var(--comColor);
	border:var(--comColor) 2px solid;
	border-radius: 28px;
	padding:12px 32px;
	background:#FFF;

}

header #sign #signup:hover{
	background:var(--comColor);
	color:#FFF;	
}

header #sign #signin{
	background:var(--comColor);
	color:#FFF;
	padding:12px 32px;
	border-radius: 28px;
	border:var(--comColor) 2px solid;
}

header #sign #signin:hover{
	background:var(--secColor);
	border-color:var(--secColor);	
}

header #menuMark{
	width:40px;
	height:60px;
	padding:20px 10px;
	display:none;
}

header #menuMark.open #Openlist,
header #menuMark #Closelist{
	display:none;
}

header #menuMark #Openlist,
header #menuMark.open #Closelist{
	display:block;
}

/* ################### 1100以下 ###################*/
@media(max-width:1100px){
	header #sign{
		position:fixed;
		bottom:0;
		left:0;
		gap:0;
		width:100%;
		z-index:1000;
	}

	header #sign #signin,
	header #sign #signup{
		flex:1;
		border-radius: 0;
		text-align: center;
		padding:12px 0;
	}
}


/* ################### 880以下 ###################*/
@media(max-width:880px){

	header .inner{
		height:60px;
		position:relative;
	}

	header #logo{
		max-width:42px;
	}


	header #logo a#logopc{
		display:none;
	}

	header #logo a#logosp{
		display:block;
	}

	header #menuMark{
		display:block;
	}


}



/* nav
-------------------------------*/
nav{
	margin-right:20px;
}

nav ul{
	list-style: none;
	padding:0;
	margin:0;
}

nav ul{
	list-style: none;
	padding:0;
	margin:0;
}

nav ul > li > a{
	display: block;
	width:100%;
	height:60px;
	line-height: 60px;
	text-align: center;
	text-decoration: none;
	color:var(--color);
	font-size: 14px;
	font-weight: bold;
	padding:0 15px;
}

nav ul > li > a:hover{
	color:var(--comColor);	
}

nav #signsp{
	display:none;
}

body.faq nav li.faq a,
body.price nav li.price a,
body.list nav li.list a,
body.features nav li.features a{color:var(--comColor)}


/* ################### 880以上 ###################*/
@media(min-width:881px){

nav ul.nav-1{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

nav ul.nav-1 > li{
	flex: auto;
}

}

/* ################### 880以下 ###################*/
@media(max-width:880px){
	nav{
			border-top:1px solid #d9d9d9;
			position:absolute;
			top:100%;
			left:0;
			width:100%;
			z-index:1000;
			background: #FFF;
			display:none;
	}

	nav.open{
			display:block;
	}

	nav ul.nav-1{
		display:block;
		padding:0 20px;
	}

	nav ul.nav-1 li{
		padding:0;
		margin:0;
		border-bottom:1px solid #D9D9D9;
	}

	nav ul.nav-1 a{
		display:block;
		text-decoration: none;
		text-align: left;
	}

	nav #signsp{
		display:flex;
		padding:20px;
		justify-content: center;
		align-items: center;
		gap:10px;
	}


	nav #signsp a{
		display:flex;
		justify-content: center;
		align-items: center;
		text-decoration: none;
		padding:10px 0;
		height:32px;
		width:100%;
		border:1px solid var(--comColor);
		border-radius:28px;
		max-width:180px;
		font-size:14px;
	}

	nav #signsp a#signupsp{
		color: var(--comColor);
		background:#FFF;
	}

	nav #signsp a#signinsp{
		background: var(--comColor);
		color:#FFF;
	}

}

/* main
-------------------------------*/
main{
	min-height:calc(100vh - 220px);
	padding:40px 0;
	box-sizing: border-box;
	background:var(--main);
}

main .inner{
	height:100%;
	box-sizing: border-box;
}

main .inner section{
	box-sizing: border-box;
}

main h2{
    font-size:36px;
    color:var(--comColor);
    position:relative;
    line-height: 2.0;
    margin:0 0 30px;
}

main h2 span{
	display:flex;
    color:var(--comColor);
    font-size: 16px;
    align-items: center;
	font-weight: 400;
    font-family: Inter;
}

main h2 span:after{
	content:"";
	display: block;
	height:1px;
	width:140px;
    background:var(--comColor);	
    margin-left:20px;
}


/* titleBox
--------------------------------------------------*/
#titleBox{
	background:var(--graColor);
}

#titleBox .inner{
	margin:0 auto;
	padding:40px 0;
}

#titleBox .inner h1{
	color:#FFF;
	text-align: center;
	font-size: 40px;
}

#titleBox .inner h1 span{
	font-size:20px;
	display:block;
	color:#FFF;
	text-align: center;
	font-weight: 400;
    font-family: Inter;
    line-height:2.0;
}


/* mainvisual
--------------------------------------------------*/
#mainvisual{
	background:#FFF;
}


#mainvisual .inner{
	display: flex;
	align-items: center;
	padding:40px 20px;
}


#mainvisual .inner > div{
	flex:1;
}

#mainvisual .inner > div img{
	width: 100%;
    height: auto;
}

#mainvisual .inner > div p{
	font-size:16px;
	line-height: 1.8;
}

#mainvisual h2{
    font-size:36px;
    color:var(--comColor);
    position:relative;
    line-height: 2.0;
    margin:0 0 10px;
}

#mainvisual h3{
    font-size:20px;
    line-height: 1.7;
    text-align: left;
}

#mainvisual h2 span{
	display:flex;
    color:var(--comColor);
    font-size: 18px;
    align-items: center;
	font-weight: 400;
    font-family: Inter;
}

#mainvisual h2 span:after{
	content:"";
	display: block;
	height:2px;
	width:140px;
    background:var(--comColor);	
    margin-left:20px;
}


/* ################### 880以下 ###################*/
@media(max-width:880px){


main h2{
    font-size:24px;
}


}

div.more-info{
    padding:50px 0 0;
    text-align: center;
}

div.more-info a{
	display:flex;
	justify-content: center;
	align-items: center;
	height:55px;
	text-decoration: none;
	background:var(--comColor);
	color:#FFF;
	max-width:fit-content;
	padding:0 40px;
	border-radius: 28px;
	margin:0 auto;
	border:2px solid var(--comColor);
}

div.more-info a:hover{
	background:#FFF;
	color:var(--comColor);
}


/* footer
-------------------------------*/
footer{
	padding:0;
	background:#333;
}

footer .inner{
	padding:20px;
	text-align: center;
}

footer #footerLogo{
	padding:30px 0;
}

footer #footerLogo img{
	width:100%;
	max-width:190px;
	height:auto;
}

#footernav{
	padding:20px 0;
	display: flex;
	justify-content: left;
	gap:20px;
	border-top:1px solid #FFF;
}

#footernav a{
	color:#F3F4F6;
	text-decoration: none;
	font-size:14px;
}

#copyright{
	font-size:12px;
	color:#ccc;
}