@charset "utf-8";


@media only screen and (min-width : 320px) and (max-width : 767px) {

.gridContainer { line-height:1.4;}

footer .content,
section .content { width:320px; margin:0 auto; padding:0; }

 
section { padding:50px 0 80px;}

#header nav a { padding:15px 1.2%;}


/* intro */
#intro h2 { font-size:4.5em;}
#intro .explain { font-size:0.9em; letter-spacing:-0.05em;}
#intro .think { font-size:1.4em;}


/* about */

.diagram span { width:74px; height:74px; margin:0 5px; background-size:74px 74px; } 
.diagram span em { bottom:12px;}
/*
#about h3 { font-size:1em; padding:13px 10px;}
#about .explain {
	max-width:100%;
	background:url(../images/ico_scroll.png) 0 bottom no-repeat;
	background-size:auto 40px;
	position:relative;
	overflow:hidden;	
	padding:0 14px;
}

#about .explain .overthrow { 
	overflow:scroll;
	-webkit-overflow-scrolling:touch;
	height:200px;	 
}
*/

/* service */
#serviceShow article { padding:0;}

#serviceShow .serv_img { float:none; width:100%;  height:auto; overflow:hidden; text-align:center;}
#serviceShow .serv_img img { width:80%; height:auto; margin:0 auto;}

#serviceShow .serv_txt { float:none; width:100%; padding:0; }
#serviceShow .serv_txt h3 img { height:80%; margin:0 auto;} 

#serviceShow .serv_txt .explain { 
	margin:10px 0 10px 10px; 
	background:url(../images/ico_scroll.png) 0 bottom no-repeat;
	background-size:auto 40px;
	position:relative;
	overflow:hidden;	
	padding:0 14px;
}
/*
#serviceShow .serv_txt .explain p {
	overflow:scroll;
	-webkit-overflow-scrolling:touch;
	height:100px;
}
*/
#serviceShow .serv_txt .go_link { padding:0 5px; letter-spacing:-0.08em;}
#serviceShow  #otgit .serv_txt .explain { background:none;}

/* business */ 
#recent_tweet p { font-size:1.2em; max-width:320px; margin:0 auto;}
#businessShow .serv_img { float:none; width:100%;  height:auto; overflow:hidden; text-align:center;}
#businessShow .serv_img img { width:80%; height:auto; margin:0 auto;}


/* contact */
.guide { font-size:1em; margin:0 auto; color:#666; }
#contact dl { max-width:320px; }
#contact dl { margin:0 auto; padding-top:6px; }
#contact dt { float:left; width:36%;}
#contact dd { float:right; width:60% ; text-align:left;}
.map iframe { height:260px;}
}

@media only screen and (min-width : 481px) and (max-width : 767px) {
footer .content,
section .content { width:550px; margin:0 auto; }	

/* intro */
#intro h2 { font-size:7em;}
#intro .explain { font-size:1.1em;}
#intro .think { font-size:2.4em;}

/* about */
.diagram span { width:88px; height:88px;}
#about h3 { font-size:1.6em;}

/* service */
#serviceShow  #otgit .serv_txt .explain { background:none;}

/* business */
#recent_tweet p { max-width:100%;}
}

@media only screen and (min-width : 768px) and (max-width : 1024px) {
/* Tablet Landscape */

footer .content,
section .content { width:680px; margin:0 auto; padding:0; }


#intro h2 { font-size:120px; }
#intro .explain { font-size:1.4em;}
#intro .think { font-size:3.2em;}


#about .explain { max-width:600px; }

/* service */
#serviceShow article { padding:0;}

#serviceShow .serv_img { float:none; width:100%; height:auto; overflow:hidden; text-align:center;}
#serviceShow .serv_img img { width:70%; height:auto; margin:0 auto;}
#serviceShow .serv_txt { float:none; padding:0;   width:600px; margin:0 auto;}
#serviceShow .serv_txt h3 img { height:80%; margin:0 auto;} 
#serviceShow .serv_txt .explain {
	margin: 0 0 10px;
	position:relative;
	overflow:hidden;	
	padding:0 14px;
}

#serviceShow .serv_txt .go_link { padding:0 10px;}



/* business */
#recent_tweet { max-width:600px;}

#businessShow .serv_img { float:none; width:100%; height:auto; overflow:hidden; text-align:center;}
#businessShow .serv_img img { width:70%; height:auto; margin:0 auto;}

}


dd { -webkit-margin-start: 10px; }