/*要素のフォントサイズやマージン・パディングをリセットしています*/
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;
}

/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

/*nav要素内ulのマーカー（行頭記号）を表示しないようにしています*/
/*nav ul {
    list-style:none;
}*/
ol, ul {
    list-style: none;
}

/*引用符の表示が出ないようにしています*/
blockquote, q {
    quotes:none;
}

/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* ins要素のデフォルトをセットし、色を変える場合はここで変更できるようにしています */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています
また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

/*テキストに打ち消し線が付くようにしています*/
del {
    text-decoration: line-through;
}

/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています
また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/
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;
}

/*画像を縦に並べた時に余白が出ないように*/
img {
    vertical-align: top;
    font-size: 0;
    line-height: 0;
}

/*box-sizingを全ブラウザに対応*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

::-webkit-selection {
  color: #ffffff;
  background: #2e5b99;
  text-shadow: none;
}

::-moz-selection {
  color: #ffffff;
  background: #2e5b99;
  text-shadow: none;
}

::selection {
  color: #ffffff;
  background: #2e5b99;
  text-shadow: none;
}
/*================================================================================================================*/
/*================================================================================================================*/
html {
　　font-size: 62.5%;
}

body {
	font-family: ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,Hiragino Sans,Noto Sans CJK JP,Osaka,Meiryo,メイリオ,MS PGothic,ＭＳ Ｐゴシック,YuGothic,Yu Gothic,Hiragino Sans GB,Helvetica Neue,HelveticaNeue,Helvetica,Noto Sans,Roboto,Arial,Arial Unicode MS,sans-serif;
	font-style: normal;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: #000000;
	letter-spacing: normal;
}


h1 {
  font-size: 32px;
  font-weight: 600;
}

h2 {
  font-size: 24px;
  font-weight: 600;
}

h3 {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

h4 {
  font-weight: 600;
}

p {
  font-size: 16px;
  text-align: center;
}

a {
  text-decoration: none;
}

.pdt-8 {
  padding-top: 8px;
}
.pdt-16 {
  padding-top: 16px;
}
.pdt-24 {
  padding-top: 24px;
}
.pdt-32 {
  padding-top: 32px;
}
.pdt-52 {
  padding-top: 52px;
}

.outer {
  background: url(../img/hero.png) center center / cover  no-repeat;
  background-position: 0 100%;
}

.hero_image {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 0;
  display: flex;
  justify-content: flex-start;
}

.hero_image div {
  width: 50%;
}

.hero_image div.heading {
  position: relative;
  margin: 0 45px;
}

.hero_image div.heading h1 {
  position: absolute;
  top: -40%;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 32px;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0 -1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}

.hero_image div.contact_box {
  /* width: 620px; */
  /* height: 982px; */
  height: 700px;
  background-color: #fafafa;
  overflow: hidden;
  padding: 0 25px;
}

.feature_container {
  background:  url(../img/feature.png) center center / cover no-repeat;
  padding: 100px 0 88px;
}

.container_box {
  margin: 0 auto;
  max-width: 980px;
}
.container_box .container_box_child  h2 {
  padding-bottom: 32px;
  text-align: center;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.container_box .container_feature .container_feature_child {
  padding: 52px 115px;
  background:rgba(255,255,255,0.6);
}

.container_cta {
  margin: 52px 0 60px;
}
.container_cta p {
  background-color: #ff635c;
  max-width: 480px;
  margin: auto;
}
.container_cta p a{
  display: block;
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  padding: 18px;
}

.container_cta p:hover {
	opacity: 0.5 ;
}

.case_container {
  background-color: #fafafa;
  padding: 100px 0 88px;
}

.container_case_parent {
  display: flex;
/*   justify-content: space-between; */
justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
}
.container_case_parent::before,
.container_case_parent::after {
	content: "";
	display: block;
/* 	width: 25%; */
}

.container_case_parent::before {
	order: 1;
}

.container_case_child {
  width: 30.33333%;
  border-top: 5px solid #e7f2fe;
  padding: 32px 20px;
  margin-right: 1.5%;
  margin-left: 1.5%;
  margin-bottom: 3%;
  background-color: #ffffff;
}

.case_list {

}
.case_list .case_list_child {
  font-size: 12px;
  margin-top: 8px;
}
.case_list .case_list_child:first-child {
  margin-top: 24px;
}
.case_list .case_list_child span.list_child_box {
  width: 62px;
  padding: 10px 5px;
  margin-right: 12px;
  border-radius: 10px;
  border: 1px solid #707070;
  font-size: 10px;
  font-weight: bold;
  display: inline-block;
  text-align: center;
}

.case_list .case_list_child span.list_child_normal {
  font-size: 16px;
  font-weight: bold;
}

.flow_container {
  background-color: #fafafa;
  padding: 100px 0 88px;
}

.container_flow_parent {
  display: flex;
/*   justify-content: space-between; */
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
}
.container_flow_parent::before,
.container_flow_parent::after {
	content: "";
	display: block;
/* 	width: 25%; */
}

.container_flow_parent::before {
	order: 1;
}

.container_flow_child {
  width: 23%;
/*   border-top: 5px solid #e7f2fe; */
  padding: 32px 20px;
  margin-right: 1%;
  margin-left: 1%;
  margin-bottom: 2%;
  background-color: #ffffff;
}
.container_flow_child h4 {
	text-align: center;
	padding-bottom: 16px;
	position: relative;
}
.container_flow_child h4 i {
	position: absolute;
	top: -50px;
	left: -20px;
}
.container_flow_child h4 i img {
	width: 40px;
}

.container_flow_child p {
	text-align: left;
	font-size: 14px;
	line-height: 20px;
}

.flow_list {

}
.flow_list .flow_list_child {
  font-size: 12px;
  margin-top: 8px;
}
.flow_list .flow_list_child:first-child {
  margin-top: 24px;
}
.flow_list .flow_list_child span.list_child_box {
  width: 62px;
  padding: 10px;
  margin-right: 12px;
  border-radius: 10px;
  border: 1px solid #707070;
  font-size: 10px;
  font-weight: bold;
  display: inline-block;
  text-align: center;
}

.flow_list .flow_list_child span.list_child_normal {
  font-size: 16px;
  font-weight: bold;
}

.voice_container {
  background-color: #fafafa;
  padding: 100px 0 88px;
}

.container_voice_parent {
  display: flex;
  justify-content: space-between;
/*   justify-content: flex-start; */
  flex-wrap: wrap;
  width: 100%;
}
.container_voice_parent::before,
.container_voice_parent::after {
	content: "";
	display: block;
/* 	width: 25%; */
}

.container_voice_parent::before {
	order: 1;
}

.container_voice_child {
  width: 31.33%;
/*   border-top: 5px solid #e7f2fe; */
  padding: 32px 20px;
  margin-right: 1%;
  margin-left: 1%;
  margin-bottom: 2%;
  background-color: #ffffff;
}
.container_voice_child h4 {
	text-align: center;
	padding-bottom: 16px;
}
.container_voice_child p {
	text-align: left;
	font-size: 14px;
	line-height: 20px;
}

.voice_list {

}
.voice_list .voice_list_child {
  font-size: 12px;
  margin-top: 8px;
}
.voice_list .voice_list_child:first-child {
  margin-top: 24px;
}
.voice_list .voice_list_child span.list_child_box {
  width: 62px;
  padding: 10px;
  margin-right: 12px;
  border-radius: 10px;
  border: 1px solid #707070;
  font-size: 10px;
  font-weight: bold;
  display: inline-block;
  text-align: center;
}

.voice_list .voice_list_child span.list_child_normal {
  font-size: 16px;
  font-weight: bold;
}



.accordion {text-align: center; border-top: 1px solid #cccccc;}
.accordion li{ border-bottom: 1px solid #cccccc;}
.accordion .inner {display: none;}
.accordion p{cursor: pointer; padding: 16px 45px; text-align: left;}
.accordion p.ac{ position: relative;}
.accordion p.ac .ac_img img {width: 24px; height: 24px; padding: 5px 8.5px;}
.accordion .inner li{padding: 0 45px 16px 45px; text-align: left; font-size: 14px; border:none;}
.accordion .inner li.content{}

.i_box {
  align-items: center;
  position: absolute;
/*
  top: 50%;
  right: 5%;
*/
  width: 24px;
  height: 24px;
  right: 0px;
/*   border: 1px solid #fff; */
/*   margin-top: 6px; */
margin-right: 40px;
  box-sizing: border-box;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transform-origin: center center;
  transition-duration: 0.2s;
}
.i_box i img {
	width: 24px;
	height: 24px;
	padding: 8.5px 5px;
}
.open .i_box {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}


.qa_container {
  background-color: #fafafa;
  padding: 100px 0 28px;
}

.container_qa_parent {
  width: 100%;
}
.container_qa_parent::before,
.container_qa_parent::after {
	content: "";
	display: block;
}

.container_qa_parent::before {
	order: 1;
}

.container_qa_child {
  width: 31.33%;
  padding: 32px 20px;
  margin-right: 1%;
  margin-left: 1%;
  margin-bottom: 2%;
  background-color: #ffffff;
}
.container_qa_child h4 {
	text-align: center;
	padding-bottom: 16px;
}
.container_qa_child p {
	text-align: left;
	font-size: 14px;
	line-height: 20px;
}

.qa_list {

}
.qa_list .qa_list_child {
  font-size: 12px;
  margin-top: 8px;
}
.qa_list .qa_list_child:first-child {
  margin-top: 24px;
}
.qa_list .qa_list_child span.list_child_box {
  width: 62px;
  padding: 10px;
  margin-right: 12px;
  border-radius: 10px;
  border: 1px solid #707070;
  font-size: 10px;
  font-weight: bold;
  display: inline-block;
  text-align: center;
}

.qa_list .qa_list_child span.list_child_normal {
  font-size: 16px;
  font-weight: bold;
}



.engineer_container {
  background:  url(../img/bk_engineer.png) center center / cover no-repeat;
  padding: 100px 0 88px;
}

.container_engineer_parent {
  display: flex;
  justify-content: right;
  flex-wrap: wrap;
  width: 100%;
}
.container_engineer_parent::before,
.container_engineer_parent::after {
	content: "";
	display: block;
/* 	width: 25%; */
}

.container_engineer_parent::before {
	order: 1;
}

.container_engineer_child {
  width: 40%;
  padding: 32px 20px;
  margin-right: 1%;
  margin-left: 1%;
  margin-bottom: 2%;
  background-color: rgba(255,255,255,0.6);
}
.container_engineer_child h4 {
	text-align: left;
	padding-bottom: 16px;
}
.container_engineer_child p {
	text-align: left;
	font-size: 14px;
	line-height: 20px;
}

.engineer_list {

}
.engineer_list .engineer_list_child {
  font-size: 12px;
  margin-top: 8px;
}
.engineer_list .engineer_list_child:first-child {
  margin-top: 24px;
}
.engineer_list .engineer_list_child span.list_child_box {
  width: 62px;
  padding: 10px;
  margin-right: 12px;
  border-radius: 10px;
  border: 1px solid #707070;
  font-size: 10px;
  font-weight: bold;
  display: inline-block;
  text-align: center;
}

.engineer_list .engineer_list_child span.list_child_normal {
  font-size: 16px;
  font-weight: bold;
}


.service_container {
  background:  url(../img/bk_service.png) center center / cover no-repeat;
  padding: 100px 0 208px;
}

.container_service_parent {
  display: flex;
  justify-content: left;
/*   justify-content: flex-start; */
  flex-wrap: wrap;
  width: 100%;
  padding-top: 100px;
}
.container_service_parent::before,
.container_service_parent::after {
	content: "";
	display: block;
/* 	width: 25%; */
}

.container_service_parent::before {
	order: 1;
}

.container_service_child {
  width: 40%;
/*   border-top: 5px solid #e7f2fe; */
  padding: 32px 20px;
  margin-right: 1%;
  margin-left: 1%;
  margin-bottom: 2%;
  background-color: rgba(255,255,255,0.6);
  
}
.container_service_child h4 {
	text-align: left;
	padding-bottom: 16px;
}
.container_service_child p {
	text-align: left;
	font-size: 20px;
	line-height: 31px;
}







.difference_container {
  background:  url(../img/bk_difference.png) center center / cover no-repeat;
  padding: 100px 0 46px;
}

.container_difference_parent {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 130px;
}
.container_difference_parent::before,
.container_difference_parent::after {
	content: "";
	display: block;
/* 	width: 25%; */
}

.container_difference_parent::before {
	order: 1;
}

.container_difference_child {
  width: 100%;
/*
  border-top: 5px solid #e7f2fe;
  padding: 32px 20px;
  margin-right: 1%;
  margin-left: 1%;
  margin-bottom: 2%;
*/
/*   background-color: #ffffff; */
  padding: 16px 20px
}
.container_difference_child h4 {
	text-align: left;
	padding-bottom: 16px;
	position: relative;
}
.container_difference_child h4 i {
	position: absolute;
	top: 0;
	left: -42px;
}
.container_difference_child h4 i img {
	width: 30px;
}

.container_difference_child p {
	text-align: left;
	font-size: 13px;
	line-height: 21px;
	margin-bottom: 22px;
	position: relative;
	margin-left: 88px;
	padding-top: 11px;
	max-width: 400px
}

.container_difference_child p span {
	position: absolute;
	top: 0;
	left: -88px;
	padding: 10px 25px;
	border: 1px solid #000000;
	border-radius: 5px;
	font-size: 12px;
}
.container_difference_child p span.d0 {
	background-color: #d0d0d0; 
}
.container_difference_child p span.ff {
	background-color: #ffffff; 
}


.problem_container {
  background:  url(../img/bk_problem.png) center center / cover no-repeat;
  padding: 100px 0 48px;
}

.container_problem_parent {
  display: flex;
  justify-content: left;
/*   justify-content: flex-start; */
  flex-wrap: wrap;
  width: 70%;
/*   padding-top: 100px; */
}
.container_problem_parent::before,
.container_problem_parent::after {
	content: "";
	display: block;
/* 	width: 25%; */
}

.container_problem_parent::before {
	order: 1;
}

.container_problem_child {
  width: 48%;
/*   border-top: 5px solid #e7f2fe; */
  padding: 32px 20px;
  margin-right: 1%;
  margin-left: 1%;
  margin-bottom: 2%;
  background-color: rgba(255,255,255,0.6);
  height: 216px;
}
.container_problem_child h4 {
	text-align: left;
	padding-bottom: 16px;
}
.container_problem_child p {
	text-align: left;
	font-size: 13px;
	line-height: 21px;
}

.container_problem_child p.mark {
	font-size: 11px;;
	text-align: center;
	margin-bottom: 8px;
	padding: 5px 10px;
	border: 1px solid #000000;
	border-radius: 5px;
	max-width: 95px;
} 

.container_problem_child2 {
  width: 100%;
/*   border-top: 5px solid #e7f2fe; */
  padding: 32px 20px;
  margin-right: 1%;
  margin-left: 1%;
  margin-bottom: 2%;
  background-color: rgba(255,255,255,0.6);
}
.container_problem_child2 h4 {
	text-align: left;
	padding-bottom: 16px;
}
.container_problem_child2 p {
	text-align: left;
	font-size: 13px;
	line-height: 21px;
}

footer {
	background: #f4f4f4;
    padding: 40px 0 30px;
}

footer p {
	font-size: 11px;;
	line-height: 1.6;
	color: #b1b1b1;
	text-align: center;
}

.back-to-top {
    position: fixed;
    right: 10px;
    bottom: 10px;
    color: #fff;
    width: 40px;
    height: 40px;
    z-index: 2;
    display: none;
}
.back-to-top:before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    position: absolute;
    left: 0;
    top: 0;
    background: #000000;
}
.back-to-top:after {
    content: "↑";
    display: block;
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    left: 0;
    top: 0;
}

@media screen and  (max-width: 600px){
h1 {font-size: 22px;}
h2 {font-size: 22px;}
h3 {font-size: 20px;}
h4 {font-size: 18px;}
p {font-size: 16px;}

}

@media screen and (min-width: 601px) and (max-width: 960px){
h1 {font-size: 30px;}
h2 {font-size: 28px;}
h3 {font-size: 22px;}
h4 {font-size: 18px;}
p {font-size: 16px;}
	
}
@media screen and (max-width: 960px){
	.outer {
		height: 465px;
	}
	.hero_image {
		display: block;
		padding: 100px 20px;
	}
	.hero_image div {
		width: 100%;
	}
	.hero_image div.heading {
		position: static;
		margin: 0;
	}
	.hero_image div.heading h1 {
		position: static;
	}
	.hero_image div.contact_box {
		display: none;
	}
	.container_box .container_feature .container_feature_child {
		padding: 20px;
		margin: 0 20px;
	}
	.container_case_child {
		width: 100%;
		margin: 10px 20px;
		padding: 24px 20px;
	}
	.case_list .case_list_child:first-child {
		margin-top: 16px;
	}
	.container_difference_parent {
		padding: 0;
	}
	.container_difference_child {
		padding: 16px 20px 16px 60px;
	}
	.container_flow_child {
		width: 100%;
		margin: 20px;
	}
	.container_service_child {
		width: 100%;
		margin: 20px;
	}
	.container_voice_child {
		width: 100%;
		margin: 10px 20px;
	}
	.container_problem_parent {
		width: 100%;
	}
	.container_problem_child,
	.container_problem_child2 {
		width: 100%;
		margin: 10px 20px;
		height: auto;
		padding: 20px;
	}
	.container_engineer_child {
		width: 100%;
		margin: 20px;
	}
	.container_qa_parent {
		padding: 0 20px;
	}
	.difference_container {
		background-image: url(../img/bk_difference_sp.png);
	}
	.engineer_container {
		background-image: url(../img/bk_engineer_sp.png);
	}
	.service_container {
		background-image: url(../img/bk_service_sp.png);
	}
	.problem_container {
		background-image: url(../img/bk_problem_sp.png);
	}
	.feature_container,
	.case_container,
	.difference_container,
	.flow_container,
	.service_container,
	.voice_container,
	.problem_container,
	.engineer_container,
	.qa_container {
		padding: 50px 0 52px;
	}
	.button_container {
		padding: 0 20px;
	}
	.accordion p {
		padding: 10px 30px 10px 10px;
	}
	.i_box {
		margin-right: 5px;
		top: 24px;
	}
	.container_box .container_feature .container_feature_child p {
		text-align: left;
	}
	.container_service_parent {
		padding: 0;
	}
	
}


.container_flow_flex{
	display: flex;
	position: relative;
	margin-bottom: 100px;
}

.container_flow_flex:first-child{
	margin-top: 0;
}

.container_flow_flex:last-child{
	margin-bottom: 0;
}

.container_flow_flex:after{
	content: "";
    display: inline-block;
    background-image: url("../img/icon/icon_arrow.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -75px;
    right: 47%;
    width: 45px;
    height: 40px;
}

.container_flow_flex:last-child:after{
    background-image: none;
}

.container_flow_flexchild{
	padding: 0 10px;
	width: 50%;
}

.container_flow_flexchild h4{
	display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.container_flow_flexchild h4 i{
	margin-right: 8px;
}

.container_flow_flexchild h4 i img{
	max-width: 40px;
}

.container_flow_flexchild p{
	text-align: left;
}
.container_flow_flexchild img{
	width: 100%;
}