@charset "utf-8";

/****************デフォルト*******************/
html	{ height:100%; }
body	{ margin:0; padding:0px; text-align:center; height:100%;
	font-family: /*helvetica, sans-serif , arial, 'hiragino kaku gothic pro', meiryo;*/
	'YakuHanJP', 'Noto Sans JP', 'KozGoPro-Light', '小塚ゴシック Pro L', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', '游ゴシック', YuGothic, 'メイリオ', Meiryo, sans-serif;}
ul,li	{ list-style: none; margin:0px ; padding:0px ;}
h1,h2,h3,h4,h5,p,i{ margin:0px ; padding:0px;}

.clear	{ clear:both;}
.white	{ color:#fff;}
.left	{text-align:left;}
.center	{text-align:center;}
.va-m	{vertical-align: middle;}
.mt10	{margin-top:10px;}
.mt20	{margin-top:20px;}
.mt30	{margin-top:30px;}
.mt40	{margin-top:40px;}
.mt60	{margin-top:60px;}
.mt80	{margin-top:80px;}


.mb20	{margin-bottom:20px;}
.mb30	{margin-bottom:30px;}
.mb40	{margin-bottom:40px;}
.mb50	{margin-bottom:50px;}
.mb80	{margin-bottom:80px;}
.mb100	{margin-bottom:100px;}

/****************デフォルト*******************/

/*    検証CSS　　　*************
background-color:#ccc;　
**********************************/



/********************　横からスライド　************************************/

.hslide{ opacity:0; text-align:center; transform:translateX(-300px);transition:opacity 1s,transform 0.5s; }
.hslidein{ opacity:1 ; transform:translateX(0px); }

/********************　縦スライド　************************************/

.vslide{ opacity:0; text-align:center; transform:translateY(+100px);transition:opacity 1s,transform 0.5s; }
.vslidein{ opacity:1 ; transform:translateY(0px); }


/********************　縦スライドイン時間差　************************************/


#effect2 > .vslide:nth-of-type(2) {
	-moz-transition-delay:100ms;
	-webkit-transition-delay:100ms;
	-o-transition-delay:100ms;
	-ms-transition-delay:100ms;
	}
#effect2 > .vslide:nth-of-type(3) {
	-moz-transition-delay:200ms;
	-webkit-transition-delay:200ms;
	-o-transition-delay:200ms;
	-ms-transition-delay:200ms;
	}
#effect2 > .vslide:nth-of-type(4) {
	-moz-transition-delay:300ms;
	-webkit-transition-delay:300ms;
	-o-transition-delay:300ms;
	-ms-transition-delay:300ms;
	}


/********************　流星アニメーション　************************************/

.star { animation: kirakira 1.5s linear; color: #666; display: inline-block; height: 1em; line-height: 1em; position: fixed; top: -1em ; z-index: 1000; }
@keyframes kirakira {0% {transform:translate(0,100%) rotateX(0);}
100% {transform:translateX(calc(100vh + 40em)) rotateX(30deg);}}





/*.star { animation: kirakira 1s linear; color: #000; display: inline-block; height: 1em; line-height: 1em; position: fixed; top: -1em ; z-index: 1000; }
/*@keyframes kirakira {0% {transform:translateX(0) rotateX(0);}
/*100% {transform:translateX(calc(100vh + 20em)) rotateX(500deg);}}


/********************　隠しメニュー　************************************/

.nav {font-weight:bolder;display:none;	background-color:#fff;opacity:0.98; }
.fixed { display:inline; position: fixed; top: 0; left: 0; width: 100%; z-index:100; }
#gmh		{ text-align:right; float:right; margin-top:0px;   font-size:0.8em ; margin:12px 0 ;}
#gmh li		{ display: inline;　}
#gmh li a 	{ display:block; float:left ; padding:10px 10px; text-decoration:none; font-weight:bolder; color:#000; margin:0 5px;}
#gmh li a:hover	{ background-color : #000; color:#fff}



/********************　ページトップに戻るボタン　************************************/

.pagetop	{ display: none; position: fixed; bottom: 30px; right: 15px; z-index:101; }
.pagetop a	{ display: block; background-color: #000; text-align: center; color: #fff; font-size: 12px; text-decoration: none;
		padding: 5px 10px;filter:alpha(opacity=50); }
.pagetop a:hover { display: block; background-color: #b2d1fb; text-align: center; color: #fff; font-size: 12px; text-decoration: none; padding:5px 10px;
		filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;}


/********************　トップ1 ヘッダー MOVIE　************************************/

video { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100;margin:0 ;padding:0 ;}


#ami		{background-image: url(image/ami1.png); margin:0;padding:0;
   		height: 100%;    width: 100%; z-index: 1;}
#contents 	{ text-align:left ; position: relative; width:100%;z-index:2; height:100%;}

#topheader	{width:90%; margin:auto; height:100%; position: relative; padding:15px;}
#topheader p	{ font-size:1.2em; }
#rogo		{ float:left; }
#rogo img 	{ margin:15px 0 ; }
#gm		{ text-align:right; float:right; margin-top:0px;  font-size:0.8em ; margin:12px 0 ; }
#gm li		{ display: inline;　}
#gm li a 	{ display:block; float:left ; padding:10px 10px; text-decoration:none; font-weight:bolder; color:#fff;  margin:0 5px; }
#gm li a:hover	{ background-color : #fff; color:#000}

#catchbox	{ position: absolute;/*親をrelativeに*/   top: 0; right: 0; bottom: 0; left: 0; margin: auto 10px;
	width: 1000px; /*widthの指定は必須*/
	height:65%; /*heightの指定は必須*/ }
#catchbox h1	{ font-size:4.0em;margin-bottom:20px; font-family: 'Open Sans', sans-serif; }
#catchbox h3	{ font-size:3.5em; }
#catchbox p	{ font-weight:bolder; font-size:1.6em ;line-height:2.0em; }




/*******************トップ共通 *******************************************/
#top2 h2,#top3 h2,#top4 h2,#top5 h2,#top6 h2,#top7 h2 
{ /*font-family:Verdana, Helvetica, Arial, sans-serif ;*/
  /*font-family: 'Open Sans', sans-serif;*/
  font-family: 'Roboto', sans-serif;  }



/********************トップ2   サービス　************************************/

#top2	{background-color:#fff; width:100% ;text-align:center; padding-top:80px; margin-top:0;}
#top2 h2	{ font-size:4em ; padding:10px 50px; /*font-family: 'DIN Next LT W01 Bold';*/  }
#top2 h3	{ font-size:2.2em ; padding-top:20px ; padding-bottom:0px;margin-bottom:60px;font-family: 'Roboto', sans-serif;  }
#top2 h4	{ font-size:1.1em ; padding-top:20px ; padding-bottom:0px;margin-bottom:60px;}

.col3 	{ display: flex;}
.col3 li { width: calc(100% / 3);}

#top2 ul 	{}
#top2 ul li	{border:solid 1px #ccc;}
#top2 ul a	{display:block; text-decoration:none; color:#000; padding:80px 13% ; }
#top2 ul #bu1 a:hover	{color:#fff; background: url(image/top_service1.jpg) no-repeat;height:100%;position: relative; z-index:4; text-shadow: 1px 1px 2px #808080; }
#top2 ul #bu2 a:hover	{color:#fff; background: url(image/top_service2.jpg) no-repeat;height:100%;position: relative; z-index:4; text-shadow: 1px 1px 2px #808080;  }
#top2 ul #bu3 a:hover	{color:#fff; background: url(image/top_service3.jpg) no-repeat;height:100%;position: relative; z-index:4; text-shadow: 1px 1px 2px #808080;  }

.viewmore	{text-align:center; }
.icon		{ display: inline-block; width: 40px; height: 36px;background: url(image/top_service_viewb.png) no-repeat; vertical-align:middle; }
#top2 ul a:hover .icon	{background: url(image/top_service_vieww.png) no-repeat;}

.serviceico1		{ display: inline-block; height:52px ; width:60px; background: url(image/top_service_mark1b.png) no-repeat ;}
a:hover .serviceico1	{ background: url(image/top_service_mark1w.png) no-repeat ;}
.serviceico2		{ display: inline-block; height:52px ; width:60px; background: url(image/top_service_mark2b.png) no-repeat ;}
a:hover .serviceico2	{ background: url(image/top_service_mark2w.png) no-repeat ;}
.serviceico3		{ display: inline-block; height:52px ; width:60px; background: url(image/top_service_mark3b.png) no-repeat ;}
a:hover .serviceico3	{ background: url(image/top_service_mark3w.png) no-repeat ;}

/********************　トップ3　実績　************************************/


#top3	{ clear:both; background-image: url(image/ami2.png);width:100% ;text-align:center;color:#fff;position: relative;z-index:5;padding-top:80px;padding-bottom:80px;}
#top3 h2	{ font-size:4em ; padding:10px 50px; }
#top3 h3	{ font-size:1.8em ; padding-top:20px ;}
#top3 h4	{ font-size:1.1em ; padding-top:20px ; padding-bottom:0px;margin-bottom:60px;}

.bu1 a	{ text-decoration:none ; color:#fff; background-color:#000; padding: 10px 100px;}
.bu1 a:hover	{ background-color:/*#48d1cc*/ #658DC6 ; }

/*     画像スライダー用　　　*/
    .swiper-container {
      width: 100%;
      height: 480px;
	margin-bottom:50px;
    }
    .swiper-slide {
      text-align: center;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
}



/********************　トップ4　受賞歴　************************************/

#top4		{ clear:both; background-color:#fff; opacity: 0.90; text-align:center;padding-top: 80px;padding-bottom:60px;}
#top4 h2	{ font-size:4em ; padding:10px 50px;  }
#top4 h4	{ font-size:1.1em ; padding-top:20px ; padding-bottom:0px;margin-bottom:60px;}

#top4 dl	{ display:inline-block; text-align:left; border-bottom:solid 1px #d1a946; clear:both;margin-bottom:15px;}
#top4 dt	{ font-size:1.3em; font-weight:bolder;padding-left:80px; }
#top4 dd	{ margin:0; padding-left:80px;}
.padL10		{ padding-left:10%; }
.padL55		{ padding-left:55%; }
.awico1		{ background-image: url(image/top_awards_ico1.png) ;background-repeat: no-repeat; }
.awico2		{ background-image: url(image/top_awards_ico2.png) ;background-repeat: no-repeat; }
.awico3		{ background-image: url(image/top_awards_ico3.png) ;background-repeat: no-repeat; }
.awico4		{ background-image: url(image/top_awards_ico4.png) ;background-repeat: no-repeat; }
.awico5		{ background-image: url(image/top_awards_ico5.png) ;background-repeat: no-repeat; }


/********************トップ5　クライアント************************************/

#top5		{ background-color:#fff; text-align:center;padding-top:80px;padding-bottom:150px;}
#top5 h2	{ font-size:4em ; padding:10px 50px;  }

#top5 ul	{ display:inline-block ; width:1180px;margin:20px auto 50px auto;}
#top5 li	{ border:solid 1px #ccc;width:260px;height:105px;padding-top:33px ; 
		float:left;margin:15px;}


/********************トップ6 お知らせ************************************/

#top6		{ background-color:#658DC6 ; text-align:center ; padding-top:80px; padding-bottom:80px; color:#fff;}
#top6 h2	{ font-size:4em ; padding:10px 50px;  }

#top6 dl	{ width:55% ;margin:80px auto ; text-align:left; }
#top6 dt	{ font-weight:bolder;float:left; }
#top6 dt span	{ font-size:0.9em; margin-right:15px;padding:5px 8px;background-color:#bbb; }
#top6 dd	{ margin-left: 230px; margin-bottom:15px;}

#top6 .more	{ text-decoration:none; width: 500px ; padding:10px 10px 10px 40px ;
		}
#top6 #more a		{ color:#fff;background-image: url(image/top_service_vieww.png) ;background-repeat: no-repeat; }
#top6 #more a:hover	{ background-color:#fff; color:#000;background-image: url(image/top_service_viewb.png) ;background-repeat: no-repeat; }	


/********************トップ7 　インフォメーション　************************************/

#top7		{ background-color:#fff ; text-align:center ; padding-top:80px; padding-bottom:80px; }


#infobox	{ border:solid 1px #000;width:1050px; margin:auto;padding:20px;}
#infobox ul	{ display:inline-block;}
#infobox li	{ text-align:left; display:block;float:left; width:460px; padding:10px 30px;margin:1px;/*background-color:#ccc;*/}
#infobox p	{margin-bottom:15px;font-weight:bolder;}
#infobox a:hover	{opacity: 0.6}


/********************　フッター　************************************/
#footer 	{ background-color:#000; text-align:center;padding-bottom:60px; color:#fff; padding-top:50px;}
#footer img	{ margin-bottom:30px; }
#footer .tf1	{ /*font-size:1.4em;*/ font-weight:bold; }
#footer p span	{margin: 0 10px;white-space: nowrap}
#footer ul	{ margin:50px ; text-align: center;}
#footer li	{ display: inline; margin:0px;}
#footer ul a	{ text-decoration:none; color:#fff; padding:0px 20px ; font-size:1.1em ; 
		font-weight:bolder; white-space: nowrap ; border-left: solid 1px #fff;}
#footer ul a:hover	{ color:#48d1cc; /*background-color:#fff;*/ }
#footer .con	{ border-right: solid 1px #fff; }




/********************　下層　：Service　************************************/

.Servcopy1	{margin:40px 20px 150px 20px; line-height:2.0em; font-weight:600;}
.Servbox1	{ margin:auto;  width:80%; max-width:900px; text-align:left; }
.Servbox1 h2	{ margin-bottom:25px; height:46px ; padding-left:55px; }
.Servbox1 p	{ line-height:1.8em;  }
.Servbox1 hr	{ border:none ; border-top:solid 4px #ccc; margin:100px 0;}
.Servbox1 .kakko1	{ height:50px; border-top:solid 4px #ccc; border-left:solid 4px #ccc; border-right:solid 4px #ccc ; border-bottom: solid 1px #fff;
			border-radius: 30px 30px 0 0 ; margin-bottom:120px;}
.Servbox1 .kakko2	{ height:50px; border-bottom:solid 4px #ccc; border-left:solid 4px #ccc; border-right:solid 4px #ccc ; border-top: solid 1px #fff;
			border-radius: 0 0 30px 30px ; margin-top:120px;}
.Servbox1 .ico1	{ background-image: url(image/ico1.png) ;background-repeat: no-repeat; }
.Servbox1 .ico2	{ background-image: url(image/ico2.png) ;background-repeat: no-repeat; }
.Servbox1 .ico3	{ background-image: url(image/ico3.png) ;background-repeat: no-repeat; }
.Servbox1 .ico4	{ background-image: url(image/ico4.png) ;background-repeat: no-repeat; }
.Servbox1 .ico5	{ background-image: url(image/ico5.png) ;background-repeat: no-repeat; }
.Servbox1 .ico6	{ background-image: url(image/ico6.png) ;background-repeat: no-repeat; }
.Servbox1 .ico7	{ background-image: url(image/ico7.png) ;background-repeat: no-repeat; }
.Servbox1 .ico8	{ background-image: url(image/ico8.png) ;background-repeat: no-repeat; }
.Servbox1 .ico9	{ background-image: url(image/ico9.png) ;background-repeat: no-repeat; }
.Servbox1 .ico10	{ background-image: url(image/ico10.png) ;background-repeat: no-repeat; }

.Servbox1 dl	{ margin:60px auto 60px auto ; display:inline-block ;text-align:left; }
.Servbox1 dt , .Servbox1 dd	{ margin:0; padding:5px 15px; }
.Servbox1 dt 	{ background-color:#888; color:#fff ; font-weight:600; margin-bottom:20px ; }
.Servbox1 dd	{ margin:1px 0 ; }

.table1		{ margin:60px auto;  /*display:inline-block ; */ text-align:left; width:90%; min-width:380px; } 
.table1 th ,.table1 td	{ padding:10px 20px 10px 20px ; border-top : dotted 1px #ccc;  }


.Servbox2	{ padding-top : 50px; margin:auto;  width:80%; max-width:900px; text-align:center; }
.Servbox2 h2	{ font-size:4em ; padding:10px 50px; font-family: 'Roboto', sans-serif; }
.Servbox2 h3	{ font-size:2em ; margin:100px auto 60px auto; }
.Servbox2 p	{ width:90%;margin:auto; margin-bottom:60px;}