@charset "utf-8";


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

.gridContainer { line-height:1.4;}

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

 
section { padding:50px 0 80px;}

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


/* intro */
#intro h2 { font-size:3.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-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:0 0 10px; 
	background-size:auto 40px;
	position:relative;
	overflow:hidden;	
	padding:0 14px;
}
#serviceShow .serv_txt .explain p {
}
#serviceShow .serv_txt .go_link { padding:0 5px; letter-spacing:-0.08em;}

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


/* staff */

#staff .content { margin: 0 auto; position:relative; }
#staffShow .explain { background:none; margin:0 20px;}


.staff_list {text-align:center;}
.staff_list .item { width:100%; height:auto; padding:0; margin:0 0 10px;}
.staff_list .item a { display:block; width:99%; height:70px; text-align:left; border-radius:80px; overflow:hidden; background-color:#fff;}
.staff_list .item img { width:70px; height:70px; float:left; margin-right:20px;}
.staff_list .item .label { width:100%; position:static; font-size:1em; color:#333; padding-top:16px; }

.staff_list .item a:hover img {
	opacity:1;
	filter:alpha(opacity=100);
}


#staffShow { width:280px; height:auto; margin:-180px 0 0 -140px; background-color:#fff;}
#staffShow .layer_close { width:30px; height:30px; overflow:hidden;}
#staffShow .layer_close img { width:100%;}

.profile_img { width:80px; height:80px; margin-bottom:20px;}
.profile_img img { width:100%; margin-left:0;}

.profile_txt { margin:0; padding:30px 0;}
.profile_txt h3 { font-size:1.5em /*18px*/;}
.profile_txt .explain { clear:both; margin:0; }
.profile_txt ul { margin-top:16px;}



/* story */ 
#recent_tweet p { font-size:1.2em; max-width:320px; 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:480px; margin:0 auto; }	
	
	
/* intro */
#intro h2 { font-size:5em;}
#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;}


/* staff */
.staff_list { padding:0;}
.staff_list .item { float:left; width:47% !important; height:auto !important;}
.staff_list .item img { margin-right:10px;}

#staffShow { width:480px; height:auto; margin:0 0 0 -240px; top:0; background-color:#fff;}
#staffShow .explain { margin:0 40px;}


/* story */
#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:5em;/*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;}


/* staff */

.staff_list .item  { width:170px; height:170px; }
.staff_list .item .label strong { font-size: 1em;}
.staff_list .item .label span { font-size:0.9em;}


#staffShow { width:500px; height:auto; margin:-200px 0 0 -250px; background-color:#fff;}

.profile_img { width:160px; height:160px; margin-bottom:20px;}
.profile_img img { width:100%; margin-left:0;}
.profile_txt { margin:0;}
.profile_txt .explain { clear:both; margin:0; }
.profile_txt ul { margin-top:16px;}


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

}