@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*----------------------------------------------------
 default
----------------------------------------------------*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body{line-height:1;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}nav ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}ins{background-color:#ff9;color:#000;text-decoration:none;}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}del{text-decoration:line-through;}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}input,select{vertical-align:middle;}
a { -webkit-tap-highlight-color: rgba(200,200,555,0.6); }
a:link { text-decoration: none; color: #7DA9C4; }
a:visited { text-decoration: none; color: #7DA9C4; }
img { vertical-align: top; }
li { list-style-type:none; }
h1, h2, h3 { font-weight: normal; }
/*----------------------------------------------------
 clearfix
----------------------------------------------------*/
.clr:after { content: ''; display: block; clear: both; }

/*----------------------------------------------------
 Body
----------------------------------------------------*/
html { min-height: 100%; position: relative;}
body {
	background-color:#FAFAFA;
	color: #464646;
	font-family: 'Noto Sans Japanese', sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.4;
	text-align: left;
	width: 100%;
	height: 100%;
	-webkit-text-size-adjust: 100%;
}
body#registration{
	margin-bottom: 47px;
	background-color: #7DA9C4;
}
/*-------------------
 a.btn
-------------------*/
a.btn{
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	color: #FFF;
	padding: 8px 16px;
	margin: 0 8px;
	border-radius: 16px;
	cursor: pointer;
}


/*----------------------------------------------------
 header
----------------------------------------------------*/
header{
	background-color: #FAFAFA;
	width: 100%;
	height: 48px;
}
header .logo{
	float: left;
	padding: 12px 0 0 16px;
}
header .logo img{
	height: 24px;
}
header .btnArea{
	float: right;
	width: 264px;
	padding: 12px 8px 0 0;
	font-size: 0;
}
header .btnArea a.btn{
	font-size: 14px;
	padding: 5px 16px;
}
header .btnArea a.login{
	background-color: #5D93B5;
}
header .btnArea a.login:hover{
	background-color: #3F637D;
}
header .btnArea a.regist{
	background-color: #F2C514;
}
header .btnArea a.regist:hover{
	background-color: #D9B317;
}

#notice-top {
	text-align: center;
	font-size: 24px;
	color: #e86048;
	padding: 10px 0;
}

/*----------------------------------------------------
 subHeader
----------------------------------------------------*/
#subHeader{
	background-color: #E9EAEC;
	width: 100%;
	height: 48px;
	position: fixed;
	top: -56px;
	left: 0;
	z-index: 100;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}
#subHeader .logo{
	float: left;
	padding: 12px 0 0 16px;
}
#subHeader .logo img{
	height: 24px;
}
#subHeader .btnArea{
	float: right;
	width: 264px;
	padding: 12px 8px 0 0;
	font-size: 0;
}
#subHeader .btnArea a.btn{
	font-size: 14px;
	padding: 5px 16px;
}
#subHeader .btnArea a.login{
	background-color: #5D93B5;
}
#subHeader .btnArea a.login:hover{
	background-color: #3F637D;
}
#subHeader .btnArea a.regist{
	background-color: #F2C514;
}
#subHeader .btnArea a.regist:hover{
	background-color: #D9B317;
}


/*----------------------------------------------------
 #topImage
----------------------------------------------------*/
#topImage{
	width: 100%;
	height: 700px;
	background: url("../img/topimage_bg.jpg") top center no-repeat;
	background-size: cover;
	text-align: center;
}
#topImage h1 .toolName{
	font-size: 36px;
	font-weight: 500;
	color: #FFF;
	padding: 40px 0 16px;
}
#topImage h1 .logo{
	margin: 0 0 24px;
}
#topImage h1 .subName{
	display: inline-block;
	background-color: #7DA9C4;
	border-radius: 8px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1;
	color: #FFF;
	padding: 10px 16px;
	margin: 0 0 72px;
}
#topImage h1 .subName img{
	width: 20px;
	margin: 2px 8px 0;
}

#topImage .topImg{
	margin: 0 0 64px;
}
#topImage a.regist{
	background-color: #F2C514;
	font-size: 24px;
	padding: 10px 70px;
	margin: 0;
	border-radius: 24px;
}
#topImage a.regist span{
	font-size: 28px;
	font-weight: 600;
}
#topImage a.regist:hover{
	background-color: #D9B317;
}


/*----------------------------------------------------
 section
----------------------------------------------------*/
section{
	box-sizing: border-box;
	padding: 40px 0 112px;
}
section .inner{
	margin: 0 auto;
}
section .inner .title{
	height: 136px;
	text-align: center;
}
section .title h3{
	font-size: 24px;
	font-weight: 500;
	color: #5D93B5;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 1);
}
section .title h3 strong{
	font-size: 40px;
	font-weight: 600;
}
section .title h3 em{
	font-size: 32px;
	font-weight: 600;
	font-style: normal;
}

section .title .egTitle{
	position: relative;
	width: 320px;
	margin: 16px auto 0;
	border-top: 1px solid #A3A3A3;
}
section .title .egTitle p{
	display: inline-block;
	background-color: #FAFAFA;
	color: #A3A3A3;
	font-weight: 600;
	padding: 0 8px;
	position: absolute;
	top: -10px;
	left: 50%;
	-webkit-transform: translate( -50%, 0);
	-ms-transform: translate( -50%, 0);
	transform: translate( -50%, 0);
}


/*----------------------------------------------------
 #canDo
----------------------------------------------------*/
#canDo{
	padding: 40px 0 48px;
}
#canDo .inner{
	max-width: 1040px;
}
#canDo .contents{
	font-size: 0;
	text-align: center;
}
/*
#canDo .contents > div{
	display: inline-block;
	width: 528px;
	margin: 0 16px 32px;
}
*/
#canDo .contents > div{
	display: inline-block;
	width: 50%;
	padding: 0 32px 64px;
	box-sizing: border-box;
}
#canDo .contents > div img{
	width: 100%;
}

/*----------------------------------------------------
 #simply
----------------------------------------------------*/
#simply{
	background-color: #E9EAEC;
}
#simply .inner{
	max-width: 976px;
	padding: 0 16px;
}
#simply .title .egTitle p{
	background-color: #E9EAEC;
}
#simply .contents h4{
	position: relative;
	font-size: 24px;
	font-weight: 500;
	padding: 0 0 0 24px;
	margin: 0 0 16px;
}
#simply .contents h4:before{
	content: "";
	width: 20px;
	height: 20px;;
	background-color: #3F637D;
	border-radius: 50%;
	position: absolute;
	top: 8px;
	left: 0;
}
#simply .contents .bsWrap h4:before{
	background-color: #F2C514;
}
#simply .contents h4 img{
	height: 32px;
	margin: 0 5px 0;
	vertical-align: baseline;
}

#simply .contents .wrap{
	padding: 0 0 64px;
	border-bottom: 1px solid #D9D9D9;
}
#simply .contents .bsWrap{
	padding: 64px 0 0;
}
#simply .contents .simplyImg img{
	width: 100%;
}


/*----------------------------------------------------
 #speedy
----------------------------------------------------*/
#speedy .inner{
	max-width: 976px;
	padding: 0 16px;
}
#speedy .contents .wrap{
}
#speedy .contents .wrap img{
	width: 100%;
}

/*----------------------------------------------------
 #plan
----------------------------------------------------*/
#plan{
	min-height: 668px;
	background: url("../img/plan_bg.jpg") top center no-repeat;
	background-size: cover;
	text-align: center;
}
#plan .inner{
	max-width: 1008px;
}
#plan .title h3{
	color: #FFF;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
#plan .title .egTitle{
	border: 0;
}
#plan .title .egTitle:before{
	content: "";
	width: 137px;
	height: 1px;;
	background-color: #D9D9D9;
	position: absolute;
	top: 0;
	left: 0;
}
#plan .title .egTitle:after{
	content: "";
	width: 137px;
	height: 1px;;
	background-color: #D9D9D9;
	position: absolute;
	top: 0;
	right: 0;
}
#plan .title .egTitle p{
	background-color: transparent;
	color: #D9D9D9;
}
#plan .contents{
	font-size: 0;
}
/* ----- planWrap ----- */
#plan .planWrap{
	display: inline-block;
	max-width: 504px;
	font-size: 0;
}

/* ----- planBox ----- */
.planBox{
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	background-color: #FFF;
	width: 220px;
	height: 380px;
	margin: 0 16px 32px;
	text-align: center;
	vertical-align: top;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.65);
}
/* -------------------- planName */
.planBox .planName{
	font-size: 14px;
	color: #FFF;
	padding: 6px 0 12px;
}
.planBox .planName b{
	display:block;
	font-size: 28px;
	font-weight: 500;
	line-height: 1;
}
/* -------------------- price */
.planBox .price{
	font-size: 24px;
	font-weight: 600;
	line-height: 1;
	margin-top: 8px;
}
.planBox .price b{ font-size: 40px;}
.planBox .price strong{ font-size: 48px;}

/* -------------------- user */
.planBox .user{
	height: 48px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	color: #A3A3A3;
	margin: 10px 0;
}
.planBox .user b{ font-size: 24px;}
.planBox .user p{
	font-size: 12px;
	font-weight: 400;
	color: #3F637D;
}
/* -------------------- project & screen*/
.planBox .project,
.planBox .screen{
	height: 40px;
	font-size: 16px;
	text-align: left;
	font-weight: 600;
	color: #A3A3A3;
	padding: 0 0 0 18px;
	margin: 0 0 8px;
}
.planBox .project .box,
.planBox .screen .box{
	display: inline-block;
	background-color: #6DC174;
	width: 60px;
	font-size: 24px;
	line-height: 1;
	text-align: center;
	color: #FFF;
	padding: 6px 0;
	margin: 0 4px 0 0;
	border-radius: 8px;
}
.planBox .screen small{
	font-size: 12px;
	font-weight: 500;
}
/* -------------------- function & ad*/
.planBox .function,
.planBox .ad{
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	color: #A3A3A3;
}
.planBox .function{
	margin: 20px 0;
}

/* ----------------------------------*/

.planBox.free{ border: 4px solid #6DC174;}
.planBox.free .planName,
.planBox.free .box{ background-color: #6DC174;}
.planBox.free .price{ color: #6DC174;}


.planBox.personal{ border: 4px solid #5D93B5;}
.planBox.personal .planName,
.planBox.personal .box{ background-color: #5D93B5;}
.planBox.personal .price,
.planBox.personal .ad{ color: #5D93B5;}
.planBox.personal .recTop{
	position: absolute;
	top: -11px;
	left: -11px;
}
.planBox.personal .recBottom{
	position: absolute;
	bottom: -14px;
	right: -14px;
}


.planBox.team{ border: 4px solid #3F637D;}
.planBox.team .planName,
.planBox.team .box{ background-color: #3F637D;}
.planBox.team .price,
.planBox.team .ad{ color: #3F637D;}
.planBox.team .function{ color: #3F637D;}


.planBox.customize{ border: 4px solid #F2C514;}
.planBox.customize .planName{ background-color: #F2C514;}
.planBox.customize .ttl{
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	margin: 16px 0 0;
}
.planBox.customize .charge{
	font-size: 14px;
	margin: 16px 0 0;
}
.planBox.customize .notes{
	font-size: 14px;
	color: #A3A3A3;
	margin: 24px 0 0;
}
.planBox.customize a.contact{
	position: relative;
	background-color: #F2C514;
	padding: 12px 48px 12px 32px;
	margin: 24px 0 0;
	border-radius: 20px;
}
.planBox.customize a.contact:before{
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	position: absolute;
	top: 50%;
	right: 16px;
	border-top: 2px solid #FFF;
	border-right: 2px solid #FFF;
		-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.planBox.customize a.contact:hover{
	background-color: #D9B317;
}

/*----------------------------------------------------
 #QandA
----------------------------------------------------*/
#QandA{
	background-color: #E9EAEC;
}
#QandA .title .egTitle p{
	background-color: #E9EAEC;
}
#QandA .inner{
	max-width: 912px;
	padding: 0 32px
}
#QandA .balloon{
	position: relative;
	box-sizing: border-box;
	border-radius: 24px;
	width: 520px;
	padding: 20px 16px 20px 64px;
	margin: 0 0 24px;
	font-size: 16px;
	box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
#QandA .balloon.question:before{
	content: "";
	display: block;
	background: url("../img/balloon_q.png") 0 0 no-repeat;
	width: 55px;
	height: 39px;
	position: absolute;
	bottom: -17px;
	left: 0;
}
#QandA .balloon.answer:before{
	content: "";
	display: block;
	background: url("../img/balloon_a.png") 0 0 no-repeat;
	width: 51px;
	height: 39px;
	position: absolute;
	bottom: -17px;
	right: -1px;
}

#QandA .balloon.question{
	background-color: #7DA9C4;
	font-weight: 600;
	color: #FFF;
	float: left;
}

#QandA .balloon.answer{
	background-color: #FFF;
	font-weight: 500;
	color: #5D93B5;
	float: right;
}

#QandA .balloon:after{
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	position: absolute;
	top: 16px;
	left: 16px;
}
#QandA .balloon.question:after{
	background: url("../img/icon_q.png") 0 0 no-repeat;
}
#QandA .balloon.answer:after{
	background: url("../img/icon_a.png") 0 0 no-repeat;
}


/*----------------------------------------------------
 #regist
----------------------------------------------------*/
#regist{
	background-color: #7DA9C4;
	text-align: center;
}
#regist .title h3{
	color: #FFF;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
#regist .title .egTitle{
	border-top: 1px solid #D9D9D9;
}
#regist .title .egTitle p{
	background-color: #7DA9C4;
	color: #D9D9D9;
}
#regist h2{
	font-size: 32px;
	font-weight: 600;
	margin: 0 0 16px;
}
#regist .notes{
	font-size: 16px;
	margin: 0 0 56px;
}
#regist a.regist{
	background-color: #F2C514;
	font-size: 24px;
	padding: 10px 70px;
	margin: 0;
	border-radius: 24px;
}
#regist a.regist span{
	font-size: 28px;
	font-weight: 600;
}
#regist a.regist:hover{
	background-color: #D9B317;
}


/*----------------------------------------------------
 footer
----------------------------------------------------*/
footer {
	background-color: #3F637D;
	width: 100%;
	text-align: center;
}

footer .logoArea .toolName{
	font-size: 32px;
	font-weight: 500;
	color: #FFF;
	padding: 40px 0 16px;
}
footer .logoArea .logo{
	margin: 0 0 24px;
}
footer .logoArea .subName{
	display: inline-block;
	background-color: #7DA9C4;
	border-radius: 8px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
	color: #FFF;
	padding: 7px 16px;
	margin: 0 0 40px;
}
footer .logoArea .subName img{
	margin: 1px 8px 0;
}

/* ----- nav -----*/
nav.ankerNavi ul{
	font-size: 0;
	margin: 0 0 32px;
}
nav.ankerNavi li{
	display: inline-block;
	margin: 0 8px;
}
nav.ankerNavi li a{
	display: block;
	background-color: #3F637D;
	border-radius: 16px;
	padding: 7px 16px;
	font-size: 18px;
	font-weight: 500;
	color: #FFF;
	line-height: 1;
}
nav.ankerNavi li a:hover{
	background-color: #2D3D4A;
}

/* ----- bottomFooter -----*/
.bottomFooter{
	background-color: #464646;
	width: 100%;
	padding: 14px 0;
	font-size: 0;
}
.bottomFooter div{
	display: inline-block;
	font-size: 14px;
}
.bottomFooter .linkArea{
	margin: 0 64px 0 0;
}
.bottomFooter .linkArea a{
	margin: 0 48px 0 0;
}
.bottomFooter .linkArea a:hover{
	color: #FFF;
}
.bottomFooter .copyright{
	color: #7DA9C4;
}

body#registration footer{
	position: absolute;
	bottom: 0;
	height: 47px;
}

/*----------------------------------------------------
 #regist .agree
----------------------------------------------------*/
#regist .agree .wrap{
	box-sizing: border-box;
	max-width: 560px;
	padding: 16px 4px 8px 16px;
	margin: 0 auto 48px;
	background-color: #D9D9D9;
	border: 1px solid #464646;
	border-radius: 4px;
}
#regist .agree .wrap h3{
	font-size: 16px;
	font-weight: 600;
	padding: 0 0 16px;
	margin: 0 0 8px;
	border-bottom: 1px solid #A3A3A3;
}
#regist .agree .wrap .container{
	height: 144px;
	padding: 0 8px 0 0;
	font-size: 13px;
	text-align: left;
	overflow: auto;
}
#regist .agree .container h5{
	margin: 24px 0 0;
}
#regist .agree .container p{
	margin: 4px 0;
}
.agree .container .right{
	text-align: right;
}
#regist .agree .notes{
	font-size: 16px;
	color: #FFF;
	margin: 0 0 24px;
}

#regist .agree .btnArea{
	font-size: 0;
}
#regist .agree .btnArea a.btn{
	width: 176px;
	padding: 11px 0;
	font-size: 18px;
	border-radius: 20px;
}
#regist .agree .btnArea a.disagree{
	background-color: #546672;
	margin: 0 16px 0 0;
}
#regist .agree .btnArea a.disagree:hover{
	background-color: #2D3D4A;
}
#regist .agree .btnArea a.agree{
	background-color: #F2C514;
	margin: 0 0 0 16px;
}
#regist .agree .btnArea a.agree:hover{
	background-color: #D9B317;
}


/*----------------------------------------------------
 #regist .dataInput
----------------------------------------------------*/
#regist .dataInput form{
	max-width: 560px;
	padding: 0 8px;
	margin: 0 auto;
	text-align: left;
}
#regist .dataInput .inputBox{
	box-sizing: border-box;
	background-color: #FFF;
	border: 1px solid #464646;
	border-radius: 3px;
	width: 100%;
	height: 48px;
	margin: 0 0 32px;
}
.inputBox input{
	box-sizing: border-box;
	width: calc(100% - 140px);
	padding: 12px 8px;
	font-size: 16px;
	border: 0;
}
.inputBox label{
	box-sizing: border-box;
	width: 136px;
	font-size: 16px;
	font-weight: 500;
	color: #5D93B5;
	padding: 12px 8px;
	display: inline-block;
	vertical-align: middle;
}
#regist .dataInput input::-webkit-input-placeholder{color: #D9D9D9;}
#regist .dataInput input:-ms-input-placeholder{color: #D9D9D9;}
#regist .dataInput input::-moz-placeholder{color: #D9D9D9;}

.dataInput .btnArea{
	position: relative;
	text-align: center;
}
.dataInput .btnArea a.back{
	padding: 11px 24px;
	margin: 0;
	font-size: 18px;
	border-radius: 20px;
	background-color: #546672;
	position: absolute;
	top: 0;
	left: 0;
}
.dataInput .btnArea a.back:hover{
	background-color: #2D3D4A;
}

#regist button[type="submit"]{
	display: inline-block;
	background-color: #F2C514;
	width: 304px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	color: #FFF;
	padding: 11px 0;
	margin: 0;
	border-radius: 20px;
	cursor: pointer;
	border: 0;
}
#regist button[type="submit"]:hover{
	background-color: #D9B317;
}


/*----------------------------------------------------
 #regist .thanks
----------------------------------------------------*/
#regist .thanks h2{
	color: #3F637D;
	margin: 0 0 40px;
}

#regist .thanks .userData{
	display: inline-block;
	text-align: left;
	margin: 0 0 40px;
}
#regist .thanks .userData .row{
	font-size: 0;
	margin: 0 0 16px;
}
#regist .thanks .userData .row > span{
	display: inline-block;
	font-size: 16px;
}
#regist .thanks .userData .ttl{
	width: 136px;
	font-weight: 600;
	color: #3F637D;
}

#regist .thanks .notes{
	font-size: 14px;
	color: #FFF;
	margin: 0 0 64px;
}

#regist .thanks .btnArea a.top{
	width: 184px;
	padding: 10px 0;
	margin: 0;
	font-size: 18px;
	border-radius: 20px;
	background-color: #546672;
}
#regist .thanks .btnArea a.top:hover{
	background-color: #2D3D4A;
}


/*----------------------------------------------------
 プライバシーポリシー & 利用規約 #terms
----------------------------------------------------*/
#terms{
	background-color: #7DA9C4;
	text-align: center;
}
#terms .title h3{
	color: #FFF;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
#terms .title h3 span{
	display: block;
	font-size: 18px;
}

#terms .title .egTitle{
	border-top: 1px solid #D9D9D9;
}
#terms .title .egTitle p{
	background-color: #7DA9C4;
	color: #D9D9D9;
}

#terms .termsWrap{
	box-sizing: border-box;
	max-width: 720px;
	padding: 0 16px 24px;
	margin: 0 auto 48px;
	background-color: #D9D9D9;
	border: 1px solid #464646;
	border-radius: 4px;
	font-size: 13px;
	text-align: left;
}
#terms .termsWrap h5{
	margin: 24px 0 0;
}
#terms .termsWrap p{
	margin: 4px 0;
}
#terms .termsWrap .right{
	text-align: right;
}
#terms .btnArea a.top{
	width: 168px;
	padding: 11px 0;
	margin: 0;
	font-size: 18px;
	border-radius: 24px;
	background-color: #546672;
}
#terms .btnArea a.top:hover{
	background-color: #2D3D4A;
}