@charset "utf-8";
/*-----------------------------------------------
　■header
-----------------------------------------------*/
#header {
	background: #fff;
	background-color: rgba(255, 255, 255, 0.97);
	height: 100px;
}
#header::after {
    content: '';
    display: block;
    background: #CCC;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
}

@media only screen and (max-width: 640px) {
#header {
 height: 70px;
}
}
/*-----------------------------------------------
　■ページタイトル
-----------------------------------------------*/
#ptitle {
	position: relative;
	padding:0;
	height:300px;
	padding:100px 25px 0;
}
#ptitle::after {
    content: '';
    display: block;
    background: #CCC;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
}
#ptitle .inner {
	height:200px;
}
#ptitle .text {
	display:table;
	height:200px;
}
#ptitle .text div {
	display:table-cell;
	vertical-align:middle;
	text-align:left;
}
#ptitle .title {
	font-size:18px;
}
#ptitle .text div p.title {
	text-align:left;
}
#ptitle .text div p.title:after {
	left:0;
	margin:0;
}
#ptitle  .text div h1.ptitle {
	font-size:32px;
	line-height:1;
}
#ptitle .img_box {
	top:100px;
	width:100%;
	left:0;
	right:0;
	margin:0 auto;
	max-width:1100px;
	height:200px;
	position:absolute;
	z-index:-1;
	background-repeat:no-repeat;
	background-position:center center;
}
/*背景イメージなし*/

/*.gmap#ptitle{
	background-color:black;
	z-index:-2;
}

.gmap#ptitle .img_box {
	background-image: url(../../company/img/bg_ptitle.jpg);
}*/
@media only screen and (max-width: 640px) {

#ptitle {
	height:270px;
	padding-top:70px;
}
#ptitle .img_box {
	top:70px;
}
}
@media only screen and (max-width: 480px) {
#ptitle {
height:auto;
padding:70px 0 0;
}
#ptitle .inner {
	position:static;
	height:auto;
}
#ptitle .text {
display:table;
height:100%;
}
#ptitle .text div {
display:table-cell;
vertical-align:middle;
text-align:left;
padding:20px 15px;
}
#ptitle .text div p.title {
 font-size:12px;
}
#ptitle .text div p.title:after {
 left:0;
 margin:0;
 height:2px;
}
#ptitle .text div h1.ptitle {
 font-size:20px;
 line-height:1;
}
/*.gmap#ptitle .img_box {
	background-image: url(../../company/img/bg_ptitleSP.jpg);
}*/
}
/*-----------------------------------------------
　■制作事例
-----------------------------------------------*/
.section#gallery h1{ display:none}

/*-----------------------------------------------
　■会社情報
-----------------------------------------------*/
/*□メッセージ
-----------------------------------------------*/
.section#message .message_box {
	position:relative;
	text-align:center;
}
.section#message .message_box .text {
	position:relative;
	z-index:10;
	margin-left:280px;
	text-align:left;
}
@media only screen and (max-width: 480px) {
.section#message .message_box {
position:relative;
}
.section#message .message_box .text {
position:relative;
z-index:10;
margin-left:0;
}
}
/*-----------------------------------------------
　制作の流れ
-----------------------------------------------*/
.section#flow{}
.section#flow h1{ display:none;}
.section#flow ul li{ width:48%;}
.section#flow ul li:nth-child(odd){ float:left;}
.section#flow ul li:nth-child(even){ float:right;}
.section#flow ul li .btn_L {
	width:100%;
	display: inline-block;
}
.section#flow p {
	margin-top:15px;
	text-align:left;
}
.section#flow table{
	width:100%;
	margin:0 0 0;
	background-color:#FFF;
}

.section#flow table td{
	border-top:6px solid #CCC;
	border-bottom:1px solid #CCC;
	border-right:1px solid #CCC;
	border-left:1px solid #CCC;
	vertical-align:middle;
}
.section#flow table tbody th{
	width:180px;
	font-size:24px;
	font-weight:bold;
	white-space:normal;
	padding:15px;
	box-sizing:border-box;
}
.section#flow table th{
	border-bottom:1px solid #CCC;
	border-right:1px solid #CCC;
	border-left:1px solid #CCC;
	vertical-align:middle;
	text-align:center;
	font-weight:bold;
	color:#555;
}
.section#flow  table tbody td{
	padding:30px;
	border-top:6px solid #CCC;
}

.section#flow table h3{
	font-size:26px;
	line-height:1.6;
	border-bottom:1px dotted #CCC;
	margin-bottom:1em;
	position:relative;
	padding-left:50px;
}
.section#flow table h3:before{
	display:inline-block;
	border-radius:3px;
	position:absolute;
	left:0;
	top:10px;
	font-size:12px;
	text-align:center;
	width:45px;
	line-height:24px;
	vertical-align:middle;
}
.section#flow table.lita h3:before{
	content:"LITA";
	background-color:#ffAB00;
}
.section#flow table.client h3:before{
	content:"お客様";
	background-color:#AFCE53;
}
.section#flow table.lita th{
	border-top:6px solid #ffAB00;
}
.section#flow table.lita th span.numL{
	color:#FF9800;
	font-size:150%
}
.section#flow table.client th{
	border-top-width: 6px;
	border-top-style: solid;
	border-top-color: #AFCE53;
}

.section#flow table.client th span.numL{
	color:#AFCE53;
	font-size:150%
}
.section#flow .lita {
	text-align:left;
}
.section#flow .client {
	text-align:left;
}
@media only screen and (max-width: 880px) {
.section#flow ul li,.section#flow ul li .btn_L{ width:100%; max-width:none;}
.section#flow ul li:nth-child(odd){ float:none; margin-bottom:1em}
.section#flow ul li:nth-child(even){ float:none;}

}
@media only screen and (max-width: 640px) {
.section#flow table tbody th,
.section#flow table tbody td{
	display: list-item;
    border: none;
	text-align:left;
	list-style:none;
	margin:0;
	border-right:1px solid #AAA;
	border-bottom:1px solid #AAA;
	border-left:1px solid #AAA;
}

.section#flow  table tbody th{
	padding:10px;
	font-size:24px;
	font-weight:bold;
	white-space:normal;
	padding:10px;
	width:auto;

}
.section#flow table tbody th p{
	font-weight:bold;
}

.section#flow table tbody td{
	width:auto;
	padding:15px;
}
.section#flow table h3{
	font-size:16px;
	padding-left:43px;
}
.section#flow table h3:before{
	border-radius:2px;
	top:5px;
	font-size:10px;
	width:38px;
	line-height:16px;
}
}
/* □会社概要
---------------------------------------------------*/
.section#company {}
/*-----------------------------------------------
　■お問合わせ
-----------------------------------------------*/
.section#mailform {}
.section#mailform .inner{ background-color: transparent;}
.section#mailform .inner dl{ padding-top:20px; border-top:1px dotted #CCC;}
.section#mailform th {width:210px; position:relative;}
.section#mailform th span{ position:relative; box-sizing:border-box; text-align:left; background-color:#EEE; color:#111; padding:8px 15px;}
.section#mailform th span.nes{ padding-left:3.0em;}
.section#mailform th span.nes:before{
	display:inline-block;
	border-radius:3px;
	position:absolute;
	left:10px;
	top:13px;
	font-size:12px;
	text-align:center;
	width:3.2em;
	line-height:20px;
	vertical-align:middle;
	content:"必須";
	color:#FFF;
	background-color:#e63125;
}
.section#mailform td{ vertical-align:middle; padding:1px 0 10px ; }
.section#mailform td ul li{ margin:0.5em 2em 0 0;}

ul.btn_area { text-align:center;}
ul.btn_area li{ display:inline-block; white-space:nowrap; margin:0 10px 10px;}
.error{ color:#e63125;}



#stepBar {
  position: relative;
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
  text-align: center;
  width: 100%;
  overflow: hidden;
  *zoom: 1;
}
#stepBar .step {
  position: relative;
  float: left;
  display: inline-block;
  line-height: 40px;
  padding: 0 10px 0 0;
  background-color: #CCC;
  color:#FFF;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-weight:bold;
  font-size:16px;

  width: 33.333%; /*1ステップの幅*/
}
#stepBar .step:before, #stepBar .step:after {
  position: absolute;
  left: -8px;
  display: block;
  content: '';
  background-color: #CCC;
  border-left: 4px solid #F4F4F4;
  width: 13px;
  height: 20px;
}
#stepBar .step:after {
  top: 0;
  -moz-transform: skew(30deg);
  -ms-transform: skew(30deg);
  -webkit-transform: skew(30deg);
  transform: skew(30deg);
}
#stepBar .step:before {
  bottom: 0;
  -moz-transform: skew(-30deg);
  -ms-transform: skew(-30deg);
  -webkit-transform: skew(-30deg);
  transform: skew(-30deg);
}
#stepBar .step:first-child {
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
#stepBar .step:first-child:before, #stepBar .step:first-child:after {
  content: none;
}
#stepBar .step:last-child {
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
#stepBar .step.now {
  color: #FFF;
  background-color: #0098af;
}
#stepBar .step.now:before, #stepBar .step.now:after {
  background-color: #0098af;
}
@media only screen and (max-width: 640px) {
.section#mailform th {width:100%; margin-bottom:10px;}
.section#mailform th span.nes:before{
	top:13px;
}
}
@media only screen and (max-width: 480px) {
.section#mailform th span{width:100%; padding: 3px 10px;}
.section#mailform th span.nes{
	padding-left:3.4em;
}
.section#mailform th span.nes:before{
	top:7px;
	left:7px;
	font-size:10px;
	line-height:14px;
	width:3.2em;
}
.section#mailform .inner td{ margin-left:0; margin-bottom:20px; }
.section#mailform .inner td:after{margin-left:0; margin-top:20px;}
}
/*-----------------------------------------------
　■地図システム
-----------------------------------------------*/
#mapsys1{ padding:0; display:table; width:50%; float:right; margin-left:20px; margin-bottom:1em;}
#mapsys1 > div{ display:table-cell; width:50%; height:0; padding-top:37.5%;}
#mapsys1 > div:nth-child(1){ background-image:url(../../cms-map/img/gmap1_DB.png); background-position:center; background-repeat:no-repeat; background-size: contain;}
#mapsys1 > div:nth-child(2){ background :url(../../cms-map/img/img_gmap2.png) no-repeat center/cover; }
#map{ width:100%; height:0; padding-top:30%; }
#map2{ }
#gmap2 .box_img {
	max-width:360px;
	max-height:180px;
	height:0;
	width:40%;
	padding-top:20%;
	margin-right:40px;
	border:0 none transparent;
}
#gmap2 .box_text {
	margin-left:auto;
}

@media only screen and (max-width: 480px) {
#map{ width:100%; padding-top:50%;}
#mapsys1{ width:100%; margin-left:0; margin-bottom:20px;}
#mapsys1 > div{ padding-top:50%;}
/*#mapsys1 > div:nth-child(odd){padding:30px 0;}
#mapsys1 > div:nth-child(even){ height:0; padding-top:50%;}*/
#gmap2 .box_img {
	max-width:480px;
	max-height:240px;
	width:100%;
	padding-top:50%;
	margin-right:0;
	margin-bottom:1em;
}
}
/*-----------------------------------------
　■06.GRAPH
-----------------------------------------*/
#demoGraph{ display:table; width:100%;}
#demoGraph > div{ display:table-cell; vertical-align:middle;}
#demoGraph > div:nth-child(1), #demoGraph > div:nth-child(1) table{ width:120px;}
#demoGraph > div:nth-child(1) table th{ width:100%; border:1px solid #CCC; background-color:#F4F3F2;}
#demoGraph > div:nth-child(1) table td{ width:100%; border:1px solid #CCC; background-color:#F4F3F2; margin-bottom:2px}
#demoGraph > div:nth-child(1) table td input{ width:100%; border:0 none transparent;  text-align:center;  background-color:white; }
#demoGraph > div:nth-child(1) table td input:focus { background-color: #FFF8F8; }
#demoGraph > div:nth-child(1) table td input[type="number"]::-webkit-outer-spin-button,
#demoGraph > div:nth-child(1) table td input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#demoGraph > d div:nth-child(1) table td input[type="number"] {
    -moz-appearance:textfield;
}
#demoGraph > div:nth-child(2){}
.graph0 {
	width:100%;
	height:0;
	padding-top:80%;
	position:relative;
	z-index:1
}
.graph1 {
	width:100%;
	height:0;
	padding-top:70%;
	position:relative;
	z-index:1
}
.graph2 {
	width:100%;
	height:0;
	padding-top:50%;
	position:relative;
	z-index:1
}
.graph3 {
	width:100%;
	height:0;
	padding-top:25%;
	position:relative;
	z-index:1
}

.graph0 .outer, .graph1 .outer, .graph2 .outer, .graph3 .outer {
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	height:100%;
	width:100%;
	z-index:2
}
.web {
	width:100%;
	height:0;
	padding-top:50%;
	background-position:center;
	background-repeat: no-repeat;
	background-size:contain;
	position:relative;
	z-index:1;
	margin:auto;
}
.web .outer {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
.rawBox {
	width:100%;
}
.rawBox > div {
	float:left;
}
.rawBox.try > div {
	margin-left:40px;
	margin-top:20px;
	width:calc( (100% - 81px ) / 3 );
}
.rawBox.try > div:nth-child(3n+1) {
	margin-left:0;
}
@media only screen and (max-width: 480px) {
#demoGraph > div:nth-child(1), #demoGraph > div:nth-child(1) table{ width:100px;}
.rawBox.try > div {
	margin-left:20px;
	margin-top:10px;
	width:calc( (100% - 21px ) / 2 );
}
.rawBox.try > div:nth-child(3n+1) {
	margin-left:20px;
}
.rawBox.try > div:nth-child(2n+1) {
	margin-left:0px;
}
}
/*---------------------------------------------
　■canvas
---------------------------------------------*/
#canvas-js{ background-color:#F2F3F4;}
/*#container{width:960px; margin:auto; }*/
#canvas-js .outer{ width: 100%; height:0; position:relative; padding-top:75%;}
#canvas-js #inner,#canvas-js #button,#canvas-js #setup{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:1;
}
#canvas-js #inner,#canvas-js #button,#canvas-js #setup{
	display:block;
	z-index:2;
	text-align:center;
	vertical-align:middle;
	width:100%;
	height:100%;
}
#canvas-js img{ display:none; }

#canvas{}
#canvas-js .disnon {display:none !important;}
#canvas-js #button{
	background-image: url(../../canvas/img/start.png);
	background-repeat:no-repeat;
	background-position:center 56%;
	background-size:33% auto;
    -webkit-animation:blink 1.5s ease-in-out infinite alternate;
	    -moz-animation:blink 1.5s ease-in-out infinite alternate;
	    animation:blink 1.5s ease-in-out infinite alternate;
	}
#canvas-js #setup{
	background-image:url(../../canvas/img/onemore.png);
	background-repeat:no-repeat;
	background-position:center 29%;
	background-size:8.25% auto;
    -webkit-animation:blink 1.5s ease-in-out infinite alternate;
	    -moz-animation:blink 1.5s ease-in-out infinite alternate;
	    animation:blink 1.5s ease-in-out infinite alternate;
}
	@-webkit-keyframes blink{
	    0% {opacity:0;}
	    100% {opacity:1;}
	}
	@-moz-keyframes blink{
	    0% {opacity:0;}
	    100% {opacity:1;}
	}
	@keyframes blink{
	    0% {opacity:0;}
	    100% {opacity:1;}
	}
/*---------------------------------------------
　■ビデオセミナー
---------------------------------------------*/
	
	
aside.vseminar{ background-color: #F2F3F4;}
.vseminar .img_box {
	width:100vw;
	height:0;
	padding-top:36.875%;
	z-index:-1;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	background-image: url(../../vseminar/img/topimg.jpg);
	margin:0 auto;
}
#vsemi06{ display:block; width:100%; height:0; padding-top:28%; overflow:hidden; background-position:center; background-repeat:no-repeat; background-size:contain; background-image: url(../../vseminar/img/vsemi06.png)}
@media only screen and (min-width: 1281px) {
.vseminar .img_box {
	width:1280px;
	padding-top:472px;
}
}
@media only screen and (max-width: 640px) {
.vseminar#ptitle {	padding-top: calc(38.15% + 70px);}
#ptitle .img_box,.vseminar#ptitle .img_box {
	top:70px;
}
.vseminar#ptitle .text {  padding:70px 15px 15px 15px;}
}
@media only screen and (max-width: 480px) {
#vsemi06{padding-top:96.5%; background-image: url(../../vseminar/img/vsemi06sp.png);}
.vseminar#ptitle .text div {
padding:0;
}
.vseminar#ptitle .text div p.title {
	margin-bottom:10px;

}
}
.section#icons h1 { font-size : calc( 21px + (( 1vw - 3.2px) * 5.1515 ));
margin-bottom:25px;
padding-bottom:0;
}
.section#icons h1:after {
	display:none;
}

@media only screen and (min-width: 981px) {
.section#icons h1 { font-size :55px;
}
}
@media only screen and (max-width: 480px) {
.section#icons h1 {
margin-bottom:15px;
padding-bottom:0;
}
}

@media only screen and (max-width: 320px) {
.section#icons h1 { font-size :21px;
}
}

.section#icons ul {
	margin: 0 auto;
	display: table;
	width:100%;
	box-sizing: border-box;
}
.section#icons ul li {
	display: table-cell;
	text-align: center;
	width: 33.33%;
	
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.section#icons ul li a{background-image: url(../img/circle.png); background-position:center; background-repeat:no-repeat;  display: inline-block; width:calc(100% - 30px); background-size: contain; padding:15%;}
.section#icons ul li a:hover{ opacity:0.8;}


.section#icons ul li .img_box {
	height: 0;
	padding-top:75%;
	margin: 0 auto 10px;
	background-position: center;
	background-repeat: no-repeat;
	background-size:contain;
	display: block;
	font-size: 1px;
	line-height: 1px;
	overflow: hidden;
	text-align: left;
	white-space: nowrap;
}
.section#icons ul li.about .img_box {
	background-image: url('../img/icon_about.png')
}
.section#icons ul li.business .img_box {
	background-image: url('../img/icon_business.png')
}
.section#icons ul li.activity .img_box {
	background-image: url('../img/icon_activity.png');
}
.section#icons ul li.gallery .img_box {
	background-image: url('../img/icon_gallery.png');
}
.section#icons ul li.system .img_box {
	background-image: url('../img/icon_system.png');
}
.section#icons ul li .text {
}
.section#icons ul li .text .sTitle {
	font-size: 28px;
	line-height: 1;
}
.section#icons ul li .text .sDescription {
	font-family: 'Arial', sans-serif;
	font-size: 14px;
	line-height: 1;
}
.section#icons ul li .text .service-arrow {
	background-color: black;
	border-radius: 10px;
	display: block;
	height: 20px;
	margin:5px auto 0;
	width: 20px;
	position: relative;
}
.section#icons ul li .text .service-arrow:after {
	background-repeat: no-repeat;
	display: block;
	font-size: 1px;
	line-height: 1px;
	overflow: hidden;
	text-align: left;
	text-indent: 100%;
	white-space: nowrap;
	background-image: url(../../common/img/arrow_W.png);
	background-size: 7px;
	content: "";
	position: absolute;
	width: 8px;
	height: 10px;
	top: 5px;
	left: 7px;
}
.section#icons ul li:hover .text {
	color:#555;
}
.section#icons ul li:hover .text .service-arrow {
	background-color: #555;
}
@media only screen and (max-width: 767px) {
.section#icons ul li .text .sTitle {
	font-size: 19px;
}
}
@media only screen and (max-width: 640px) {
.section#icons {
	padding: 30px 15px;
	height: auto;
	min-height: 0;
}
	.section#icons ul {
	overflow: hidden;
	zoom: 1;
	display: block;
	margin: 25px auto -25px;
	width: 100%;
	height: auto;
}
	.section#icons ul li {
	display: block;
	float: left;
	margin-bottom: 25px;
}
	.section#icons ul li:nth-child(-n+3) {
	width: 33.33%;
}
	.section#icons ul li:nth-child(n+4) {
	width: 50%;
}
.section#icons ul li a{ padding:10% 5%; width:calc(100% - 10px); background-color:#ffde00; border-radius: 10px;}
/*	.section#icons ul li .img_box {
	background-size: auto 50px;
	margin: 0 auto 10px;
	height: 50px;
}*/
	.section#icons ul li .text .sTitle {
	font-size: 18px;
	font-size: 1.125rem;
	margin-bottom: 2px;
}
	.section#icons ul li .text .sDescription {
	font-size: 8px;
}
	.section#icons ul li .text .service-arrow {
	margin: 8px auto 0;
	height: 10px;
	width: 10px;
	border-radius: 5px;
}
	.section#icons ul li .text .service-arrow:after {
	background-repeat: no-repeat;
	display: block;
	font-size: 1px;
	line-height: 1px;
	overflow: hidden;
	text-align: left;
	text-indent: 100%;
	white-space: nowrap;
	background-image: url('../../common/img/arrow_white_small.png');
	background-size: 3px;
	height: 6px;
	left: 4px;
	top: 2px;
	width: 3px;
}
}