@charset "utf-8";  
/*------------------------------------------------------------ 
    COMPANY css
------------------------------------------------------------*/  

section:not(.section) .headline{ margin-bottom:40px;}

.headline-en,
.headline-jp{
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	line-height:1;
}

.section{ margin-top:100px;}

#conceptInner{
	width:auto;
	text-align:center;
	padding:50px 15px 200px;
	background:url(../img/bg-concept.png) no-repeat 50% bottom;
	background-size:cover;
}

/*------------------------------------------------------------ 
    MediaQuery 
------------------------------------------------------------*/  

/* SP */
@media screen and (max-width: 560px){

section:not(.section) .headline{ margin-bottom:20px;}

.section{ margin-top:50px;}

#conceptInner{ padding:60px 15px 120px;}

}


/*---------------------------------------　20200702追加　-----------------------------------------------*/


/*------------------------------------------------------------ 
    共通
------------------------------------------------------------*/ 
.bg { background:#f5f5f5; width: 100%; padding:50px 0;}
.bg2 { background:#f5f5f5; width: 100%; padding:50px 0;}
.pc_con {display: block!important;}
.sp_con {display: none!important;}

.img_c960 { width:100%; margin:0 auto 0 auto; background: #fff;}
.img_c960 img {width: 960px; margin: auto;}

.inner_1500 { width: 100%; max-width: 1500px; margin: 0 auto;}

/* =====================================
 list
===================================== */
ul.list2 {}
ul.list2 li { float: left; width: 44%; margin: 0 3% 6% 3%; border: 5px solid #dcebfc; box-sizing: border-box; text-align: center;}
ul.list2 li img { width: 100%;}
ul.list2 li a { }

ul.list4 {}
ul.list4 li { display: block; float: left; width: 23%; margin: 0 1% 0 1%; border: 5px solid #dcebfc; box-sizing: border-box; text-align: center;}
ul.list4 li img { width: 100%;}
ul.list4 li a { }

ul.list3 {}
ul.list3 li { float: left; width: 31.333333333333%; margin: 0 1% 0 1%; box-sizing: border-box; text-align: center;}
ul.list3 li img { width: 100%;}
ul.list3 li a { }
ul.list3 li p {font-size: 120%; margin-top: 10px;}
ul.list3-2 {}
ul.list3-2 li { float: left; width: 26.333333333333%; margin: 0 3% 0 3%; box-sizing: border-box; text-align: center;}
ul.list3-2 li img { width: 100%;}
ul.list3-2 li a { }
ul.list3-2 li p {font-size: 120%; margin-top: 10px;}

ul.list4 li {position: relative!important;}
ul.list4 li p.teclabsub {position: absolute; font-size: 24px; font-weight: 700; bottom:0; background: rgba(0,0,0,0.8); color: #fff; width: 100%; padding: 10px; box-sizing: border-box;}
ul.list4 li p.teclabsub span {font-size: 60%; margin-left: 20px;}


/*------------------------------------------------------------ 
    詳細
------------------------------------------------------------*/ 
#imgInner1{
	width:auto;
	text-align:center;
	height: 400px;
	position: relative;
	background:url(../img/visual1.png) no-repeat 50% top;
	background-size:cover;
	padding: 20px;
}
#imgInner2{
	width:auto;
	text-align:center;
	height: 400px;
	position: relative;
	background:url(../img/visual2.png) no-repeat 50% top;
	background-size:cover;
	padding: 20px;
}
#imgInner3{
	width:auto;
	text-align:center;
	height: 400px;
	position: relative;
	background:url(../img/visual3.png) no-repeat 50% top;
	background-size:cover;
	padding: 20px;
}
#imgInner4{
	width:auto;
	text-align:center;
	height: 400px;
	position: relative;
	background:url(../img/visual4.png) no-repeat 50% top;
	background-size:cover;
	padding: 20px;
}
#imgInner1 h2,#imgInner2 h2,#imgInner3 h2,#imgInner4 h2 {
	position: absolute; 
	margin: auto; 
	top: 50%;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	left: 0; 
	right: 0; 
	color: #fff; 
	font-weight: 800; 
	font-size: 42px; 
	text-align: center;
}
#imgInner1 h2 span,#imgInner2 h2 span,#imgInner3 h2 span,#imgInner4 h2 span {
	display: block;
	color: #fff; 
	font-weight: 500; 
	font-size: 18px; 
	text-align: center;
}
.imgnavi a {color:#fff; border: 1px solid #fff; padding: 5px; font-size: 18px; width: 200px; display: block; float: right;}

h3.h3title { font-weight: 700; font-size: 250%; line-height: 200%;}
p.labtxt { line-height: 160%; font-size: 18px;}

.h3bg {margin: 0 0 60px 0;}
.h3bg h3 {color: #000; padding-bottom: 12px; text-align: center; font-size: 300%; font-weight: 600; position: relative;} 
.h3bg h3:after {
 position: absolute;
     content: "";
     left: 0;
     right: 0;
     bottom: 0;
     width: 100px;
     margin: auto;
     border-bottom: 2px solid #3E78C3;
}

/*----特徴-----*/
ul.contents_section {}
ul.contents_section li {display: flex; align-items: center;}
ul.contents_section li div { width: 46%; margin: 0 2% 80px 2%;}
ul.contents_section li div img {width: 100%;}
ul.contents_section li:nth-child(odd) {flex-direction: row-reverse;}
ul.contents_section li div.txt { font-size: 230%; font-weight: 700;}
ul.contents_section li div.txt p { font-size: 70%; font-weight: 400; margin-top: 20px;}
ul.contents_section li.even div { margin-bottom: 30px;}
ul.contents_section .mb50 {margin-bottom: 50px!important;}
ul.contents_section li div.txt ul.list_tag { margin-top: 10px;}
ul.contents_section li div.txt ul.list_tag li { float: left; width: auto; margin: 0 5px 5px 0; padding: 3px 10px; font-size: 14px; border: 1px solid #3E78C3;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	color: #3E78C3;
}

/*----機能一覧-----*/
ul.tool_box {}
ul.tool_box li {width: 44%; margin: 0 3% 30px 3%; float: left;}
ul.tool_box2 {}
ul.tool_box2 li {width: auto; margin:0 0 0 0;}
table.tbl1 { font-size: 140%; width: 100%;}
table.tbl1 caption {text-align:left; font-weight: 600; margin:0 0 10px 0; font-size: 120%; border-bottom: 1px #ccc solid;}
table.tbl1 th,table.tbl1 td { border-bottom: 1px #ccc solid; padding:15px 10px; text-align: left; vertical-align: middle;}
table.tbl1 th { font-weight: 600; width: 30%;  vertical-align: top;}
table.tbl1 td { font-size: 90%;}
table.thno th { display: none;}
table.tbl1 td.option {}
table.tbl1 td.option span {font-size: 70%; margin-left: 3px;}
/*
table.tbl1 td.option p { float: left; margin: 0 0 0 0; width: 25%;}
table.tbl1 td.option p:before {font-family: 'FontAwesome'; content: "\f105"; margin-right: 3px; color: #999;}
*/



/*----料金体系-----*/
table.tbl2 { font-size: 140%; width: 100%;}
table.tbl2 th,table.tbl2 td { border: 1px #ccc solid; padding: 15px; text-align: left; vertical-align: middle;}
table.tbl2 th { font-weight: 600; width: 30%; max-width: 360px;}
table.tbl2 td { }
table.tbl2 td p.hei {font-size: 75%; margin-top: 5px; line-height: 150%!important;}

/*----実勢-----*/






@media screen and (max-width: 768px){
	
.pc_con {display: none!important;}
.sp_con {display: block!important;}

.bg {padding:30px 0;}
.bg2 { background:none; width: 100%; padding:30px 0;}

.inner_1500 { width: 90%; max-width: 100%; margin: 0 5%;}
	
.img_c960 { width:100%; margin:0 auto 0 auto; background: #fff;}
.img_c960 img {width: 100%; margin: auto;}
	
/* =====================================
 list
===================================== */
ul.list4 li { float: none; width: auto; margin: 0 auto 20px auto;}
ul.list3 li { float: none; width: auto; margin: 0 auto 20px auto;}
ul.list3-2 li { float: none; width: 80%; margin: 0 10% 20px 10%;}
ul.list4 li p.teclabsub {position: absolute; font-size: 21px; font-weight: 800!important; bottom:0; background: rgba(0,0,0,0.8); color: #fff; width: 100%; padding: 10px; box-sizing: border-box;}
	
	
#imgInner1,#imgInner2,#imgInner3,#imgInner4{
	height: 250px;
	padding: 20px;
}
#imgInner1 h2,#imgInner2 h2,#imgInner3 h2,#imgInner4 h2 {
	position: absolute; 
	margin: auto; 
	top: 50%;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	left: 0; 
	right: 0; 
	color: #fff; 
	font-weight: 800; 
	font-size: 28px; 
	text-align: center;
}
.imgnavi a {color:#fff; border: 1px solid #fff; padding: 5px; font-size: 14px; width: 200px; display: block; float: none; margin: auto;}

	
h3.h3title { font-weight: 700; font-size: 200%; line-height: 160%; margin-bottom: 20px;}
p.labtxt { line-height: 150%; font-size: 14px;}

.h3bg {margin: 0 0 30px 0;}
.h3bg h3 {color: #000; padding-bottom: 12px; text-align: center; font-size: 220%; font-weight: 600; position: relative;} 
.h3bg h3:after {
 position: absolute;
     content: "";
     left: 0;
     right: 0;
     bottom: 0;
     width: 80px;
     margin: auto;
     border-bottom: 2px solid #3E78C3;
}
	
/*----特徴-----*/
ul.contents_section { padding: 0 15px;}
ul.contents_section li {display: block; align-items: center; margin-bottom: 30px;}
ul.contents_section li div { width: 100%; margin: 0 auto 20px auto;}
ul.contents_section li div img {width: 100%;}
ul.contents_section li:nth-child(odd) {flex-direction: row-reverse;}
ul.contents_section li div.txt { font-size: 200%; font-weight: 700;}
ul.contents_section li div.txt p { font-size: 16px; font-weight: 400; margin-top: 10px;}
ul.contents_section li.even div { margin-bottom: 20px;}
ul.contents_section .mb50 {margin-bottom: 0px!important;}
	

	
/*----機能一覧-----*/
ul.tool_box {}
ul.tool_box li {width: 100%; margin: 0 0 50px 0; float: none;}
table.tbl1 { font-size: 120%; width: 100%;}
table.tbl1 caption {text-align:left; font-weight: 600; margin:0 0 10px 0; font-size: 120%; border-bottom: 1px #ccc solid;}
table.tbl1 th,table.tbl1 td { border-bottom: 1px #ccc solid; padding: 10px; text-align: left;}
table.tbl1 th { font-weight: 600; width: 40%;}
table.tbl1 td { font-size: 90%;}
	
/*----料金体系-----*/
table.tbl2 { font-size: 140%; width: 100%;}
table.tbl2 th,table.tbl2 td { border: 1px #ccc solid; padding: 10px; box-sizing: border-box; width: 100%; display: block; margin-top: -1px;}
table.tbl2 th { font-weight: 600; text-align: center; width: 100%; max-width: 100%;}
table.tbl2 td { }
	

/* SPここまで */
}


/* =====================================
 汎用プロパティ
===================================== */
/* テキストサイズ */
.t50 { font-size:50%!important;}
.t60 { font-size:60%!important;}
.t70 { font-size:70%!important;}
.t80 { font-size:80%!important;}
.t90 { font-size:90%!important;}
.t120 { font-size:120%!important;}
.t130 { font-size:130%!important;}
.t140 { font-size:140%!important;}
.t150 { font-size:150%!important;}
.t160 { font-size:160%!important;}

/* bold */
.noto100 {font-weight:100;}
.noto200 {font-weight:200;}
.noto300 {font-weight:300;}
.noto400 {font-weight:400;}
.noto500 {font-weight:500;}
.noto600 {font-weight:600;}
.noto700 {font-weight:700;}
.noto800 {font-weight:800;}
.noto900 {font-weight:900;}


.fl { float: left;}
.fr { float: right;}

.mt05 { margin-top: 5px !important;}
.mt10 { margin-top: 10px !important;}
.mt15 { margin-top: 15px !important;}
.mt20 { margin-top: 20px !important;}
.mt25 { margin-top: 25px !important;}
.mt30 { margin-top: 30px !important;}
.mt35 { margin-top: 35px !important;}
.mt40 { margin-top: 40px !important;}
.mt45 { margin-top: 45px !important;}
.mt50 { margin-top: 50px !important;}

.mr05 { margin-right: 5px !important;}
.mr10 { margin-right: 10px !important;}
.mr15 { margin-right: 15px !important;}
.mr20 { margin-right: 20px !important;}
.mr25 { margin-right: 25px !important;}
.mr30 { margin-right: 30px !important;}
.mr35 { margin-right: 35px !important;}
.mr40 { margin-right: 40px !important;}
.mr45 { margin-right: 45px !important;}
.mr50 { margin-right: 50px !important;}

.mb05 { margin-bottom: 5px !important;}
.mb10 { margin-bottom: 10px !important;}
.mb15 { margin-bottom: 15px !important;}
.mb20 { margin-bottom: 20px !important;}
.mb25 { margin-bottom: 25px !important;}
.mb30 { margin-bottom: 30px !important;}
.mb35 { margin-bottom: 35px !important;}
.mb40 { margin-bottom: 40px !important;}
.mb45 { margin-bottom: 45px !important;}
.mb50 { margin-bottom: 50px !important;}
.mb60 { margin-bottom: 60px !important;}
.mb70 { margin-bottom: 70px !important;}
.mb80 { margin-bottom: 80px !important;}
.mb90 { margin-bottom: 90px !important;}
.mb100 { margin-bottom: 100px !important;}

.ml05 { margin-left: 5px !important;}
.ml10 { margin-left: 10px !important;}
.ml15 { margin-left: 15px !important;}
.ml20 { margin-left: 20px !important;}
.ml25 { margin-left: 25px !important;}
.ml30 { margin-left: 30px !important;}
.ml35 { margin-left: 35px !important;}
.ml40 { margin-left: 40px !important;}
.ml45 { margin-left: 45px !important;}
.ml50 { margin-left: 50px !important;}

.pt00 { padding-top: 0px !important;}
.pt05 { padding-top: 5px !important;}
.pt10 { padding-top: 10px !important;}
.pt15 { padding-top: 15px !important;}
.pt20 { padding-top: 20px !important;}
.pt25 { padding-top: 25px !important;}
.pt30 { padding-top: 30px !important;}
.pt35 { padding-top: 35px !important;}
.pt40 { padding-top: 40px !important;}
.pt45 { padding-top: 45px !important;}
.pt50 { padding-top: 50px !important;}

.pr05 { padding-right: 5px !important;}
.pr10 { padding-right: 10px !important;}
.pr15 { padding-right: 15px !important;}
.pr20 { padding-right: 20px !important;}
.pr25 { padding-right: 25px !important;}
.pr30 { padding-right: 30px !important;}
.pr35 { padding-right: 35px !important;}
.pr40 { padding-right: 40px !important;}
.pr45 { padding-right: 45px !important;}
.pr50 { padding-right: 50px !important;}

.pb05 { padding-bottom: 5px !important;}
.pb10 { padding-bottom: 10px !important;}
.pb15 { padding-bottom: 15px !important;}
.pb20 { padding-bottom: 20px !important;}
.pb25 { padding-bottom: 25px !important;}
.pb30 { padding-bottom: 30px !important;}
.pb35 { padding-bottom: 35px !important;}
.pb40 { padding-bottom: 40px !important;}
.pb45 { padding-bottom: 45px !important;}
.pb50 { padding-bottom: 50px !important;}

.pl05 { padding-left: 5px !important;}
.pl10 { padding-left: 10px !important;}
.pl15 { padding-left: 15px !important;}
.pl20 { padding-left: 20px !important;}
.pl25 { padding-left: 25px !important;}
.pl30 { padding-left: 30px !important;}
.pl35 { padding-left: 35px !important;}
.pl40 { padding-left: 40px !important;}
.pl45 { padding-left: 45px !important;}
.pl50 { padding-left: 50px !important;}




.tal { text-align:left;}
.tac { text-align:center;}
.tar { text-align:right;}

a:hover img {
		filter: alpha(opacity=70);
	    /* Safari Opera */
	    opacity:0.70;
	    /* Firefox Netscape */
	    -moz-opacity:0.70;
	}

a:hover img {
 *zoom: 1;
	cursor:pointer;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all  0.6s ease;
	}