@charset "UTF-8";

/*===========================
  reset Css
===========================*/
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; }
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { display:block; }
ul ,li{ list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; border:0; font-size:100%; 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 #000; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }

body{
	font:14px 'PT Sans', "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, Osaka, "Hiragino Kaku Gothic Pro", sans-serif;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	color:#000000;
}

a{ color:#0087dc; }
a:link,
a:visited,
a:hover,
a:active{ text-decoration:none; }
p{ line-height:1.8; font-feature-settings:"palt"; color:#434b57; letter-spacing:0.05em; }
img{ width:100%; vertical-align:baseline; }
.clearfix:before,
.clearfix:after{ content: " "; display: table; }
.clearfix:after{ clear: both; }
.clearfix{ *zoom: 1; }

/*===========================
  common Css
===========================*/
/*   header
===========================*/
#siteHeader{ min-height:75px; padding:18px 0 0; box-sizing:border-box; }
#siteHeader .logo{ width:158px; height:auto; }

/*   frame
===========================*/
.cmFrame{ width:1100px; margin:0 auto; }
.cmFrame:before,
.cmFrame:after{ content: " "; display: table; }
.cmFrame:after{ clear: both; }
.cmFrame{ *zoom: 1; }

/*   footer
===========================*/
#siteFooter{ padding:40px 0; text-align:center; background:#434b57; color:#ffffff; }
#siteFooter ul{ margin:0 0 15px; }
#siteFooter ul li{ display:inline-block; margin-right: 5px; }
#siteFooter ul li a{ color:#ffffff; margin-right: 5px; }
#siteFooter ul li a:hover {text-decoration: underline;}
#siteFooter .copyright{ color:#ffffff; }

/*   title
===========================*/
.heading1{ margin:0 0 27px; text-align:center; font-size:58px; font-weight:bold; font-family:"ゴシックMB101 DB", sans-serif !important; font-feature-settings:"palt"; line-height:1.4; }
.heading1 strong{ color:#44a4dc; }
.heading1 .txt1{ display:block; font-size:42px; }
.heading1 .txt2{ font-style:normal; }

/*   txt
===========================*/
.secLead{ margin:0 0 55px; text-align:center; font-size:18px; line-height:2; }

/*   animation
===========================*/
/*-- animation1 --*/
.scrollMove{
	opacity:0;
	transform:translateY(50px);
	transition:all 0.5s ease;
}
.scrollMoveAction{
	opacity:1.0;
	transform:translateY(0px);
}

/*-- animation2 --*/
.scrollMove2 img{
	transform:scale(0, 0);
}
.scrollMoveAction2 img{
	animation:anime2 1.1s 0.3s ease forwards;
}
@keyframes anime2 {
	0% { transform:scale(0, 0); }
	50% { transform:scale(0, 0); }
	100% { transform:scale(1, 1); }
}

/*-- animation3 --*/
.scrollMove3 img{
	transform:scale(0, 0);
}
.scrollMoveAction3 img{
	animation:anime3 1.4s 0.6s ease forwards;
}
@keyframes anime3 {
	0% { transform:scale(0, 0); }
	50% { transform:scale(0, 0); }
	100% { transform:scale(1, 1); }
}

/*-- animation4 --*/
.scrollMove4{
	opacity:0;
	transform:translateY(50px);
	transition:all 1.5s 1s ease;
}
.scrollMoveAction4{
	opacity:1.0;
	transform:translateY(0px);
}

/*-- icoVideo --*/
.flowArea .flowLast .icoVideo{
	width:289px;
	animation:video 2s step-start infinite;
}
@keyframes video {
	0% { width:120px; }
	20% { width:160px; }
	40% { width:194px; }
	60% { width:232px; }
	80% { width:262px; }
	100% { width:290px; }
}

/*===========================
  LPTOP Css
===========================*/
/*   kvArea
===========================*/
.kvArea{ padding:0 0 43px; background:url(../images/kv_img.png) no-repeat center 0; }
/*-- main --*/
.kvArea .main{ min-height:377px; padding:25px 0 0 80px; box-sizing:border-box; }
.kvArea .main .catch{ width:490px; margin:0 0 33px; }
.kvArea .main .lead{ width:460px; padding:0 0 0 8px; font-size:16px; }
/*-- cvArea --*/
.kvArea .cvArea .label{ width:200px; top:-20px; }

/*   cvArea
===========================*/
.cvArea{ padding:40px 0 0; position:relative; }
.cvArea .label{ width:180px; position:absolute; top:20px; left:104px; z-index:10; }
.cvArea .lead{ margin:0 0 20px; text-align:center; font-size:24px; font-weight:bold; color:#000000; }
.cvArea .btn{ width:720px; margin:0 auto 5px; z-index:1;  }
.cvArea .btn a{ animation:0.5s all; }
.cvArea .btn a:hover{ opacity:0.8; }
.cvArea .telInfo{ text-align:center; line-height:1.4; }
.cvArea .telInfo .txt1{ font-size:18px; }
.cvArea .telInfo a{ margin:0 10px; padding:0 0 0 28px; background:url(../images/ico_phone.svg) no-repeat 0 center / 25px auto; font-size:36px; font-family:Arial, sans-serif; color:#8fc31f; }
/*-- cvAreaFrame --*/
.cvAreaFrame{ width:1100px; margin:40px auto 120px; padding:20px 0 65px; box-shadow:0px 20px 47px 10px #c1c1c1; }
/*-- lastCv --*/
.lastCv{ padding:400px 0 110px; background:url(../images/cv_img_01.png) no-repeat center 0; }
.lastCv .cvArea{ margin-top:-45px; }

/*   voiceArea
===========================*/
.voiceArea{ padding:89px 0 108px; background:url(../images/voice_bg.png) no-repeat center 0 #184d85; color:#ffffff; }
.voiceArea .sTitle{ margin: 0 0 5px; font-size:18px; color:#ffffff; }
.voiceArea .title{ margin:0 0 20px; font-size:42px; font-weight:bold; color:#ffffff; }
.voiceArea .title strong{ color:#fffc00; }
.voiceArea .txtArea{ width:710px; float:left; }
.voiceArea .txtArea .kuchikomi{ width:703px; }
.voiceArea figure{ width:370px; float:right; margin:40px 0 0; padding:80px 10px; text-align:center; background:#ffffff; box-sizing:border-box; }
.voiceArea figure img{ width:auto; }

/*   canArea
===========================*/
.canArea{ padding:110px 0; background:#f6f6f6; }
.canArea ul{ display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; }
.canArea ul li{ width:30%; margin:0 5% 0 0; text-align:center; }
.canArea ul li:last-child{ margin-right:0; }
.canArea ul li figure{ margin:0 0 20px; }
.canArea ul li .title{ display:inline-block; margin:0 0 25px; padding:10px 54px 0 30px; background:url(../images/ico_up.svg) no-repeat right 0 / 42px auto; font-size:32px; font-weight:bold; }
.canArea ul li p{ text-align:left; font-size:20px; line-height:2; }
.canArea ul li p strong{ color:#eb6100; }

/*   flowArea
===========================*/
.flowArea{ padding:120px 0 0; }
/*-- flowHead --*/
.flowArea .flowHead{ width:790px; margin:0 auto; position:relative; }
.flowArea .flowHead .jinji1,
.flowArea .flowHead .oubo1{ width:128px; position:absolute; top:0; }
.flowArea .flowHead .jinji1{ left:0; }
.flowArea .flowHead .oubo1{ right:0; }
/*-- flowMiddle --*/
.flowArea .flowMiddle{ margin:0 0 50px; background:url(../images/flow_bg.png) repeat-x 0 75px / 21px auto; }
.flowArea .flowMiddle .flowMiddleCon{ width:716px; margin:0 auto; }
/*-- flowLast --*/
.flowArea .flowLast{ background:url(../images/flow_img_03.png) no-repeat center bottom; }
.flowArea .flowLast .cmFrame{ min-height:1086px; position:relative; }
.flowArea .flowLast .title{ width:316px; margin:0 auto; }
.flowArea .flowLast .jinji2{ position:absolute; top:55px; left:40px; }
.flowArea .flowLast .oubo2{ position:absolute; top:55px; right:40px; }
.flowArea .flowLast .icoVideo{ width:286px; height:121px; margin:0 auto; text-indent:-9999px; background:url(../images/ico_video.png) no-repeat center 0 / 286px auto; position:absolute; top:454px; left:0; right:0; }
.flowArea .flowLast .lastTxt{ width:920px; margin:0 auto; position:absolute; left:0; right:0; bottom:40px; }

/*   reasonArea
===========================*/
.reasonArea{ padding:110px 0 0; }
/*-- reasonBox --*/
.reasonArea .reasonBox{ width:100%; position:relative; }
.reasonArea .reasonBox:before,
.reasonArea .reasonBox:after{ content: " "; display: table; }
.reasonArea .reasonBox:after{ clear: both; }
.reasonArea .reasonBox{ *zoom: 1; }
.reasonArea .reasonBox.box1{ height:506px; }
.reasonArea .reasonBox.box2{ height:424px; }
.reasonArea .reasonBox.box3{ height:408px; }
.reasonArea .reasonBox.box1 .txtarea,
.reasonArea .reasonBox.box3 .txtarea{ width:430px; float:left; padding:0 5px 0 90px; vertical-align:top; }
.reasonArea .reasonBox.box1 .txtarea{ padding-top:107px; }
.reasonArea .reasonBox.box3 .txtarea{ padding-top:50px; }
.reasonArea .reasonBox.box2 .txtarea{ width:433px; float:left; padding:75px 0 0 5px; vertical-align:top; }
.reasonArea .reasonBox figure{ float:left; }
.reasonArea .reasonBox.box3 figure{ position:absolute; top:0; right:-65px; }
.reasonArea .reasonBox .title{ margin:0 0 20px; font-size:36px; font-weight:bold; line-height:1.2; }
.reasonArea .reasonBox .title strong{ color:#44a4dc; }
.reasonArea .reasonBox .txt{ font-size:18px; line-height:2; }

/*   deviceArea
===========================*/
.deviceArea{ padding:95px 0 100px; text-align:center; background:url(../images/device_bg.png) no-repeat center 0; }
.deviceArea .heading1{ margin:0 0 435px; }
.deviceArea .deviceBox{ width:400px; display:inline-block; vertical-align:top; }
.deviceArea .deviceBox .title{ margin:0 0 10px; font-size:22px; }
.deviceArea .deviceBox .txt{ font-size:16px; line-height:2.2; }
.deviceArea .deviceBox .note{ padding:5px 0 0; color:#999999; }

/*   functionArea
===========================*/
.functionArea{ padding:115px 0 95px; background:#f6f6f6; }
.functionArea .heading1{ margin-bottom:48px; }
.functionArea ul{ display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; }
.functionArea ul li{ width:33.33%; padding:20px 60px 30px; border-right:#d2d6df 1px solid; border-top:#d2d6df 1px solid; box-sizing:border-box; }
.functionArea ul li:nth-child(-n + 3){ padding-top:0; border-top:none; }
.functionArea ul li:nth-child(3n){ border-right:none; }
.functionArea ul li figure{ height:108px; text-align:center; }
.functionArea ul li:nth-child(1) figure img{ width:81px; margin-top:32px; }
.functionArea ul li:nth-child(2) figure img{ width:100px; margin-top:10px; }
.functionArea ul li:nth-child(3) figure img{ width:81px; margin-top:20px; }
.functionArea ul li:nth-child(4) figure img{ width:81px; margin-top:20px; }
.functionArea ul li:nth-child(5) figure img{ width:65px; margin-top:18px; }
.functionArea ul li:nth-child(6) figure img{ width:65px; margin-top:15px; }
.functionArea ul li .title{ margin:0 0 15px; text-align:center; font-size:22px; font-weight:bold; color:#000000; }
.functionArea ul li .txt{ font-size:16px; line-height:2; }

/*   stepArea
===========================*/
.stepArea{ padding:115px 0; }
.stepArea .heading1{ margin-bottom:5px; }
.stepArea .secLead{ margin-bottom:40px; }

/*   priceArea
===========================*/
.priceArea{ padding:55px 0; background:#44a4dc; }
.priceArea .heading1{ color:#ffffff; }
.priceArea .price{ width:750px; display:table; margin:0 auto 20px; }
/*.priceArea .price:after{ width:48px; height:48px; content:" "; display:block;  margin:0 auto; background:url(../images/ico_plus.png) no-repeat 0 0 / 100% auto; position:absolute; top:30px; left:0; right:0; }
.priceArea .price .priceL{ width:50%; height:110px; display:table-cell; background:#ffffff; border-right:#44a4dc 3px solid; box-sizing:border-box; vertical-align:middle; }
.priceArea .price .priceR{ width:50%; height:110px; display:table-cell; background:#ffffff; vertical-align:middle; }
.priceArea .price .priceR strong{ margin:0 5px 0 10px; font-size:60px; color:#d01d2a; vertical-align:-3px; }*/
.priceArea .txt{ text-align:center; font-size:16px; color:#ffffff; line-height:2; }


/*---------- PC Only ------------------------------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 769px){
	
	body{ min-width:1100px; }
	.spOnly{ display:none; }

}


/*---------- SP Only ------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px){
	
	.pcOnly{ display:none; }
	
	/*===========================
	  common Css
	===========================*/
	/*   header
	===========================*/
	#siteHeader{ min-height:auto; padding:1px 0 0; }
	#siteHeader .logo{ width:23vw; margin:10px 0 0 25px; }
	
	/*   cmFrame
	===========================*/
	.cmFrame{ width:100%; }
	
	/*   footer
	===========================*/
	#siteFooter p{ color:#ffffff; }
		
	/*   title
	===========================*/
	.heading1{ margin:0 10px 18px; font-size:32px; }
	.heading1 .txt1{ font-size:29px; }
	.heading1 .txt2{ font-size:22px; }
		
	/*   text
	===========================*/
	.secLead{ margin:0 15px 50px; font-size:16px; }
	
	/*   animation
	===========================*/
	/*-- animation1 --*/
	.scrollMove{
		opacity:1;
		transform: translateY(0px);
	}

	/*-- animation2 --*/
	.scrollMove2 img{
		transform:scale(1, 1);
	}

	/*-- animation3 --*/
	.scrollMove3 img{
		transform:scale(1, 1);
	}

	/*-- animation4 --*/
	.scrollMove4{
		opacity:1;
		transform: translateY(0px);
	}
	
	/*===========================
	  LPTOP Css
	===========================*/
	/*   kvArea
	===========================*/
	.kvArea{ padding:0 0 30px; background:url(../images/kv_img_sp.png) no-repeat center 0 / 100% auto; }
	/*-- main --*/
	.kvArea .main{ min-height:95vw; padding:3vw 0 0; }
	.kvArea .main .catch{ width:77%; margin:0 auto; }
	.kvArea .main .lead{ display:none; }
	/*-- cvArea --*/
	.kvArea .cvArea .label{ width:133px; top:-73px; left:-20px }
	
	/*   cvArea
	===========================*/
	.cvArea{ max-width:400px; margin:0 auto; padding:0 27px; }
	.cvArea .lead{ margin-bottom:12px; font-size:16px; line-height:1.4; }
	.cvArea .btn{ width:auto; margin-bottom:3px; }
	.cvArea .label{ width:120px; top:10px; left:-20px; }
	.cvArea .telInfo{ overflow:hidden; position:relative; }
	.cvArea .telInfo .txt1{ font-size:14px; position:absolute; top:8px; left:0; }
	.cvArea .telInfo .txt2{ font-size:11px; position:absolute; left:0; bottom:5px; }
	.cvArea .telInfo a{ float:right; margin:0; padding:9px 10px 9px 30px; background-color:#eaeaea; background-position:10px center; background-size:15px auto; border-radius:5px; font-size:22px; }
	/*-- cvAreaFrame --*/
	.cvAreaFrame{ width:auto; margin:23px 15px 45px; padding:0; box-sizing:border-box; box-shadow:0px 10px 25px 7px #c1c1c1; }
	.cvAreaFrame .cvArea{ padding:25px 15px; }
	.cvAreaFrame .cvArea .label{ top:32px; left:-30px; }
	/*-- lastCv --*/
	.lastCv{ padding:75vw 0 50px; background:url(../images/cv_img_01_sp.png) no-repeat center 0 / 100% auto; }
	
	/*   voiceArea
	===========================*/
	.voiceArea{ padding:50px 30px 42px; background:url(../images/voice_bg_sp.png) no-repeat 0 0 / 100% auto #184d85; }
	.voiceArea .txtArea{ width:100%; float:none; }
	.voiceArea .sTitle{ text-align:center; font-size:16px; }
	.voiceArea .title{ margin:0 0 28px; text-align:center; font-size:29px; line-height:1.4; }
	.voiceArea .kuchikomi{ width:100%; max-width:400px; margin:0 auto; }
	.voiceArea figure{ width:100%; max-width:288px; margin:0 auto 30px; float:none; padding:33px 0px; }
	.voiceArea figure img{ width:179px; }
	
	/*   canArea
	===========================*/
	.canArea{ padding:50px 30px 0; }
	.canArea .secLead{ margin-left:0; margin-right:0; }
	.canArea ul li{ width:100%; float:none; margin:0 0 45px; }
	.canArea ul li figure{ margin:0 0 25px; }
	.voiceArea .sTitle{ color:#ffffff; }
	.canArea ul li .title{ margin:0 0 10px; padding:0 30px 0 15px; font-size:22px; background-size:23px auto; }
	.canArea ul li p{ font-size:16px; }
	
	/*   flowArea
	===========================*/
	.flowArea{ padding:50px 0 0; }
	/*-- flowHead --*/
	.flowArea .flowHead{ width:100%; margin:0 0 28px; text-align:center; }
	.flowArea .flowHead .jinji1,
	.flowArea .flowHead .oubo1{ width:27vw; display:inline-block; position:static; }
	.flowArea .heading1{ margin:5px 10px 0; }
	/*-- flowMiddle --*/
	.flowArea .flowMiddle{ margin:0; background:url(../images/flow_bg_sp.png) no-repeat left 0 bottom 30px / 100% auto; }
	.flowArea .flowMiddle .flowMiddleCon{ width:100%; padding:0 10px; box-sizing:border-box; }
	/*-- flowLast --*/
	.flowArea .flowLast{ background:url(../images/flow_img_03_sp.png) no-repeat 0 bottom / 100% auto; }
	.flowArea .flowLast .cmFrame{ min-height:212vw; text-align:center; }
	.flowArea .flowLast .title{ width:50vw; margin:-12px auto 8px; }
	.flowArea .flowLast .jinji2,
	.flowArea .flowLast .oubo2{ width:50vw; float:left; position:static; }
	.flowArea .flowLast .icoVideo{ clear:both; background-size:144px auto; top:100vw; }
	.flowArea .flowLast .icoVideo{
		width:144px;
		animation:video 2s step-start infinite;
	}
	@keyframes video {
		0% { width:64px; }
		20% { width:78px; }
		40% { width:96px; }
		60% { width:114px; }
		80% { width:132px; }
		100% { width:144px; }
	}
	.flowArea .flowLast .lastTxt{ width:60vw; }
	
	/*   reasonArea
	===========================*/
	.reasonArea{ padding:45px 0 0; }
	.reasonArea .secLead{ margin-bottom:; }
	.reasonArea .reasonBox.box1,
	.reasonArea .reasonBox.box2,
	.reasonArea .reasonBox.box3{ width:auto; height:auto; margin:0 30px 40px; box-sizing:border-box; }
	.reasonArea .reasonBox.box3{ margin-bottom:0; }
	.reasonArea .reasonBox.box1 .txtarea,
	.reasonArea .reasonBox.box2 .txtarea,
	.reasonArea .reasonBox.box3 .txtarea{ width:100%; float:none; padding:0; }
	.reasonArea .reasonBox.box1 figure,
	.reasonArea .reasonBox.box2 figure,
	.reasonArea .reasonBox.box3 figure{ float:none; margin:0 0 20px; text-align:center; position:static; }
	.reasonArea .reasonBox.box1 figure img{ width:60%; }
	.reasonArea .reasonBox .title{ margin-bottom:13px; text-align:center; font-size:22px; line-height:1.4; }
	.reasonArea .reasonBox .txt{ font-size:16px; }
	
	/*   deviceArea
	===========================*/
	.deviceArea{ padding:12vw 0 7vw; background:url(../images/device_bg_sp.png) no-repeat 0 0 / 100% auto; }
	.deviceArea .heading1{ margin:0 0 57vw; }
	.deviceArea .deviceBox{ width:100%; margin:0 0 5vw; padding:0 10px; box-sizing:border-box; }
	.deviceArea .deviceBox .title{ margin-bottom:1vw; font-size:16px; }
	.deviceArea .deviceBox .txt,
	.deviceArea .deviceBox .note{ font-size:13px; line-height:1.6; }
	
	/*   functionArea
	===========================*/
	.functionArea{ padding:50px 15px 0; }
	.functionArea .heading1{ margin-bottom:20px; }
	.functionArea ul li{ width:50%; margin:0 0 50px; padding:0 15px; border:none; }
	.functionArea ul li .title{ margin:0 0 15px; font-size:16px; }
	.functionArea ul li .txt{ font-size:14px; }
	.functionArea ul li:nth-child(1) figure img{ width:62px; margin-top:13px; }
	.functionArea ul li:nth-child(2) figure img{ width:77px; margin-top:0; }
	.functionArea ul li:nth-child(3) figure img{ width:60px; margin-top:0; }
	.functionArea ul li:nth-child(4) figure img{ width:59px; margin-top:0; }
	.functionArea ul li:nth-child(5) figure img{ width:49px; margin-top:0; }
	.functionArea ul li:nth-child(6) figure img{ width:49px; margin-top:0; }
	.functionArea ul li figure{ height:68px; }
	.functionArea ul li .title{ margin-bottom:3px; }
	.functionArea ul li .txt{ line-height:1.6; }
	
	/*   stepArea
	===========================*/
	.stepArea{ padding:50px 15px; }
	.stepArea .heading1{ margin-bottom:15px; }
	.stepArea .secLead{ margin-bottom:18px; font-size:14px; }
	
	/*   priceArea
	===========================*/
	.priceArea{ padding:50px 30px; }
	.priceArea .price{ width:100%; margin-bottom:20px; }
	/*.priceArea .price:after{ width:24px; height:24px; top:25px; }
	.priceArea .price .priceL,
	.priceArea .price .priceR{ height:78px; }
	.priceArea .price .priceR strong{ margin:0; font-size:30px; }*/
	.priceArea .txt{ font-size:13px; line-height:1.6; }
	
}