body {
	font-family: "Helvetica", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	font-size: 62.5%;
	background: #fff;
}

ul {
	font-size: 1.8rem;
}

li {
	display: block;
	margin-bottom: 0;
}

ul {
	display: block;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

::selection {
	background: #34b6e4;
	color: #fff;
}

.left {
	float: none;
}

/* 
//
// Navigation
//
*/
nav {
	background: #34b6e4;
	padding: 16px 0;
	position: fixed;
	z-index: 99;
}

nav a[class*=" icon-"] {
	font-size: 38px;
	float: left;
}

nav ul li {
	display: inline-block;
	width: auto;
	padding: 0;
	margin: 0 15px 15px 0;
	font-size: 14px;
	line-height: 14px;
}

.nav-left {
	float: left;
	width: 100%;
	height: 0;
	display: none; 
	margin-top: 15px;

	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.nav-left.open {
	display: block;
	height: 100%;
	max-height: 120px;

	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.toggle-menu {
  display: block;
  float: right;
  padding: 10px;
  cursor: pointer;
}

.toggle-menu > i {
  background-color: #fff;
  display: block;
  width: 35px;
  height: 4px;
}

.toggle-menu > i:first-child {
  margin-bottom: 5px;
}

.toggle-menu > i:last-child {
  margin-top: 5px;
}

/*
//
// Hero area
//
*/
#who {
	background: #34b6e4;
	width: 100%;
	height: 100%;
	position: relative;
	margin: 0;
}

h2.hear {
	display: none;
}

h2.hearmobile {
	display: block;
}

.fourohfour {
	background: #34b6e4;
	height: 100%;
	width: 100%;
	padding: 50px 0 0 50px;
}

/*
//
// Contents area
//
*/
#service .mission,
#about .mission,
#news .mission,
#access .mission,
#contact .mission {
	position: relative;
	top: -1px;
}

.mission {
	padding-top: 30px;
	margin-bottom: 40px;
}

#who .mission {
	margin-top: 70px;
}

.icon-before,
.icon-after {
	font-size: 14px;
	display: inline-block;
}

.icon-before span:first-child,
.icon-after span:first-child {
	background: #fff;
	border-radius: 50%;
	display: inline-block;
	border: 1px solid;
	width: 60px;
	height: 60px;
}

.icon-before span:nth-child(2) {
	position: relative;
	left: -56px;
	bottom: 25px;
}

.icon-after span:nth-child(2) {
	position: relative;
	left: -51px;
	bottom: 25px;
}

.icon-before span:last-child,
.icon-after span:last-child {
	position: relative;
	left: -35px;
	bottom: 25px;
}

.inline-tabel ul li.list-style ol {
	padding: 20px 0 0 20px;
}

.inline-tabel ul li.list-style ol li {
	display: list-item;
	list-style-type: disc;
	padding: 5px 0;
}

.inline-tabel ul li.list-style ol.recruit li {
	display: list-item;
	list-style-type: disc;
	padding: 5px 0;
  line-height: 125%;
}


.inline-tabel ul li strong {
	display: block;
	width: 100%;
	line-height: 140%
}

.inline-tabel ul li ol {
	padding: 20px 0 0;
}

.inline-tabel ul li ol li ol li {
	display: block;
}

.inline-tabel ul li ol p {
	line-height: 180%;
}

ul.capabilites {
	margin-bottom: 40px;
}

ul.capabilites li {
	line-height: 200%;
	color: #707990;
}

.footermark {
	position: relative;
	background-size: 50px 50px;
	width: 50px;
	height: 50px;
	display: inline-block;
	margin-left: 20px;
	float: right;
}

#content {
	background: #fff;
}

.wordmark,
.wordmarktwo {
	position: relative;
	display: block;
	width: 174px;
	height: 40px;
}

.wordmark {
	background-size: 100%;
}

.wordmarktwo {
	margin: 0 0 60px;
	background-size: 85%;
}

.footer{
	padding: 80px 0 20px;
	width: 100%;
	position: fixed;
	bottom: 0;
	z-index: -1;
	height: auto;
	background: #f0f2f4;
}

.footer p{
	font-size: 1.8rem;
	position: relative;
	color: #707990;
	display: inline-block;
	top: -8px;
}

ul:after,
ul:before {
	content: "";
	display: table;
}

ul:after {
	clear: both;
}

ul.social {
	float: left;
	margin-bottom: 30px;
}

ul.social li {
	margin: 0;
	display: block;
	padding: 0 26px 0 0;
	height: auto;
	float: left;
	font-weight: 400;
	font-size: 1.8rem;
}

a.link {
	-webkit-transition: all 300ms cubic-bezier(0.175,.885,.32,1.275) 0;
	-moz-transition: all 300ms cubic-bezier(0.175,.885,.32,1.275) 0;
	-o-transition: all 300ms cubic-bezier(0.175,.885,.32,1.275) 0;
	transition: all 300ms cubic-bezier(0.175,.885,.32,1.275) 0;
	position: relative;
	text-decoration: none;
	color: #fff;
}

.mission a.link,
.capabilites a.link {
	color: #34b6e4;
}

ul.social a {
	-webkit-transition: all 300ms cubic-bezier(0.175,.885,.32,1.275) 0;
	-moz-transition: all 300ms cubic-bezier(0.175,.885,.32,1.275) 0;
	-o-transition: all 300ms cubic-bezier(0.175,.885,.32,1.275) 0;
	transition: all 300ms cubic-bezier(0.175,.885,.32,1.275) 0;
	position: relative;
	text-decoration: none;
	color: #707990
}

a.link:hover,
li.active a.link,
ul.social a:hover {
	color: #101F46;
}

a.link span,
ul.social a span {
	-webkit-transition: all 300ms cubic-bezier(0.175,.885,.32,1.275) 0;
	-moz-transition: all 300ms cubic-bezier(0.175,.885,.32,1.275) 0s;
	-o-transition: all 300ms cubic-bezier(0.175,.885,.32,1.275) 0;
	transition: all 300ms cubic-bezier(0.175,.885,.32,1.275) 0;
	overflow: hidden;
	position: absolute;
	left: 0;
	bottom: -5px;
	display: block;
	width: 0;
	height: 2px!important;
	max-height: 2px!important;
	background: #101F46;
}

a.link:hover span,
li.active a.link span,
ul.social a:hover span {
	width:100%;
}

.rule,
.yrule {
	display: block;
	margin: 0 0 22px;
}

div.clear {
	clear: both;
}

.divider {
	margin: 0;
	height: 1px;
	width: 100%;
	background: #ccc;
}

.yrule {
	background: #34b6e4;
	width:30px;
	height:4px;
	margin-top: 70px;
}

.project-wrapper {
	margin-bottom: 20px;
  width: 100%;
  display: inline-block;
}

.recruit-table {
  background-color: #f0fbff;
  padding: 20px;
  color: #0b6080;
}
.recruit-dt {
  width: 30%;
  font-weight: bold;
  display: inline-block;
  vertical-align: top;
  margin-top: 10px;
}
.recruit-dd {
  width: 65%;
  display: inline-block;
  margin: 10px 0 0 0;
  vertical-align: top;
  line-height: 125%;
}

.display-table {
	display: table;
}
.display-table-cell {
	display: table-cell;
	vertical-align: middle;
}
@media only screen and (max-width: 414px) {
	.display-table {
		display: block;
	}
	.display-table-cell {
		display: block;
	}
	.bg-usecase img {
		max-width: 200px;
	}
	img.brutus, img.ytb, img.topics {
		margin: 50px 0;
	}
	.bg-usecase img.muji,
	.bg-usecase img.sic {
		max-width: 200px;
		margin: 50px 0;
	}
	.divise-hiding {
		display: none;
	}
}
.display-table-cell span {
	display: block;
}

.sic-list a {
	line-height: 1.8
}

.bg-usecase a {
	text-decoration: none;
	display: block;
}
.bg-usecase a:hover {
	cursor: pointer;
}
.bg-usecase span {
	display: block;
	font-size: 14px;
  margin-top: 4px;
  text-align: center;
}
.bg-usecase img {
	min-width: 100px;
}
@media only screen and (min-width: 414px) {
	.bg-usecase img.muji,
	.bg-usecase img.sic {
		max-width: 80px;
		margin-right: 20px;
	}
}

.fourohfour a,
a.email-link {
	text-decoration: none;
	color: #101F46;
	-moz-transition: color 200ms;
	-o-transition: color 200ms;
	-webkit-transition: color 200ms;
	transition: color 200ms;
}

.fourohfour a:hover,
a.email-link:hover {
	color: #707990;
}

.fourohfour a {
	color: #fff;
}

.icon-fade {
	opacity: 0;
	-webkit-animation: fadeIn ease-in 1;
	-moz-animation: fadeIn ease-in 1;
	animation: fadeIn ease-in 1;

	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;

	webkit-animation-duration: .5s;
	-moz-animation-duration: .5s;
	animation-duration: .5s;
}

#news ul li {
	
	padding: 10px 20px 10px 0;
}

#news ul li a {
	font-size: 1.8rem;
	line-height: 1.5em;
	text-decoration: none;
}

/*
//
// Vertical timeline
//
*/
.cbp_tmtimeline {
	margin: 30px 0 0 0;
	padding: 0;
	list-style: none;
	position: relative;
}

.cbp_tmtimeline:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 30px;
	width: 5px;
	background: #afdcf8;
	left: 14%;
	margin-left: -10px;
}

.cbp_tmtimeline > li {
	position: relative;
}

.cbp_tmtimeline > li .cbp_tmicon {
	width: 10px;
	height: 10px;
	font-size: 1.4em;
	line-height: 40px;
	position: absolute;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 8px #afdcf8;
	text-align: center;
	left: 14%;
	top: 0;
	margin: 0 0 0 -12px;
}

.cbp_tmtimeline > li .cbp_tmtime {
	display: block;
	width: 25%;
	padding-right: 100px;
	position: absolute;
}

.cbp_tmtimeline > li .cbp_tmtime span {
	display: block;
	font-size: 14px;
	text-align: left;
}

.cbp_tmtimeline > li .cbp_tmlabel {
	margin: 0 0 15px 18%;
	padding: 10px 0 10px 2em;
	font-size: 1.2em;
	font-weight: 300;
	line-height: 1.4;
	position: relative;
	border-radius: 5px;
	top: -18px;
}

.cbp_tmtimeline > li .cbp_tmlabel h2 {
	margin-top: 0px;
	padding: 0 0 10px 0;
	border-bottom: 1px solid rgba(255,255,255,0.4);
}

.cbp_tmtimeline > li .cbp_tmlabel p {
	margin: 0;
	color: #777;
}

.cbp_tmtimeline > li .cbp_tmlabel span {
	color: #000;
	font-size: 14px;
	font-style: oblique;
}


.cbp_tmtimeline > li .cbp_tmlabel:before {
	color: #34b6e4;
	content: "\2026";
	right: 100%;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-right-color: #3594cb;
	border-width: 10px;
	top: 10px;
}

/*
//
// @media
//
*/
@media only screen {
	#preloader {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		z-index: 10000;
		height: 100%;
		width: 100%;
	}
	.spacer {
		height: 360px;
		visibility: hidden;
	}
	.wordmark {
		position: relative;
		display: block;
		margin: 10px 0 80px;
		background-size: 174px 40px;
		width: 174px;
		height: 40px
	}
	.icon {
		color: #34b6e4;
		font-size: 90px;
		margin: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		background-repeat: no-repeat;
		margin-left: -130px;
		margin-top: -45px;
	}

	@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}
	@-moz-keyframes fadeIn{from{opacity:0}to{opacity:1}}
	@keyframes fadeIn{from{opacity:0}to{opacity:1}}

	.scaling {
	    float: left;
	    -webkit-animation-name: scalex;
	    -webkit-animation-duration:1.4s;
	    -webkit-animation-iteration-count:infinite;
	    -webkit-animation-timing-function:ease-out;
	    -moz-animation-name: scale;
	    -moz-animation-duration:1.4s;
	    -moz-animation-iteration-count:infinite;
	    -moz-animation-timing-function:ease-out;
	}
    
    @-webkit-keyframes scalex{
        from {-webkit-transform: scale(0.7);}
        60% {-webkit-transform: scale(0.9);}
        to {-webkit-transform: scale(0.7);}    
    }
        
    @-moz-keyframes scale{
        from {-moz-transform: scale(0.7);}
        60% {-moz-transform: scale(0.9);}
        to {-moz-transform: scale(0.7);}    
    }

	h1,
	h2,
	h3,
	h4,
	p,
	ul {
		color: #101F46;
		font-weight: 400;
	}

	h1 {
		font-size: 3.6rem;
		margin-bottom: 100px;
		line-height: 100%;
	}

	h2 {
		font-size: 3rem;
		margin-bottom: 20px;
		line-height: 160%;
	}

	h3 {
		font-size: 2.4rem;
		margin-bottom: 30px;
	}

	h4 {
		font-size: 2rem;
	}

	p {
		font-size: 1.6rem;
		line-height: 140%;
	}

	.explanation-large {
		display: none;
	}

	.explanation-small {
		display: block;
	}
  
  .map-small {
    display: none;
  }

	.mobilemark {
		display: block;
		position: relative;
		margin: 0 auto;
		z-index: 10;
		background-size: 100px 100px;
		width: 100px;
		height: 100px;
		top: 50px;
	}

	.mark {
		margin-top: -30px;
		margin-bottom: 150px;
		background-size: 60px 60px;
		width: 60px;
		height: 60px;
		display: none;
	}

	ul.social li {
		margin: 0;
		display: inline-block;
	}

	.footer ul {
		padding-top: 15px;
		color: #707990;
	}

	#who h1,
	#vision h1,
	#service h1,
	#about h1,
	#project h1,
	#news h1,
	#access h1,
	#recruit h1,
	#contact h1 {
		font-weight: 600;
		line-height: 1.6em;
		margin-top: 0;
		margin-bottom: 0;
	}

	#vision h1,
	#service h1,
	#about h1,
	#project h1,
	#news h1,
	#access h1,
	#recruit h1,
	#contact h1 {
		font-size: 3rem;
	}

	#service,
	#access {
		overflow: auto;
	}

	#who h2 {
		color: #fff;
	}

	#who p {
		color: #fff;
		line-height: 1.8em;
		margin: 20px 0 10px;
	}

	#who .yrule {
		background: #fff;
		margin: 0 0 22px;
	}

	.overview h1 {
		color: #fff;
		font-size: 3rem;
	}

	#what {
		padding-top: 0;
		margin-top: 0;
	}

	ul.social li {
		margin-bottom: 30px;
		padding: 0 200px 0 0;
	}

	.email {
		margin: 80px 0 60px;
	}

	.email i {
		font-size: 72px;
		margin-bottom: 40px;
	}

	.rule {
		background: #fff;
		margin-top: 90px;
		width: 30px;
		height: 4px;
	}

	#hero {
		background-size: cover;
		height: 90%;
	}

	.principals {
		margin-top: 60px;
	}
}

@media only screen and (min-width: 59.375em) {
	nav ul {
		margin-top: 0;
	}

	nav ul li {
		display: inline;
		line-height: 38px;
		margin: 0 0 0 22px;
	}

	.toggle-menu {
		display: none;
	}

	.nav-left {
		height: auto;
		float: right;
		width: auto;
		display: block;
		margin: 0;
	}
}

@media only screen and (min-width: 48.000em) {

	#who p {
		font-size: 1.6rem;
	}

	.explanation-large {
		display: block;
		margin-top: 90px;
	}

	.explanation-small {
		display: none;
	}
}

@media only screen and (min-width: 40.063em) {

	.wordmark {
		margin: 120px 0 0;
		background-size: 100%;
	}

	ul.social li {
		margin-bottom: 0;
	}

	.footer p {
		top: -20px;
	}

	.principals {
		margin-top: 100px;
	}

	h2.hear {
		display: block;
	}

	h2.hearmobile {
		display: none;
	}

	.footer {
		padding: 50px 0 30px;
	}

	#yellow {
		display: none;
	}

	.cap {
		margin-top: 100px;
	}

	.footermark {
		float: none;
	}

	h1 {
		font-size: 5rem;
		margin-bottom: 100px;
	}

	.spacer {
		height: 144px;
		width: 100%;
		visibility: hidden;
	}

	#hero {
		background-size: cover;
		height: 90%;
	}

	ul.social li {
		padding: 0 30px 0 0;
	}

	.rule {
		margin-top: 148px;
	}

	.footer p {
		padding: 0;
		margin: 0;
		color: #707990;
	}
}

@media only screen and (max-width: 33.750em) and (min-width: 26.250em) {
  .map-large {
    display: none;
  }
  
  .map-small {
    display: block;
  }
  
	.cbp_tmtimeline:before {
		left: 20%;
	}

	.cbp_tmtimeline > li .cbp_tmicon {
		left: 20%;
	}

	.cbp_tmtimeline > li .cbp_tmlabel:before {
		display: none;
	}
}

@media only screen and (max-width: 26.250em) {
	.overview h1 {
		font-size: 2rem;
	}
	#vision h1,
	#service h1,
	#about h1,
	#news h1,
	#access h1,
	#contact h1 {
		font-size: 2rem;
	}

	h2 {
		font-size: 2rem;
	}

  .map-large {
    display: none;
  }
  
  .map-small {
    display: block;
  }
  
	.cbp_tmtimeline:before {
		left: 25%;
	}

	.cbp_tmtimeline > li .cbp_tmicon {
		left: 25%;
	}

	.cbp_tmtimeline > li .cbp_tmlabel:before {
		display: none;
	}
}

@media only screen and (min-width: 64.063em) {
	#hero {
		position: relative;
		z-index: 1;
		background-size: cover;
		height: 90%;
		min-height: 500px;
	}

	#yellow {
		background: #34b6e4;
		height: 100%;
		width: 100%;
		z-index: 4;
		opacity: 0;
		display: block;
	}
	
	#who {
		height: 100%;
	}

	.left {
		float: left;
	}
	
	.mobilemark {
		display: none;
	}
	
	.rule {
		margin-top: 154px;
	}
	
	.mark {
		position: relative;
		display: block;
		background-size: 80px 80px;
		width: 80px;
		height: 80px;
		z-index: 80;
		margin-top: -40px;
		margin-bottom: 0;

		-moz-transition: opacity 200ms;
		-o-transition: opacity 200ms;
		-webkit-transition: opacity 200ms;
		transition: opacity 200ms;
	}
	
	h1 {
		font-size: 6rem;
		line-height: 100%;
		margin: 0 0 10px;
		padding: 0;
		color: #101F46;
		font-weight: 400;
	}
	
	h2 {
		line-height: 130%;
		font-size: 3rem;
		margin: 0 0 40px;
		padding: 0;
		color: #101F46;
	}
	
	h3 {
		font-size: 2.8rem;
		margin: 0 0 20px;
		padding: 0;
		line-height: 150%;
		color: #101F46;
	}
	
	h4 {
		font-size: 2.2rem;
		margin: 0 0 10px;
		padding: 0;
		line-height: 150%;
		color: #101F46;
	}
	
	p {
		font-size: 1.6rem;
		line-height: 150%;
		margin: 0;
		padding: 0;
	}
	
	.email {
		margin: 100px 0 80px;
	}
	
	a.email-link {
		text-decoration: none;
		color: #707990;

		-moz-transition: color 200ms;
		-o-transition: color 200ms;
		-webkit-transition: color 200ms;
		transition: color 200ms;
	}
	
	a.email-link:hover {
		color: #34b6e4;
	}
	
	.cap {
		margin-top: 0;
	}
}