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


@font-face {
    font-family: 'LogoTypeGothic';
    src:url('../fonts/LogoTypeGothic.otf') format('OpenType');
}

@font-face {
    font-family: 'AppliMincho';
    src:url('../fonts/AppliMincho.otf') format('OpenType');
}

.pc {
	display: none;
}
/*////////////////////////////////////////
	PC   BASE SETTING
////////////////////////////////////////*/
body {
  line-height: 1.8;
  font-size: 14px;
  font-family: "'メイリオ','Meiryo',sans-serif,游ゴシック体", "Yu Gothic", YuGothic,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',"Yu Gothic Medium";
  color: #212121;
	letter-spacing: 0.1em;
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-x: hidden;
	min-height: 100vh;
	width: 100vw;
		
}


/* link  */
a {
  color: #3858BD;
	text-decoration: none;
	transition: 0.2s ;
}
a:hover {
  text-decoration: none;
  opacity:0.6;
  filter: alpha(opacity=80);
  -ms-filter: "alpha( opacity=80 )";
}

/* img */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* for IE8 */
article, aside, figure, footer, header, hgroup, nav, section {
  display: block;
}
/* section */
section{
	width: 100vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: auto;
}

.font_bold{
	font-weight: bolder;
}

/*////////////////////////////////////////
	共通class
////////////////////////////////////////*/

.font_color{
	color: #004ab8;
}
/*////////////////////////////////////////
	header
////////////////////////////////////////*/
header .header_left{
	display: flex;
	flex-direction: row;
	padding: 10px 5px ;
}
header .header_left #logo{
	width: 200px;
}
header{
	position: fixed;
	background-color: #fff;
	width: 100%;
	display: flex;
	flex-flow: column;
	align-items: center;
	z-index: 10000;
}

.container{
	margin-top: 90px;
}
/* ハンバーガーメニュー -----------------*/


header .nav_btn {
	margin-top: 12px;
	width: 7vw;
	height: 7vw;
	right: 3vw;
	z-index: 300;
	cursor: pointer;
	position: absolute;
}

.hamburger_line {
	width: 7vw;
	height: 0.5vw;
	position: absolute;
	background-color: #004ab8;
	border-radius: 100px;
	transition: all .6s;
}



.hamburger_line1 { top: 0; }
.hamburger_line2 { top: 1.8vw; }
.hamburger_line3 { top: 3.7vw; }

.nav_bg {
  	width: 100vw;
  	height: 100vh;
  	position: fixed;
  	top: 0;
  	left: 0;
  	visibility: hidden;
	opacity: 0;
  	z-index: 100;
  	transition: all .6s;
  	background-color: #fff;
  	cursor: pointer;
}

/* 表示された時用のCSS */

.nav_open header #nav-content {
	right: 0;
	background: rgba(255,255,255,.9);
	padding: 15vw 7vw;
}

#nav-content {
  	width: 70vw;
  	height: 100vh;
  	position: fixed;
  	top: 0;
  	right: -85vw;
	transition: all .4s;
  	overflow-y: auto;
  	z-index: 200;
  	background-color: #fff;
  	padding-top: 10.7vw;
}

#nav-content li {
	font-size: 4vw;
	margin-bottom: 5vw;
}

#nav-content a{
	color: #656161;
}

.nav_open .nav_bg {
  	opacity: .8;
  	visibility:visible;
}

.nav_open .hamburger_line1 {
  	transform: rotate(45deg);
  	top: 3.5vw;
}

.nav_open .hamburger_line2 {
	display: none;
}

.nav_open .hamburger_line3 {
  	transform: rotate(-45deg);
  	top: 3.5vw;
}


/* 電話、営業時間 -----------------------*/
#header_wrap .header_right {
	width: 100vw;
	display: flex;
	justify-content: center;
	background-color: #ddf5ff;
}




/*////////////////////////////////////////
	導入事例　toppageとcase共通部分
////////////////////////////////////////*/

.example_content{
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-bottom: 20px;
}
.example_content .example_box {
	width: 96vw;
	max-width: 300px;
	margin:10px auto ;
	padding: 65% 20px 20px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	box-shadow:0px 0px 6px 3px #E8E8E8;

}
.example_content .example_box .ex_img{
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto;
	height: 60px;
}
.example_content  .exbox_1{
	background:url("../img/toppage/case1.jpg") no-repeat;
	background-size: contain;
}
.example_content  .exbox_2{
	background:url("../img/toppage/case2.jpg") no-repeat;
	background-size: contain;
}

.example_content .example_box p{
	font-size: 4vw;
	margin: 10px 0;
	color: #212121;
}
.example_content img{
	display: block;
	margin: 0 auto;
	width: 60vw;
}


/*////////////////////////////////////////
	footer
////////////////////////////////////////*/
footer {
	background-color:#004ab8;
	width: 100vw;
	padding: 40px 0 80px;
}
footer #footer_wrap p{
	text-align: center;
	margin: 0 0 20px;
	color: #fff;
	font-size: 3.5vw;
}







/*////////////////////////////////////////
	CVBOX
////////////////////////////////////////*/

.cvbox {
	width: 90vw;
	margin-bottom: 7vw;
}

.cvbox h3{
	width: 100%;
	font-size: 4.6vw;
	background-image: -webkit-linear-gradient(left, #575757, #575757 1px, transparent 1px, transparent 4px),
					  -webkit-linear-gradient(left, #575757, #575757 1px, transparent 1px, transparent 4px);
	background-image: -o-linear-gradient(left, #575757, #575757 1px, transparent 1px, transparent 4px),
					  -o-linear-gradient(left, #575757, #575757 1px, transparent 1px, transparent 4px);
	background-image: linear-gradient(to right, #575757, #575757 1px, transparent 1px, transparent 4px),
					  linear-gradient(to right, #575757, #575757 1px, transparent 1px, transparent 4px);;
	background-size: 4px 1px;
	background-repeat: repeat-x;
	background-position: top,bottom;
	text-align: center;
	line-height: 1.5;
	padding: 4vw 0 3.5vw;
	margin-bottom: 4vw;
}

.cvbox .row {
	justify-content: center;
	align-items: center;
}

.cvbox .tel {
	display: flex;
	flex-flow: column;
	align-items: center;
	line-height: 1.4;
	margin-bottom: 3vw;
}

.cvbox .cvbtn_wrap{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.cvbox a.btn_form {
	width: 90vw;
	background-color: #f79700;
	border-radius: 30px;
	color: #fff;
	padding: 15px 0;
	font-weight: 900;
	font-size: 16px;
	position:relative;
    display:  inline-block;
	max-width: 350px;
	margin:  10px auto;
	text-align: center;
	justify-content: center;
	align-items: center;
}

.cvbox a.btn_form::before {
    content:  '';
    width: 12px;
    height: 14px;
    display:  block;
    border-top: solid 2px;
    border-right: solid 2px;
    transform: rotate(45deg);
    position:  absolute;
    top: 7px;
    bottom:  0;
    left:  0;
    right:  0;
    margin:  13px 89%;
}

.cvbox a.btn_trial{
	width: 90vw;
	background-color: #A5C640;
	border-radius: 30px;
	color: #fff;
	padding: 15px 10px;
	font-weight: 900;
	font-size: 16px;
	position:relative;
    display:  inline-block;
	max-width: 350px;
	margin:  10px auto;
	text-align: center;
	justify-content: center;
	align-items: center;
}

.cvbox a.btn_trial::before {
    content:  '';
    width: 12px;
    height: 14px;
    display:  block;
    border-top: solid 2px;
    border-right: solid 2px;
    transform: rotate(45deg);
    position:  absolute;
    top: 7px;
    bottom:  0;
    left:  0;
    right:  0;
    margin:  13px 89%;
}

/*////////////////////////////////////////
	ページ見出し
////////////////////////////////////////*/

.pageHeadArea {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
}


/*////////////////////////////////////////
	パンくず
////////////////////////////////////////*/

#breadWrap {
	width: 95vw;
	font-size: 3vw;
	font-feature-settings: "palt" 1;
	margin-bottom: 2vw;
	margin-top: 2vw;
}


/*////////////////////////////////////////
	h1.con_tit
////////////////////////////////////////*/


h1.con_tit {
	width: 100vw;
	_height: 15.7vw;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #004ab8;
	color: #fff;
	font-family: "Yu Gothic", "Yu Gothic Medium";
	font-size: 5vw;
	font-weight: bold;
	letter-spacing: 0.2em;
	margin-bottom: 7vw;
	line-height: 1.4;
	padding: 3vw 3vw;
	text-align: center;
}