@charset "utf-8";

@import url("print.css");
@import url("reset.css");
@import url("huck.css");
@import url("http://fonts.googleapis.com/css?family=Limelight");
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@900&family=Noto+Sans+JP:wght@900&family=Noto+Serif+JP:wght@900&display=swap');
@import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);
/*
font-family: 'M PLUS 1p', sans-serif;
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', serif;
*/
body{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

/*=============================
ヘッダー
=============================*/
header{ height:575px; width: 100%; position: relative; overflow: hidden;}

header #logo{background:url(../images/gradient.png) rgba(0,0,0,0.2); height:575px; width:auto; text-align:center; padding-top:210px; position: relative; z-index: 9999;}
header #logo h1{background:url(../images/headerLogo.png) no-repeat center; width:515px;  height:190px ; margin:auto; text-align:center; display:block;}
header #logo h1,header #logo h2{font-size:11px; text-indent:-72308px;}

.video-wrap {
  position: absolute;
  top:0;
  left:0;
  height: 100%;
  width: 100%;
  z-index: 3333;
  background: #000;
}

.video-wrap video{
  width: 150%;
  min-height: 150%;
}


/*=============================
グローバルメニュー
=============================*/
#globalMenu{width:auto; margin:0 auto; color:#FFFFFF;
box-shadow:0 1px 6px #000000;
border-top:1px solid #000; 
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
background: rgb(36,37,40);
background: -moz-linear-gradient(top, rgba(36,37,40,1) 0%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(36,37,40,1)), color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(36,37,40,1) 0%,rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top, rgba(36,37,40,1) 0%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top, rgba(36,37,40,1) 0%,rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom, rgba(36,37,40,1) 0%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242528', endColorstr='#000000',GradientType=0 );
}

#globalMenu ul{width:980px; margin:0 auto;}

#globalMenu.fixed {
	position: fixed!important;
	top: 0;
	left: 0;
	width: 100%!important;
}

.lavaLampWithImage
{
  position: relative;
  height: 49px;
  width: 980px;
  padding: 15px;
  overflow: hidden;
  margin:0 auto;
}
.lavaLampWithImage li
{
  float: left;
  list-style: none;
}
.lavaLampWithImage li.back
{
  background: url("lava.gif") no-repeat right -30px;
  width: 9px;
  height: 50px;
  z-index: 8;
  position: absolute;
}
.lavaLampWithImage li.back .left
{
  background: url("lava.gif") no-repeat top left;
  height: 50px;
  margin-right: 9px; /* 7px is the width of the rounded shape */
}
.lavaLampWithImage li a
{
  font: bold 14px arial;
  text-decoration: none;
  color: #fff;
  outline: none;
  text-align: center;
  top: 7px;
  text-transform: uppercase;
  letter-spacing: 0;
  z-index: 10;
  display: block;
  float: left;
  height: 50px;
  position: relative;
  overflow: hidden;
  margin: auto 10px;

  
}
.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited
{
  border: none;
}

.lavaLampNoImage
{
  position: relative;
  height: 49px;
  width: 980px;
  padding: 0 10px;
  margin: 10px 0;
  overflow: hidden;
}
.lavaLampNoImage li
{
  float: left;
  list-style: none;
}
.lavaLampNoImage li.back
{
background:#000000;
  width: 9px;
  height: 50px;
  z-index: 8;
  position: absolute;
}
.lavaLampNoImage li a
{
  font: bold 14px arial;
  text-decoration: none;
  color: #fff;
  outline: none;
  text-align: center;
  top: 7px;
  text-transform: uppercase;
  letter-spacing: 0;
  z-index: 10;
  display: block;
  float: left;
  height: 30px;
  position: relative;
  overflow: hidden;
  margin: auto 10px;
  display:inline-block;
  padding:10px 0;
}
.lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited
{
  border: none;
}

.lavaLampBottomStyle
{
  position: relative;
  height: 49px;
  width: 421px;
  background-color: white;
  padding: 15px;
  margin: 10px 0;
  overflow: hidden;
  border: 1px solid gray;
}
.lavaLampBottomStyle li
{
  float: left;
  list-style: none;
}
.lavaLampBottomStyle li.back
{
  border-bottom: 5px solid blue;
  width: 9px;
  height: 30px;
  z-index: 8;
  position: absolute;
}
.lavaLampBottomStyle li a
{
  font: bold 14px arial;
  text-decoration: none;
  color: #000;
  outline: none;
  text-align: center;
  top: 7px;
  text-transform: uppercase;
  letter-spacing: 0;
  z-index: 10;
  display: block;
  float: left;
  height: 30px;
  position: relative;
  overflow: hidden;
  margin: auto 10px;
}
.lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited
{
  border: none;
}


/*===================
title
===================*/
h3.title{height:auto; margin:10px auto 10px auto; padding: 0; background-repeat:no-repeat; background-position:left; font-size:17px; font-family: 'Noto Serif JP', serif;}



/*===================
catch copy
===================*/
h4.catch{margin:10px auto; padding:12px; line-height: 1em; font-size:21px; font-family: 'M PLUS 1p', sans-serif; color:#fff; background: #0097e6; border-radius: 5px;}


.explain{line-height:18px; font-size:12px; padding:5px 15px;}
.section{margin:10px auto 65px auto; width:980px;}

/*****************************
about
*****************************/
#about{width:980px; margin:100px auto 65px auto;}
#imgAbout{background:url(../images/img_about.jpg) no-repeat center top; height:300px; margin:10px auto;}

/*****************************
feature
*****************************/
#featureBg{background:url(../images/bg_white.png); padding:35px 0;}
#feature{width:980px;}
#imgFeature{background:url(../images/img_feature.png) no-repeat center top; height:385px; margin:10px auto;}
#messegeFeature{ margin:30px auto 15px auto; height:120px;}
#messegeFeature p{font-family: 'Noto Sans JP', sans-serif; text-align: center;}
#messegeFeature b{display:block; text-align: center; font-size: 33px; font-family: 'Noto Serif JP', serif;}
/*****************************
api
*****************************/
#comingsoon{height:345px; background:url(../images/comingsoonApi.gif) no-repeat center; margin:20px auto;}
#api{padding-top:30px;}

/*****************************
DNS
*****************************/
#dnsBG{padding: 35px 0;}
#dnsBG img{max-width: 600px; margin: 20px auto; width: auto;}

/*****************************
price
*****************************/
#priceBg{background:url(../images/bg_grey.gif); padding:35px 0;}
#priceList table{width:950px; border:1px solid #999; box-shadow:0 0 5px #666666; margin:5px 0;}
#priceList th{border:1px solid #cccccc; background:#FFF; font-size:15px; background:#ffefef; padding:10px; font-weight:bold; letter-spacing:2px; text-shadow:-1px -1px 1px #FFFFFF;}
#priceList td{border:1px solid #cccccc; background:#FFF; font-size:15px; text-align:right; padding:6px; text-align: left;}
#priceNotes{padding:10px; font-size:12px; color:#333333; text-shadow:-1px -1px 1px #FFFFFF;}

/*****************************
contact
*****************************/
#contactBg{background:url(../images/bg_black.jpg) repeat #000; padding:35px 0; color:#FFFFFF;}
#contact{min-height:100px;}

#faq {margin-bottom:25px;}
#faq li{width:970px; padding:5px; margin:5px;border-bottom:1px dotted #666666; font-size:13px; letter-spacing:0px; line-height:14px;}
#faq li a{color:#ffefef; display:inline-block; padding:5px; text-decoration:none; }
#faq li a:hover{color:#CCCCCC;}

#faq .question{cursor:pointer;}
#faq .question:before{content:'\f059'; font-family:'Font Awesome 5 Free'; font-weight: 400; display: inline-block; width: 1.05em; margin-right: 2px;}
#faq .question:hover{}
#faq .answer{padding-bottom:10px;display:none;}
#faq .answer p{ background:#333333;padding:15px; font-size:12px; line-height:15px; border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px; -webkit-border-radius:5px; -o-border-radius:5px;}

#email{padding:30px 0; border-top:1px solid #333333; border-bottom:1px solid #999999;}

.button{display: block; color:#ffffff!important; text-decoration: none!important; font-family: 'M PLUS 1p', sans-serif; background:#0097e6 ; padding: 22px; border-radius: 3px; text-align: center;}
.button:hover{background:#00a8ff!important;}

.clear{clear:both; height:0; font-size:0;}
.tdftad{display:none!important;}
.pr_area{display:none!important; height:1px!important;}
iframe{display:none!important;}

/*****************************
footer
*****************************/
#footerContents{width:980px; margin:30px auto 60px auto;}

#footerContents p.corpinfo{}
#footerContents p.corpinfo .copyright{width:auto; height:15px; display:block; font-size: 12px; display: block; text-align: center; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

#footerLogo{background:url(../images/footerLogo.png) no-repeat center top; background-size:contain; margin:0 auto; width:280px; height:85px; padding:20px; font-size:10px; font-style:normal; text-indent:-802333px; display:block;}


/******************
page top
******************/
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 35px;
	filter: alpha(opacity=75);
	-moz-opacity:0.75;
	opacity:0.75;
}
#page-top a {
	cursor:pointer;
	text-decoration: none;
	color: #666;
	width: 50px;
	padding: 10px 0;
	text-align: center;
	display: block;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
#page-top a:hover {
	text-decoration: none;
	background: #999;
	color:#ffffff;
}



.center{text-align: center;}


#ninja-hp-inactive-footer,#ninja-hp-inactive{display:none!important;}