@charset "utf-8";

@import url("./font-awesome.css");

* {
	margin : 0 ;
	padding : 0 ;
	font-size : 100% ;
	box-sizing: border-box;
}

.bold{font-weight: 400;}
a{text-decoration: none;}

/* #head*/
#headBox{
	position: fixed;
	top: 0; left: 0;
	background: #fff;
	width: 100%;
	z-index: 11;
}
#head {
	display: flex;
	justify-content: space-between;
	align-items: center;/*flex-end*/
	max-width: 1200px;
	margin: 20px auto 20px;
}
#head .navi1{width: 170px;}
#head .navi2{width: calc(100% - 600px);}
#head .navi3{width: 400px;}

#head_sp {
	display: none;
}
/* 2019 */
#head_sp h1{
	width: 110px;
}

#head_sp .flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-right: 20px;
}
#head_sp .flex a {
	display: flex; border-radius: 8px;
	justify-content: center; align-items: center;
	height: 100%;
}
#head_sp .flex a.tel_sp {
	background: #3b98d0;
	border-radius: 30px;
	margin-right: 20px;
	padding: 0 25px;
}
#head_sp .flex a.contact_sp {
	background: #f40b7b;
	border-radius: 30px;
	font-size: 16px; color: #fff;
	padding: 10px; font-weight: 600;
	text-align: center;
}

/*	お問い合わせ/スピード見積り*/
#head .navi3 a {display: block;}
#head .navi3 a.contact {
	background: #f40b7b;
	border-radius: 30px;
	font-weight: 600;
	color: #fff;
	width: 220px;
	font-size: 13px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	transition: all .3s;
}
#head .navi3 a.contact:hover{
	background: #ad0355;
	text-decoration: none;
}
#head .navi3 a.contact::after{
	content: "\f138";
	font-family: FontAwesome;
	color: #fff;
	font-size: 12px;
	transform: translateY(-50%);
	top: 50%;  right: 10px;
	position: absolute;
}
#head ul.flex.me {
	display: flex;
	justify-content: space-around;
}
#head ul.flex.me li a {
	color: #000;
}
.navi3.flex {
	display: flex;
	justify-content: space-between;
	/*align-items: flex-end;*/
}
.marginB95 {margin-bottom: 100px;}

/* #keyVisual*/
#keyVisual {
	padding: 100px 0 100px;
	background-image:url(../img/keyvisual.jpg);
	background-repeat: no-repeat;
	background-position:	center center;
	background-size:	cover;
}
#keyVisual .keyTxt {
	padding: 30px 0 30px;
	font-size: 42px; color: #fff;
	font-weight: 600; text-align: center;
	letter-spacing: 2px;
}
#keyVisual .keyTxt p {
	font-size: 18px;font-weight: 100;
	margin-top: 30px; /*letter-spacing: 0;*/
}

/* #task */
#task {
	margin: 30px auto 30px;
	position: relative;
	width: 840px;
}
#task img{
	width: 100%; height: auto;
	background-image:url(../img/task_bg.png);
	background-repeat: no-repeat;
	background-position:	center center;
	background-size:	contain;
}
#task .t1 {
	position: absolute;
	padding: 20px 25px;
	top: 0;
	left: 0;
}
#task .t1 .flex {
	display: flex;
	/*justify-content: space-between;*/
}
#task .t1 .flex .l {
	background : linear-gradient(90deg, #3dcbe1, #3866c0);
	display: flex;
	justify-content: center;
	align-items: center;
}
#task .t1 .flex .l h2{
	font-size: 28px; color: #fff;
	text-align: center; padding: 30px;
	line-height: 1.2;
}
#task .t1 .flex ul.r {
	padding-left: 30px;
}
#task .t1 .flex ul.r li {
	font-size: 20px;font-weight: 400;
	margin-top: 18px; position: relative;
	padding-left: 30px;
	/*letter-spacing: 0;*/
	color: #222;
}
#task .t1 .flex ul.r li::after {
	content: "";
	position: absolute;
	width: 20px;
	height	: 20px;
	background-image:url(../img/task_mark.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 20px 20px;
	top : 0px;
	left : 0px;
}
#task_sp {
	display: none;
	margin: 30px auto 80px;
	max-width: 400px;
	padding: 10px; background: #fff;
}
#task_sp .bg {
	background: #eee;
	padding: 20px; position: relative;
}
#task_sp .bg::after {
	content: "";
	position: absolute;
	width: 100%;
	height	: 66px;
	background-image:url(../img/sankaku.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	bottom : -66px;
	left : 0px; z-index: 10;
}
#task_sp .grad {
	background : linear-gradient(90deg, #3dcbe1, #3866c0);
	display: flex;
	justify-content: center; align-items: center;
	padding: 20px 0; margin-bottom: 30px;
}
#task_sp .grad h2 {
	font-size: 24px;font-weight: 400; color: #fff;
}
#task_sp ul.ta1 {
	background-image:url(../img/person_sp.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;

}
#task_sp ul.ta1 li {
	font-size: 18px;font-weight: 400;
	position: relative; padding-left: 30px;
	color: #000; line-height: 1.3;
	 margin-bottom: 10px;
}
#task_sp ul.ta1 li::after {
	content: "";
	position: absolute;
	width: 20px;
	height	: 20px;
	background-image:url(../img/task_mark.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 20px 20px;
	top : 0px;
	left : 0px;
}

/* #about*/
#about {
	padding: 70px 0 70px;
	background-image:url(../img/about.jpg);
	background-repeat: no-repeat;
	background-position:	center center;
	background-size: cover;
}
#about .keyTxt {
	font-size: 32px; color: #fff;
	font-weight: 600; text-align: center;
	letter-spacing: 2px;
}
#about .keyTxt .des {
	text-align: left;
	margin: 30px auto 0;
	width: 690px; line-height: 1.3;
}
#about .keyTxt p {
	font-size: 18px;font-weight: 100;
	margin-top: 12px;position: relative;
	padding-left: 30px;
	font-weight: 500;
}
#about .keyTxt p::after {
	content: "";
	position: absolute;
	width: 20px;
	height	: 20px;
	background-image:url(../img/mark40wh.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 20px 20px;
	top : 0px;
	left : 0px;
}

/* common */
.marginB10 {margin-bottom: 10px;}
.marginB20 {margin-bottom: 20px;}
.marginB30 {margin-bottom: 30px;}
.marginB50 {margin-bottom: 50px;}

.yellow{color: #f6fb0a;}
h2.ti {
	margin: 0 auto;
	font-size: 36px; font-weight: 600;
	color: #fff;
}
h2.grad {
	margin: 0 auto;
	font-size: 36px; font-weight: 600;
	background : linear-gradient(90deg, #3dcce1, #3865c0);
	-webkit-background-clip: text;
	-webkit-text-fill-color: rgba(255,255,255,0.0);
	color: #3865c0;
}
h3.grad {
	margin: 0 auto;
	font-size: 30px; font-weight: 600;
	background : linear-gradient(90deg, #3dcce1, #3865c0);
	-webkit-background-clip: text;
	-webkit-text-fill-color: rgba(255,255,255,0.0);
	color: #3865c0;
}
h2.campaign {
	margin: 0 auto;
	font-size: 36px; font-weight: 600;
	background : linear-gradient(90deg, #3dcce1, #3865c0);
	-webkit-background-clip: text;
	-webkit-text-fill-color: rgba(255,255,255,0.0);
	color: #3865c0;
}
h2.voice {
	margin: 0 auto;
	font-size: 36px; font-weight: 600;
	background : linear-gradient(90deg, #3dcce1, #3865c0);
	-webkit-background-clip: text;
	-webkit-text-fill-color: rgba(255,255,255,0.0);
	color: #3865c0;
}
h2.grad.em2 {width: 2em;}
h2.grad.em5 {width: 5em;}
h2.grad.em7 {width: 7em;}
h2.campaign.em7 {width: 7em;}
h2.campaign.em8 {width: 8em;}
h2.voice.em7 {width: 7em;}
h2.voice.em8 {width: 8em;}
h3.grad.em3 {width: 3em;}
@media all and (-ms-high-contrast: none){
	h2.grad, h3.grad {background: none;}
}
p.gradU {
	padding: 10px 0 0px; font-size: 13px;
	color: #222;
	font-weight: bold;
}
p.des {
	padding: 40px 0 40px;
	font-size: 18px;
	color: #222;
	font-weight: 300;
}
p.des2 {
	padding: 20px 0 20px;
	font-size: 16px;
	color: #222;
	font-weight: bold;
}

p.gradU.wh {color: #fff;}

/* #strong */
#strong {
	padding: 50px 0 1px;
	width: 100%;
	background: #eee;
	text-align: center;
}
#strong ul.flex3 {
	display: flex; width: 100%;
	justify-content: space-between;
}
#strong ul.flex3 li {
	width: 33.33%; position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
#strong ul.flex3 li:hover {
}
#strong ul.flex3 img {
	width: 100%; height: auto;
}
#strong ul.flex3 img:hover {
}
#strong ul.flex3 img.sp {display: none;}
#strong ul.flex3 li div {
	position: absolute; color: #fff;
	font-size: 20px;font-weight: bold;
	text-align: center;
	width: 100%;
}

#strong .bg_wh {
	margin: 50px auto;
	background: #fff;
	max-width: 800px;
	padding: 30px 40px;
}
#strong ul.other {
	padding: 20px 0;
}
#strong ul.other li {
	font-size: 16px;font-weight: 400;
	margin-top: 18px; position: relative;
	padding-left: 30px;
	text-align: left;
	line-height: 1.4;
	color: #222;
}
#strong ul.other li::after {
	content: "";
	position: absolute;
	width: 17px;
	height	: 17px;
	background-image:url(../img/task_mark.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 17px 17px;
	top : 0px;
	left : 0px;
}

/* #plan */
#plan {
	padding: 50px 0 0px;
	text-align: center;
}
#plan ul.flex4 {
	display: flex; width: 100%;
	max-width: 1000px;
	flex-wrap: wrap; margin: 0 auto;
	/*align-items: center;
	justify-content: space-between;*/
	background: #2680c5;
}
#plan ul.flex4 li {
	width: 50%; /*position: relative;*/
	margin: 0; padding: 0;
	cursor: pointer; overflow: hidden;

}
#plan ul.flex4 li .liBox{
	position: relative;
}
/* 高さを認識させる */
/*#plan ul.flex4::before, #plan ul.flex4::after {
  content: "";
  clear: both;
  display: block;
}*/

#plan ul.flex4 li .planBox{
	display: flex;
	justify-content: center;
	align-items: center;
}
#plan ul.flex4 img {
	width: 100%; height: auto;
}
#plan ul.flex4 img.sp {display: none;}
#plan ul.flex4 li p{
	position: absolute; color: #fff;
	font-size: 30px;font-weight: 400;
	text-align: center; line-height: 1.2;
	width: 100%;
}

#plan ul.flex4 li.hover img {display: none;}
#plan ul.flex4 li.hover p {display: none;}
#plan ul.flex4 li.hover {
	background: #2680c5;
	text-align: left; padding: 20px; line-height: 1.5;
	display: flex;
	justify-content: center;
	align-items: center;
	animation-name: fadein_b;
	animation-duration: 0.6s;
	animation-iteration-count: 1;
}
@keyframes fadein_b {
	from {
		opacity: 0;transform: translateY(30px);
	}
	to {
		opacity: 1; transform: translateY(0);
	}
}
@keyframes fadein_t {
	from {
		opacity: 0;transform: translateY(-60px);
	}
	to {
		opacity: 1; transform: translateY(0);
	}
}
@keyframes fadein_f {
	from {
		opacity: 0;transform: translateY(-30px);
	}
	to {
		opacity: 1; transform: translateY(0);
	}
}
@keyframes strong_a {
	from {
		opacity: 1;transform: translateY(0);
	}
	to {
		opacity: 1; transform: translateY(10px);
	}
}
#plan ul.flex4 li .hoverTxt {display: none;}
#plan ul.flex4 li.hover .hoverTxt {
	display: block;
	color: #fff;
	font-size: 16px;
	height: 100%;
}
.small_fr{
	font-size: 12px;
	line-height: 16px;
}


/* #price */
#price {
	padding: 80px 0 0px;
	/*background: #eee;*/
	text-align: center;
	background-image: url(../img/bg_dots.jpg);
	background-size: 32px 32px;
}
#accordion {
	margin: 30px auto;
	max-width: 1000px;
	text-align: left;
}
#accordion .accord {
	margin-bottom: 20px;
}
#accordion .accord .desc {
	background: #ededed;
	padding: 20px 30px;
	font-size: 13px; text-align: left;
	margin: 10px 0; line-height: 1.5;
	display: none;
}
#accordion .accord .desc.show {
	display: block;
	color: #222;
	animation-name: fadein_t;
	animation-duration: 0.4s;
	animation-iteration-count: 1;
}
#accordion .accord .desc a.button{
	background: #168dd3;
	padding: 7px 7px;
	font-size: 15px; text-align: center;
	color: #fff; display: block;
	margin: 10px 0 0 auto;
	width: 14em; border-radius: 8px;
}
#accordion .accord .desc p.ti {
	font-size: 15px; font-weight: 600;
	line-height: 1.0;
 	padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
 	color: #000;/*文字色*/
 	background: #f4f4f4;/*背景色*/
 	border-right: solid 2px #c4c4c4;/*左線*/
 	border-bottom: solid 2px #c4c4c4;/*下線*/
}
#accordion .accord .desc p.ti_nakami {
	font-size: 15px; font-weight: 600;
 	padding: 0.5em 1.5em;/*文字の上下 左右の余白*/
 	color: #000;/*文字色*/
}
#accordion .sp {display: none;}
#accordion div.flex2 {
	color: #fff;
	position: relative;
	display: flex; width: 100%;
	justify-content: space-between;
	background : linear-gradient(90deg, #3dcce1, #3865c0);
	padding: 15px 0px;
	cursor: pointer;
}
#accordion div.flex2::after {
	content: "";
	position: absolute;
	display: block;
	width: 74px; height: 74px;
	top: 50%; left: calc(50% - 20px);
	border-top: 18px solid #fff;
	border-right: 18px solid #fff;
	/*transform: scaleX(0.65) rotate(45deg) translate(-50%, -50%);*/
	transform: scaleX(0.62) translate(-50%, -50%) rotate(45deg);
}
#accordion div.flex2 > div {
	width: 50%; display: flex;
	align-items: center;
}
#accordion div.flex2 .rBox {
	display: flex;align-items: center;
	justify-content: space-around;
	padding-left: 30px;width: 100%;
	 line-height: 1.5;
}
#accordion div.flex2 div h3 {
	font-size: 20px; font-weight: 600;
	padding-left: 30px;
	color: #fff;
}



/* #flow */
#flow {
	margin: 80px 0 0;
	padding: 50px 0 50px;
	background: #eee;
	text-align: center;
}
#flow .max1000 {
	margin: 20px auto;
	max-width: 1000px;
}
#flow .max1000 img {
	width: 100%; height: auto;
}
#flow .max1000 img.sp {display: none;}

/* #campaign */
#campaign {
	margin: 80px 0 0;
	padding: 50px 0 50px;
	background: #eee;
	text-align: center;
}
#campaign .max1000 {
	margin: 5px auto;
	max-width: 750px;
}
#campaign .max1000 img {
	width: 100%; height: auto;
}
#campaign .max1000 img.sp {display: none;}

.img_wrap{
	border: 1px solid #ddd;
	width: 100%;
	max-width: 750px;
	height: auto;
	margin: 20px auto 0;
	transition-duration: 0.5s;
  }
  .img_wrap img{
	width: 100%;
	cursor: pointer;
  }
  .img_wrap:hover{
	box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
	transform: translateY(-10px);
	transition-duration: 0.5s;
  }

/* #voice */
#voice {
	margin: 0px 0 40px;
	padding: 50px 0 50px;
	background: #fff;
	text-align: center;
}
#voice .max1000 {
	margin: 5px auto;
	max-width: 750px;
}
#voice .max1000 img {
	width: 100%; height: auto;
}
#voice .max1000 img.sp {display: none;}

/* #faq */
#faq {
	padding: 80px 0 10px;
	text-align: center;
}
#faq .qa{
	text-align: left;
	margin: 20px auto 0;
	max-width: 800px;
}
#faq .qa .q {
	background: #e3e3e3;
	position: relative;
	font-size: 18px;font-weight: bold;
	padding: 20px 10px 20px 75px;
	cursor: pointer;
	color: #222;
}
#faq .qa .q::after {
	content: "";
	position: absolute;
	width: 45px;
	height	: 45px;
	background-image:url(../img/q.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 45px 45px;
	top : 50%;transform: translateY(-50%);
	left : 20px;
}
#faq .qa .a {
	background: #f0f0f0;
	font-size: 15px;
	padding: 20px 10px 20px 75px;
	display: none;
	color: #222;
	line-height: 30px;
}
#faq .qa .a.show {
	display: block;
	animation-name: fadein_f;
	animation-duration: 0.3s;
	animation-iteration-count: 1;
}

/* #estimate */
#estimate {
	padding: 50px 0 50px;
	background : linear-gradient(90deg, #3dcce1, #3865c0);
	text-align: center;
}
#estimate .yellow{
	/*color: #f6fb0a;*/
	padding: 50px 0 20px;
	font-size: 24px; font-weight: 400;
}
#estimate .bg_wh {
	margin: 0px auto 0px;
	background: #fff;
	max-width: 800px;
	padding: 20px 30px;
}

/* #footer */
#footer {
	text-align: center;
	background: #f1f1f1;
	font-size: 15px;
	padding: 50px 0px 50px;
}
#footer p.company {
	font-size: 18px;
}
#footer p.address {
	font-size: 14px; margin: 20px 0; line-height: 1.4;
}
#footer p.copy {
	font-size: 12px; margin-top: 50px;
}
br.sp768 {display: none;}

@media only screen and (max-width: 1200px) {
	#head {display: none;}
	#head_sp {
		display: flex;
		justify-content: space-between;
		margin: 20px 20px 20px;
		width: calc(100% - 20px);
	}
	.marginB95 {margin-bottom: 80px;}
	#faq {padding: 80px 20px 80px;}
}
@media only screen and (max-width: 840px) {
	#task {width: auto;}
}
@media only screen and (max-width: 768px) {
	#head_sp {margin: 10px 10px 10px;
	width: calc(100% - 10px);}
	#head_sp .flex {padding-right: 10px;}
	#keyVisual {background-image:url(../img/keyvisual_sp.jpg);}
	#keyVisual .keyTxt {font-size: 38px;}
	#keyVisual .keyTxt p {font-size: 16px; margin-top: 20px;}
	#task{display: none;}
	#task_sp{display: block;}
	#about .keyTxt {padding: 0 20px;}
	#about {background-image:url(../img/about_sp.jpg);}
	#about .keyTxt .des {margin: 20px auto 0; width: auto;}
	#strong ul.flex3 {display: block; }
	#strong ul.flex3 li {width: 100%;}
	#strong ul.flex3 img.pc {display: none;}
	#strong ul.flex3 img.sp {display: block;}
	#strong ul.flex3 li div {font-size: 24px;}
	#strong .bg_wh {padding: 30px 20px;}
	p.des {text-align: left; line-height: 1.4; margin: 0 10px;}
	#plan ul.flex4 {padding: 20px 20px;}
	#plan ul.flex4 {display: block; background: transparent;}
	#plan ul.flex4 img.pc {display: none;}
	#plan ul.flex4 img.sp {display: block;}
	#plan ul.flex4 li {
		width: 100%; padding-bottom: 20px;cursor: default;
	}
	#plan ul.flex4 li p {font-size: 28px;}
	#plan ul.flex4 li:nth-child(4) p{padding-top: 25px;}

	#plan ul.flex4 li .hoverTxt {
		display: block;background: #eae9e9;
		padding: 15px;text-align: left; line-height: 1.6;
	}
	#accordion {margin: 30px 10px;}
	#accordion div.flex2 {display: none;}
	#accordion .sp {
		display: block;position: relative;
	}
	#accordion .sp:after {
		display: block;
		position: absolute;
		bottom: 10px; right: 10px;
		border-left: 15px solid transparent;
		border-bottom: 15px solid #fff;
		content: "";
	}
	#accordion .accord .desc a.button {width: 100%;}
	#accordion .sp .spBox{
		background : linear-gradient(90deg, #3dcce1, #3865c0);
		padding: 10px;
	}
	#accordion .sp .spBox p{
		color: #fff;font-size: 16px;line-height: 1.4;
	}
	#accordion .sp h3 {
		background: #3973c4;font-size: 20px; font-weight: 600;
		color: #fff;padding: 10px;
	}
	#flow .max1000 img.pc {display: none;}
	#flow .max1000 img.sp {display: block;}
	#flow .max1000 {max-width: 300px;}
	#faq {padding: 80px 10px 80px;}

	#footer {
	text-align: left;font-size: 15px;
	padding: 30px 10px 30px;}
	#footer p.copy {text-align: center;margin-top: 30px;}
	br.sp768 {display: block;}
}
@media only screen and (max-width: 500px) {
	#head_sp {margin: 10px 5px 10px;width: calc(100% - 5px);}
	#head_sp .flex {padding-right: 5px;}
	#head_sp .flex a.tel_sp {margin-right: 10px; }
	#head_sp .flex a.contact_sp {font-size: 15px;}
	#keyVisual .keyTxt {font-size: 34px;}
	#about .keyTxt .des {width: 100%;}
	#strong ul.flex3 li div {font-size: 20px;}
	#plan ul.flex4 li p {font-size: 26px;}
}
@media only screen and (max-width: 450px) {
	#keyVisual .keyTxt {font-size: 28px;}
	#plan ul.flex4 li p {font-size: 24px;}
}