/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	margin: 1em 0;
}

/* fin Reset */

html{
	background-color: #ECEFF1;
}
body {
	background-color: #fff;
	color: #424242; /* Gray 800 */
	font: 16px/1.7 "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", sans-serif;
	min-width: 900px;
}
a {
	color: #0277BD;/* Light Blue 800 */
	text-decoration: none;
}
a:hover {
	color: #0288D1;/* Light Blue 700 */
}
h2{
	font-size: 1.6em;
	margin: 2em 0 1em;
}
h3{
	font-size: 1.4em;
	margin-top: 1em;
}
h4{
	color: #455A64; /* Blue Gray 700 */
	font-size: 1em;
	margin: 6px 0;
}
p{
	margin: 0 0 1.2em;
}

section{
	margin: 0 0 80px;
}
small{
	font-size: 0.8em;
}


/* Grid */
.grid,.grid-8 {
	margin: auto;
	position: relative;
}
.grid:after,.grid-8:after{
	clear: left;
	content: "";
	display: block;
}
.grid{
	width: 900px;
}
.grid-8 {
	width: 720px;
}
.col-2{
	float: left;
	overflow: hidden;
	width: 44%;
}
.col-2:nth-of-type(odd){
	margin-right: 11%;
}
.col-2:after{
	clear: left;
}
.col-6{
	width: 15%;
	float: left;
	margin-right: 1%
}
.col-6:after{
	float: left;
}
.col-4{
	float: left;
	margin-right: 1%;
	width: 23%;
}
@media (max-width: 600px) {
  body{
	  width: auto;
	  min-width: 320px;
  }
  header{
	  width: auto;
  }
  .grid {
    width: auto;
    margin: 2%;
    padding: 0;
  }
  
  .col-2{
	  width: 100%;
	  border-bottom: 1px solid #dfdfdf;
  }
  .col-2:last-child{
	  border-bottom: 0 none;
  }
  .col-2:nth-of-type(odd) {
	  margin-right: 0;
	}
	
	.col-6{
		width: 33%;
		margin-right: 0;
	}
	.col-4{
		width: 49.6%;
		margin-right: 0;
	}
}

/* Header contents */
header{
	padding: 20px 0 0;
	position: relative;
}
header>div {
	margin: auto;
	width: 900px;
}
nav {
	float: right;
	position: relative;
	top: 6px;
}
nav>ul>li{
	float: left;
	padding: 0 30px;
}
.logo {
	color: #000;
}

/* Footer contents */
footer{
	background-color: #ECEFF1;
	color: #757575; /* Gray 600 */
	font-size: .8em;
	padding: 60px 0 0;
}
.f-link{
	margin-bottom: 2em;
}
footer a{
	color: #9e9e9e; /* Gray 500 */
}
footer a:hover{
	color: #616161; /* Gray 500 */
	text-decoration: underline;
}
footer h4{
	font-weight: 600;
	margin-bottom: 1em;
}
#copyright{
	text-align: right;
	padding: 0;
	margin: 0;
}

/* Useful Classes */
.btn {
	border-radius: 2px;
	display: inline-block;
	margin: .4em 0;
	padding: .6em 1.4em;
}
.btn:hover{
	color: #424242;
}
.btn.sm{
	padding: 0 1em;
}

.btn.bluegray{
	background-color: #CFD8DC;/* BlueGray 100 */
	color: #424242;
}
.btn.bluegray:hover{
	background-color: #bfc9ce;
}
.btn.detail{
	border:1px solid #0091EA;
	color: #0091EA;
	font-size: 1.08em;
	margin-right: 4px;
}
.btn.detail:hover{
	background: #0288D1;
	color: #fff;
}
.graybg{
	background-color: #ECEFF1;/* BlueGray 50 */
}
.textcenter{
	text-align: center;
}

/* for support and FAQ */
.sp-content h4{
	border-bottom: 1px solid #E0E0E0;
	display: inline-block;
}
.sp-content{
	margin: 60px 0;
}
.sp-content p{
	font-size: 14px;
}
.faq dt{
	font-size: 1.3em;
}
.faq dd{
	color: #616161;
	font-size: 14px;
	padding-bottom: 3em;
}


/* for about */
.history-table th,.history-table td{
	line-height: 1.4;
	padding: 5px;
	text-align: left;
}
.history-table th{
	font-size: 0.8em;
	padding-right: 2em;
	text-align: right;
	vertical-align: bottom;
}
.history-table .year{
	border-bottom: 1px solid #e0e0e0;
	color: #BDBDBD;
	padding: 1em 0 0;
	text-align: left;
}
#hero-about{
	height: 230px;
	background: url(img/hero-about.jpg) scroll no-repeat left center;
	background-size: 100% auto;
}
.aboutus dt{
	font-weight: 600;
}
.aboutus dd{
	margin: 0 0 2em;
}


/* for works */
#works-app{
	margin-bottom: 80px;
}
.works-app p{
	font-size: 14px;
	margin-bottom: 1.4em;
}
.wk-app{
	clear: left;
	height: 300px;
	margin-bottom: 80px;
}
.wk-app .app-image{
	background: #ddd;
	float: left;
	height: 300px;
	width: 300px;
}
.wk-app .app-description{
	float: left;
	min-height: 300px;
	margin-left: 40px;
	width: 500px;
}