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

body {
  font-size: 0;
  line-height: 0;
}

#wrapper {
  max-width: 980px;
  height: auto;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: block;
  font-size: 0;
}
#wrapper section, #wrapper header {
  max-width: 768px;
  margin: 0 auto;
  text-align: center;
}

#wrapper p{
	margin: 0;
	padding:0;
}

#wrapper a, #wrapper a img {
  -ms-transition: filter 0.5s ease-out;
  transition: filter 0.5s ease-out;
}
#wrapper a:hover, #wrapper a:hover img {
  -ms-filter: brightness(1.2);
  filter:brightness(1.2);
}

#wrapper img{
  width: 100%;
　max-width:768px;
  display: block;
  vertical-align: top;
}

/*============================
#main
============================*/
#wrapper .pointCont,
#wrapper .stepCont,
#wrapper .reasonCont {
  position: relative;
}
#wrapper .point_ani {
  position: absolute;
  top: 6%;
  left: 50%;
  width: 90%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
#wrapper .step_ani {
  position: absolute;
  top: 51%;
  right: 3%;
  width: 66%;
}

#wrapper .reason_ani {
  position: absolute;
  top: 26%;
  left: 50%;
  width: 82%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

/* iframe */
#wrapper .iframe_w {
  margin: 3% 3% 8% 3%;
}
#wrapper .iframe_inner {
  position: relative;
  width: 100%;
  padding-top: 63%;
}
#wrapper .iframe_inner iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/*============================
 btn
============================*/
#wrapper .btnCont {
  position: relative;
}
#wrapper .btnCont2 {
	position: relative;
	width: 94%;
	margin: 0 auto;
	padding: 5% 0;
}
#wrapper .btn {
  position: absolute;
  bottom: 12%;
  left: 50%;
  width: 84%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
#wrapper .cv3 .btn {
  bottom: 9%;
}
#wrapper .cv4 .btn {
  bottom: 5%;
}
#wrapper .btn2{
	position: absolute;
	bottom: 10%;
	left: 67%;
	width: 60%;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);	
}

/*============================
アコーディオン
============================*/

#wrapper .toggle_list dd {
  display: none;
}
#wrapper .toggle_list dt {
  position: relative;
  margin-top: 3%;
}
#wrapper .toggle_list dt:first-child {
  margin: 0;
}
#wrapper .toggle_list dt:before {
  content: "";
  display: block;
  position: absolute;
  width: 6%;
}
#wrapper .toggle_list dt:before {
  top: 0;
  bottom: 0;
  right: 2%;
  margin: auto;
  background: url(../img/qa_arrow.png) center center no-repeat;
  background-size: 100%;
}
#wrapper .toggle_list .active:before {
  top: 0;
  bottom: 0;
  margin: auto;
  background: url(../img/qa_arrow2.png) center center no-repeat;
  background-size: 100%;
}
#wrapper .toggle_list.develop dt:before,
#wrapper .toggle_list.voice dt:before {
  right: 10%;
}
#wrapper .toggle_list.qa_list dt:before {
  right: 8%;
}

#wrapper .qaArea {
  padding: 0 3% 10% 3%;
  background: url(../img/qa_bg.jpg) top left no-repeat;
}


/*============================
  スライダー
============================*/
#wrapper .bx-wrapper {
  margin: 0;
  border: initial;
  box-shadow: initial;
  background: initial;
}
#wrapper .sliderCont {
  position: relative;
}
#wrapper .sliderArea {
  position: absolute;
  top: 36%;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0 auto;
}
#wrapper .sliderArea_inner {
  position: relative;
  padding: 0 8%;
}
#wrapper #prev-btn a {
  position: absolute;
  top: 45%;
  left: 3%;
  background: url(../img/slider_arrow_l.png) center center no-repeat;
  background-size: 100%;
  width: 15px;
  height: 30px;
  z-index: 999;
}
#wrapper #next-btn a {
  position: absolute;
  top: 45%;
  right: 3%;
  background: url(../img/slider_arrow_r.png) center center no-repeat;
  background-size: 100%;
  width: 15px;
  height: 30px;
  z-index: 999;
}
#wrapper .bx-wrapper .bx-pager {
  padding-top: 10px;
  color: #fff;
}
#wrapper .bx-wrapper .bx-pager.bx-default-pager a {
  background: transparent;
  border: 1px solid #fff;
  width: 8px;
  height: 8px;
}
#wrapper .bx-wrapper .bx-pager.bx-default-pager a.active,
#wrapper .bx-wrapper .bx-pager.bx-default-pager a:focus,
#wrapper .bx-wrapper .bx-pager.bx-default-pager a:hover {
  background: #fff;
}
#wrapper .bx-wrapper .bx-controls-auto,
#wrapper .bx-wrapper .bx-pager {
  bottom: -20px;
}

#wrapper footer {
  padding: 4% 3% 3% 3%;
  background: #0b45ab;
}
#wrapper .footerarea{
	max-width: 420px;
	text-align:center;
	margin:0 auto;
}
#wrapper footer ul{
	text-align:center;
}
#wrapper footer ul li{
	float:left;
	margin-right:3%;
}
#wrapper .footer_link {
  text-align: center;
  margin-bottom: 4%;
}
#wrapper .footer_link a {
  padding-bottom: 5px;
  border-bottom: 1px solid #fff;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  text-decoration: none;
}
#wrapper .footer_link span{
  font-size: 10px;
}
#wrapper .copyright {
  clear:both;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  color: #fff;
  margin-top: 8%;
}

#wrapper .footer_tel {
  margin: 3% 4%;
  line-height: 1.4;
}

@media screen and (max-width: 768px) { 
	*{
	font-size:0.9rem !important;	
	}
	#wrapper #prev-btn a, #wrapper #next-btn a{
	font-size: 0 !important;
	}
}