@font-face {
	font-family: 'icofont';
	src: local('icofont'),
	url('fonts/icofont.woff') format('woff'),
	url('fonts/icofont.woff2')  format('woff2');
}

html {
  font-size: 62.5%;
}

body {
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #24242d;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.025rem;
  padding-top: 8rem;
}

body.dev {
    background: #ccc;
    min-height: 1000rem;
}

nav,
header,
section,
footer
{
  position: relative;
}

header,
#home,
#concept,
#feature,
#feature2,
#feature3,
#feature4,
#feature5,
#pricing,
#graph,
#cost,
#case,
#faq,
#contact,
#symbol,
[data-bg-src],
[data-bg-src-2x]
{
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

header,
section
{
  overflow: hidden
}

header nav {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
}

nav {
  width: 100%
}

nav.transparent {
  background: transparent;
}

a,
button
{
  cursor: pointer;
  transition: all 0.25s;
}
a:hover,
button:hover
{
  text-decoration: none;
}
a:active,
a:focus,
button:active,
button:focus
{
  text-decoration: none;
  outline: none
}

button {
  border: none;
  outline: none !important;
}

input,
textarea
{
  border: 0;
  outline: none;
  background: transparent;
  color: #28a7e9;
  resize: none;
}

label {
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6
{
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  margin: 0;
  font-weight: 700;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
}

bold
{
  font-weight: 700;
}

strong
{
  font-family: 'Roboto';
  font-weight: 900;
}

span-block
{
  display: inline-block;
}

.container {
  position: relative;
}

/* Loading */

/* Back to top button */
#page-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: none;
}

#page-top i {
  font-size: 2.5rem;
}

#page-top a {
  display: block;
  background: #808591;
  color: #fff;
  width: 3rem;
  padding: 1rem 0 .5rem 0;
  text-align: center;
  text-decoration: none;
  border-radius: 1.5rem;
  height: 4.5rem;
}

#page-top a:hover {
  background: #28a7e9;
  text-decoration: none;
}

#page-top a:active {
  background: #808591;
  text-decoration: none;
}

/* Header */
#header {
  height: 8rem;
  transition: all 0.5s;
  z-index: 997;
  padding: 2rem 0;
  background: #fff;
  box-shadow: 0 0 .5rem 0 rgba(36, 36, 45, .5);
  margin-left: -15rem;
}

#header .logo img {
  padding: 0;
  margin: 0;
  max-height: 4rem;
  float: left;
}

/* Navigation Menu */
/* Desktop Navigation */
.nav-menu {
  margin-left: 15rem;
  padding: 0;
  list-style: none;
}

.nav-menu ul {
  float: right;
}

.nav-menu > ul > li {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}

.nav-menu a {
  display: block;
  position: relative;
  color: #24242d;
  padding: 1rem .725rem 0 .725rem;
  transition: 0.3s;
  font-size: 1.4rem;
  font-weight: 700;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
}

.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
  color: #28a7e9;
  text-decoration: none;
}

/* Mobile Navigation */
.mobile-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 9999;
  overflow-y: auto;
  left: -26rem;
  width: 26rem;
  padding-top: 1.8rem;
  background: #fff;
  transition: 0.4s;
}

.mobile-nav * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav a {
  display: block;
  position: relative;
  color: #24242d;
  padding: 1rem 2rem;
  font-weight: 700;
}

.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a {
  color: #28a7e9;
  text-decoration: none;
}

.mobile-nav-toggle {
  position: fixed;
  right: 1.5rem;
  top: 2.25rem;
  z-index: 9998;
  border: 0;
  background: none;
  font-size: 2.4rem;
  transition: all 0.4s;
  outline: none !important;
  line-height: 1;
  cursor: pointer;
  text-align: right;
}

.mobile-nav-toggle i {
  color: #24242d;
  vertical-align: middle;
}

.mobile-nav-overly {
  width: 100%;
  height: 100%;
  z-index: 9997;
  top: 0;
  left: 0;
  position: fixed;
  background: rgba(36, 36, 45, 0.9);
  overflow: hidden;
  display: none;
}

.mobile-nav-active {
  overflow: hidden;
}

.mobile-nav-active .mobile-nav {
  left: 0;
}

.mobile-nav-active .mobile-nav-toggle i {
  color: #fff;
}

/* concept */
#concept h6 {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  margin-top: 0;
  color: #808591;
}

#concept h1 {
    font-size: 4rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    margin-top: 0;
		color: #d80c18;
}

#concept h2 {
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.25;
    color: #24242d;
		vertical-align: middle;
}

#concept h3 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
}

#concept p {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

#concept i {
  font-size: 9rem;
  text-align: center;
  color: #28a7e9;
}

#concept  img {
	  height: auto;
		width: 75%;
}

/* service */
#service h6,
#service2 h6 {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  margin-top: 0;
  color: #808591;
}

#service h1,
#service2 h1  {
    font-size: 4rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    margin-top: 0;
		color: #d80c18;
}

#service h2,
#service2 h2 {
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.25;
    color: #24242d;
		vertical-align: middle;
}

#service h3,
#service2 h3 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
}

#service p,
#service2 p {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

#service i
#service2 i, {
  font-size: 9rem;
  text-align: center;
  color: #28a7e9;
}

#service img,
#service2 img {
	  height: auto;
		width: 40%;
}

/* field */
#field .word {
  display: inline-block;
}

#field .price {
  font-size: 150%;
  text-align: right;
}

#field .price-head {
  text-align: center;
}

#field small {
  font-size: 62.5%;
	vertical-align: 7.5%;
}

#field .bold {
  font-weight: 700;
}

#field th {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  vertical-align: middle;
  text-align: center;
}

#field td {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  vertical-align: text-top;
}

#field .badge {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.25;
  vertical-align: -10%;
  color: #fff;
  background-color: #d80c18;
	padding-top: .625rem;
  margin-bottom: 1rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

#field h3 {
  font-size: 3rem;
  line-height: 1.25;
}

#field p {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 0;
}

#field li {
  list-style: none;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1.5;
	margin-left: -4rem;
}

#field .footmark1 {
  padding-left: 1.3rem;
}

#field .footmark1::before {
	font-family: 'myfont';
	content: '\e91d';
	margin-left: -1.3rem;
}

#field .footmark2 {
  padding-left: 1.3rem;
}

#language .footmark2::before {
	font-family: 'myfont';
	content: '\e91e';
	margin-left: -1.3rem;
}

#field sup::before {
	font-family: 'myfont';
	content: '\e91e';
	margin-left: -7.5%;
}

#field span.w400 {
	font-weight: 400;
}

#field span-block {
  display: inline-block;
}

#field td.width-set {
  width: 30%;
}

/* language */
#language .word {
  display: inline-block;
}

#language .price {
  font-size: 150%;
  text-align: right;
}

#language .price-head {
  text-align: center;
}

#language small {
  font-size: 62.5%;
	vertical-align: 7.5%;
}

#language .bold {
  font-weight: 700;
}

#language th {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  vertical-align: middle;
  text-align: center;
}

#language td {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  vertical-align: text-top;
}

#language .badge {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.25;
  vertical-align: -10%;
  color: #fff;
  background-color: #d80c18;
	padding-top: .625rem;
  margin-bottom: 1rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

#language h3 {
  font-size: 3rem;
  line-height: 1.25;
}

#language p {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 0;
}

#language li {
  list-style: none;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1.5;
	margin-left: -4rem;
}

#language .footmark1 {
  padding-left: 1.3rem;
}

#language .footmark1::before {
	font-family: 'myfont';
	content: '\e91d';
	margin-left: -1.3rem;
}

#language .footmark2 {
  padding-left: 1.3rem;
}

#language .footmark2::before {
	font-family: 'myfont';
	content: '\e91e';
	margin-left: -1.3rem;
}

#language sup::before {
	font-family: 'myfont';
	content: '\e91e';
	margin-left: -7.5%;
}

#language span.w400 {
	font-weight: 400;
}

#language span-block {
  display: inline-block;
}

#language td.width-set {
  width: 30%;
}

/* group */
#group h6 {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  margin-top: 0;
  color: #808591;
}

#group h1 {
    font-size: 4rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    margin-top: 0;
		color: #d80c18;
}

#group h2 {
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.25;
    color: #24242d;
		vertical-align: middle;
}

#group h3 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
}

#group p {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

#group i {
  font-size: 9rem;
  text-align: center;
  color: #28a7e9;
}

#group img {
	  height: auto;
		width: 50%;
}

#group .badge {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.25;
  vertical-align: -10%;
  color: #fff;
  background-color: #d80c18;
	padding-top: .625rem;
  margin-bottom: 1rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

#group span  {
  font-weight: 500;
  color: #d80c18;
}

/* network */
#network h6 {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  margin-top: 0;
  color: #808591;
}

#network h1 {
    font-size: 4rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    margin-top: 0;
		color: #d80c18;
}

#network h2 {
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.25;
    color: #24242d;
		vertical-align: middle;
}

#network h3 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
}

#network p {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

#network i {
  font-size: 9rem;
  text-align: center;
  color: #28a7e9;
}

#network img {
	  height: auto;
		width: 50%;
}

/* about */
#about h6 {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  margin-top: 0;
  color: #808591;
}

#about h1 {
    font-size: 4rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    margin-top: 0;
		color: #d80c18;
}

#about h2 {
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.25;
    color: #24242d;
		vertical-align: middle;
}

#about .word {
  display: inline-block;
}

#about .price {
  font-size: 150%;
  text-align: right;
}

#about .price-head {
  text-align: center;
}

#about small {
  font-size: 62.5%;
	vertical-align: 7.5%;
}

#about .bold {
  font-weight: 700;
}

#about th {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  vertical-align: middle;
  text-align: center;
}

#about td {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  vertical-align: text-top;
}

#about .badge {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.25;
  vertical-align: -10%;
  color: #fff;
  background-color: #d80c18;
	padding-top: .625rem;
  margin-bottom: 1rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

#about h3 {
  font-size: 3rem;
  line-height: 1.25;
}

#about p {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 0;
}

#about li {
  list-style: none;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1.5;
	margin-left: -4rem;
}

#about .footmark1 {
  padding-left: 1.3rem;
}

#about .footmark1::before {
	font-family: 'myfont';
	content: '\e91d';
	margin-left: -1.3rem;
}

#about .footmark2 {
  padding-left: 1.3rem;
}

#about .footmark2::before {
	font-family: 'myfont';
	content: '\e91e';
	margin-left: -1.3rem;
}

#about sup::before {
	font-family: 'myfont';
	content: '\e91e';
	margin-left: -7.5%;
}

#about span.w400 {
	font-weight: 400;
}

#about span-block {
  display: inline-block;
}

#about td.width-set {
  width: 30%;
}

#about .iframe-wrap {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
}

#about .iframe-wrap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

/* Footer */
#contents i {
  vertical-align: middle;
	font-size: 2.5rem;
}

footer img {
  vertical-align: middle;
  height: 1.75rem;
}

footer #button {
	position: relative;
	width: 3rem;
	height: 3rem;
	margin: 0 auto;
	padding: 0;
	cursor: pointer;
	-webkit-transition: all 1s ease;
	        transition: all 1s ease;
	text-align: center;
	color: #fff;
	border-radius: .3rem .3rem 0 0;
	background: #d80c18;
}

footer #button:hover {
	position: relative;
	width: 3rem;
	height: 3rem;
	-webkit-transition: all 1s ease;
	        transition: all 1s ease;
}

footer {
	position: fixed;
	z-index: 999;
	bottom: 0;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 3rem;
	margin: 0 auto;
	-webkit-transition: all 1s ease;
	        transition: all 1s ease;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    z-index: 2;
}

footer:hover {
	height: 15rem;
	-webkit-transition: all 1s ease;
	        transition: all 1s ease;
}
footer #container {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #d80c18;
}

footer #contents {
	margin: 0 auto;
	padding-top: 1.5rem;
	color: #fff;
}

footer #contents p {
  font-size: 1.5rem;
  font-weight: 400;
  color: #fff;
  line-height: 1.5;
  vertical-align: middle;
  margin-top: .5rem
}

/* パララックス */
#parallax .pax-img {
  width: 100%;
  min-height: 15rem;
  overflow: hidden;
}

#parallax img{
	width: 100%;
}
/* パララックスEND */

/* For Mobile */
@media screen and (min-width: 0px) {
#concept h1,
#service h1,
#service2 h1,
#solution h1,
#network h1,
#about h1,
#contact h1
  {
    font-size: 3rem;
  }

#concept h2,
#service h2,
#service2 h2,
#solution h2,
#network h2,
#about h2
  {
    font-size: 2.5rem;
  }

#service img,
#service2 img {
		height: auto;
		width: 50%;
	}

#about .iframe-wrap {
		height: 0;
		overflow: hidden;
		padding-bottom: 75%;
		position: relative;
	}

.nav-menu {
  margin-left: 0;
}

#header {
  margin-left: 0;
}

#parallax .pax-img {
	height: 15rem;
}
}

/* For Tablet */
@media screen and (min-width: 576px){
#concept h1,
#service h1,
#service2 h1,
#solution h1,
#network h1,
#about h1
	{
	  font-size: 4rem;
	}

#concept h2,
#service h2,
#service2 h2,
#solution h2,
#network h2,
#about h2
	{
	  font-size: 3rem;
	}

#service img,
#service2 img {
		height: auto;
		width: 40%;
	}

#parallax .pax-img {
	  height: 20rem;
	}
}

/* For PC */
@media screen and (min-width: 768px){
  a[href^="tel:"]{
    pointer-events: none;
  }

#service img,
#service2 img {
		height: auto;
		width: 30%;
	}

#parallax .pax-img {
	  height: 30rem;
	}
}