@charset "UTF-8";
/*IE*/
@font-face {
  font-family:'Tenderness';
  src:url(../font/tenderness-webfont.eot);}
/*chrome*/
@font-face {
  font-family:'Tenderness';
  src:url(../font/tenderness-webfont.ttf) format("truetype");}

@font-face {
  font-family:'Futura';
  src:url(../font/Futura-Light.ttf) format("truetype");}


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, figure {margin: 0;padding: 0;border: 0;outline: 0;font-weight: normal;font-style: normal;font-family: inherit;vertical-align: baseline;}
main, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box; }
ol,ul { list-style:none;}
table { border-collapse:collapse; border-spacing:0;}
img{vertical-align: bottom;}
caption,th { text-align:left;}
/*html{overflow: scroll;}*/

a:hover, a img:hover{opacity: 0.7}
img, .wp-caption{max-width: 100%; height: auto;}
a img{border: none;}

a{color: #4BA698;}
del{color: #BEBFBF}

h1{letter-spacing: 5px; letter-spacing: 0.5rem;}

/* Font
++--------------------------------------------++*/
html { font-size: 62.5%;} /*フォントサイズを10pxにリセット*/
body { font-size: 18px; font-size: 1.8rem; } /* 全体サイズ */

/*++--- 767px ---++*/
@media (max-width: 767px) {
  html { font-size: 50.00%;}
}


/*
#67676B
#dfdfdf

*/

/* 初期
++--------------------------------------------++*/
body {font-family: 'Noto Sans Japanese', 'Lucida Sans Unicode', 'Tenderness', 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif, '游明朝', 'Times New Roman';
  line-height: 1.5;
  color: #404040;}

body, html {height: 100%;}

p{margin: 0 0 1em;}

.main-div{
  height: 100%;
  z-index: 1;}

.wrap {
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
  padding: 4em 0;}


/*.wrap:after {
  content: '';
  display: block;
  clear: both;}*/

.scroll {
  position: relative;
  min-height: 100%;
/*  padding: 2em 0;*/
  z-index: 2;}

.fix {
  position: relative;
  min-height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;}

.bg-2, .bg-3, .bg-4 {
  min-height: 50%;}

#logo svg{
  position: absolute;
  width: 500px;
  max-width: 55%;

  stroke: none;
  fill: #3F3F3F;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;}





/* 表示画像の高さ ÷ 表示画像の幅 × 100 */

/*++--- 768px ---++*/
@media (min-width: 768px) {
  .bg-1{background-image: url("../img/slide-3.jpg");}
  .bg-2{background-image: url("../img/pc-pro.jpg");}
  .bg-3{background: url("../img/bg-05.jpg") no-repeat center top/cover;}
  .bg-4{background-image: url("../img/bg-04.jpg");}
}

/*++--- 767px ---++*/
@media (max-width: 767px) {
  .bg-1{background-image: url("../img/slide-3.jpg");}
  .bg-2{background-image: url("../img/pc-pro-m.jpg");}
  .bg-3{background: url(../img/bg-05.jpg) no-repeat left top/cover;}
  .bg-4{background: url(../img/bg-04.jpg) no-repeat left center/cover;}
}

.bg-3{
	/*background: url(../img/bg11.jpg) no-repeat left top/cover;*/
}

.bg-4{
	/*background: url(../img/bg10.jpg) no-repeat center center/cover;*/
}


.color-1{background-color: #F5F7FA;
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);}
.color-2{background-color: #F5F7FA;}
.color-3{background-color: #F5F7FA;}
.color-4{background-color: #F9FAFC;}
.color-5{background-color: #E9F3F1;}
#news{background-color: #F5F7FA;
  border-bottom: 1px solid #D9DBDE;}

.wrap{
  color: #8C9398;}

.wrap h2{
  text-align: center;
  color: #666666;
  margin: 3em 0 1em;}

.wrap h3{
  color: #a0966e;
  margin: 0 0 .5em;}

.service-div4 h3{
	margin-top: 2em;}

/* 写真
++--------------------------------------------++*/
.photo{
  background: linear-gradient(#D9D9D9 55%, #666666 90%);}
  /*canvas {
  background-image: radial-gradient(#666, #333);}*/

@media (max-width: 769px) {
  .photo, #three-container{
    display: none;}
}


/* 事業・サービス
++--------------------------------------------++*/
#service .center{
	margin-bottom: 2em;
	text-align: center;}

.service-div{
  margin-bottom: 2em;
  text-align: center;}

.service-div p{
  padding: 0 0 0.2em;
  text-align: left;}

.service-div i{
  font-size: 42px; font-size: 4.2rem;
  padding: 3rem;
  border-radius: 100%;
  background-color: #88C6B6;
  margin-bottom: .5em;
  color: #fff;
  text-shadow: 1px 1px 20px rgba(55,181,161,0.7);}

.service-div p{
  margin: .2em 2em;}

.service-div3{
  width: 90%;
  margin: 1em auto;}

.service-div3 h3{
  margin: 0 0 1em;}


.service-div4{
  width: 90%;
  margin: 4em auto;}

.service-div4 h2{
  text-align: center;
  font-size: 23px; font-size: 2.3rem;}

.service-div4 span{
  display: block;}

.service-div4 ul{
  list-style: disc none outside;
  padding: 0 0 0 2em;
  margin: 2em auto 2em;}

.service-div4 ul li{
	line-height: 2.0;
  padding: 0 0 0.25em 0;}

.service-div4 ul li ul{
  margin: 0;
  padding: 0 1em;}

.service-div4 ul li ul li{
  list-style: none;
  margin: 0;
  padding: 0.25em 0;}


/*++--- 767px ---++*/
@media (min-width: 768px) {
  .service-div{
    width: 50%;}

  .service-data, .service-app , .service-web, .service-finance{
    float: left;}

  .service-div1:after, .service-div2:after{
    content: "";
    display: block;
    clear: both;}
}


/* ニュース
++--------------------------------------------++*/
#news{
  position: relative;}

#particles{
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;}

.news-head{
  text-align: center;
  color: #404040;}

#news .tableWrap{
	width: 1000px;
	max-width: 95%;}

#news-inner table{
	width: 100%;
  margin: 0 auto 3em;}

.news-head p, #news-inner table{
  color: #8C9398;}

#news-inner table caption{
	font-size: 2.0rem;
	text-align: center;
	margin: 0 0 1.5em;}

.newsP{
  color: #8C9398;
  text-align: center;}


/* アクセス
++--------------------------------------------++*/
#access{
	padding-bottom: 6em;
}
.access-w img{
  /*vertical-align: baseline;*/}

.access-w table{
  margin: 0 auto;}

table{
  max-width: 700px;}

tr {
  border-top: solid 1px #CCCCCC;
  border-bottom: solid 1px #CCCCCC;}

th{
  white-space: nowrap;
  display: inline-block;
  padding: 0rem 5rem;}

td{
  padding: 2rem 0rem;}

#name{
  width: 90px;
  height: auto;}

#mail{
  width: 180px;
  height: auto;
  vertical-align: baseline;}

#tel{width: 130px;
  height: auto;
  vertical-align: baseline;}

/*++--- 767px ---++*/
@media (max-width: 767px) {
  #name{width: 70px;}
  #mail{width: 160px;}
  #tel{width: 110px;}

  th{padding: 0rem 1.5rem 0 0.5rem ;}
}



/* フッター
++--------------------------------------------++*/
.foot p{
  text-align: center;
  letter-spacing: 0.25em;}

/* レスポンシブ
++--------------------------------------------++*/
/*++--- 767px ---++*/
@media (max-width: 767px) {
  .gnav li a{font-size: 9px; font-size: .9rem;}
  #logo a img{width: 45%;}
}



.bl_flex{
	display: flex;
	align-items: flex-end
}

.bl_flex > .bl_flex_left{
	flex:  1;
	margin-right: 3em;
}

.bl_flex > .bl_flex_right{
	flex:  2;
}

.hp_mb1{
	margin-bottom: 1em;
}

.el_img{
	display: block;
	width: 250px;
	margin: 0 auto 3em;
}

.el_img img{
	border-radius: 50%;
}