@charset "utf-8";
/* =Reset default browser CSS.

Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html

-------------------------------------------------------------- */

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, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table.table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}
ol, ul {
	list-style: none;
}
table.table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a img {
	border: 0;
}
figure {
	margin:0
}
div, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, div {
	display: block;
}
/* -------------------------------------------------------------- */



body {
	color:#333;
	font-size:small;
	font-family:verdana, "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	line-height:1.5;
	-webkit-text-size-adjust: none;
}
.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 0;
}
/* リンク設定

------------------------------------------------------------*/

a {
	color: #72BE9A;
	text-decoration: underline;
}
a:hover {
	color:#72BE9A;
}
a:active, a:focus {
	outline:0;
}

/* カラー設定
------------------------------------------------------------*/
.red {
    color: #ff0000;
    font-weight: bold;
}

/* 全体
------------------------------------------------------------*/

#wrapper {
	margin:0 auto;
	padding:0 1%;
	width:98%;
	position:relative;
	background:#fff;
}
.inner {
	margin:0 auto;
	width:100%;
}


/* 余白設定
------------------------------------------------------------*/
.mgt5_ {
    margin-top: 5px !important;
}
.mgt10_ {
    margin-top: 10px !important;
}
.mgt20_ {
    margin-top: 20px !important;
}
.mgt30_ {
    margin-top: 30px !important;
}
.mgb10_ {
    margin-bottom: 10px !important;
}
.mgb20_ {
    margin-bottom: 20px !important;
}
.mgb30_ {
    margin-bottom: 30px !important;
}
.pgt10_ {
    padding-top: 10px !important;
}
.pgt20_ {
    padding-top: 20px !important;
}
.pgt30_ {
    padding-top: 30px !important;
}
.pgt40_ {
    padding-top: 40px !important;
}
.pgt50_ {
    padding-top: 50px !important;
}
.pgb10_ {
    padding-bottom: 10px !important;
}
.pgb20_ {
    padding-bottom: 20px !important;
}
.pgb30_ {
    padding-bottom: 30px !important;
}
.pgr20_ {
    padding-right: 20px !important;
}
/*************

/* ヘッダー

*************/

#header {
	height:80px;
	width:960px;
	margin:0 auto;
	display:block;
	
}

#header h1 {
	padding:5px 0 10px 15px;
	font-size:10px;
	font-weight:normal;
}

div.name{   
    border-bottom: 3px solid #000;
    clear: both;
    margin: 10px auto 0;
    padding: 0;
    width: 100%;
	font-size:14px;
	font-weight:bold;
	 margin-bottom: 28px;
}

/*************

/* ロゴ

*************/

.logo {
	float:left;
}
.logo p {
	float:left;
}
.logo img {
	width:auto;
	float:left;
	padding:2px 10px 0 10px;
}
.logo span {
	display:block;
}
/*************

/* 電話番号

*************/

.info {
	float:left;
	padding-left:65px;
	padding-right:30px;
}
.info .open {
	font-size:11px;
}
/*************

/* ロゴ+電話番号

*************/

.logo, .info .tel {
	margin-top:6px;
	color:#72BE9A;
	font-size:20px;
	font-weight:bold;
}
p.tagline {
	color: #999999;
	float: left;
	font-size:10px;
	padding-top:15px;
}
.logo span, .info span {
	color:#333;
	font-size:.6em;
	font-weight:normal;
}
.button {
	border-style: solid;
	border-width: 1px;
	box-shadow: 0 -15px 15px 0 rgba(0, 0, 0, 0.25) inset, 0 1px 0 0 rgba(255, 255, 255, 0.5) inset;
	display: inline-block;
	font-size: 14px;
	font-weight: bold;
	line-height: 15px;
	margin-top: 13px;
	padding: 11px 15px;
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
	text-transform: uppercase;
	background-color: #93d1b3;
	border-color: #66978c;
	color: #FFFFFF !important;
	border-radius: 3px 3px 3px 3px;
}
/**************************

/* メイン画像（トップページ+サブページ）

**************************/

#mainBanner {
	margin:17px auto;
	padding:0;
	width:100%;
	position:relative;
	line-height:0;
}
#mainBanner img {
	max-width:100%;
	height:auto;
}
#subpage #mainBanner img {
	border:4px solid #f1f1f1;
}
.slogan {
	position:absolute;
	max-width:100%;
	height:auto;
	bottom:20px;
	left:0;
	padding:5px 10px;
	line-height:1.4;
	color:#939393;
}
.slogan h2 {
	padding-bottom:5px;
	font-size:20px;
	font-weight:bold;
	color:#333;
}
/**************************

/* グリッド

**************************/

.gridWrapper {
	padding-bottom:20px;
	overflow: hidden;
}
* html .gridWrapper {
	height:1%;
}
.grid {
	float:left;
	border-radius:5px;
	background:#fff;
}
.box {
	margin:0 5px;
	padding:10px;
	border:1px solid #EBEBEB;
}
.box img {
	max-width:100%;
	height:auto;
}
.box h3 {
	padding:10px 0 5px;
	color: #72BE9A;
	font-size: 15px;
	font-weight: bold;
}
.box h3, .box p {
	text-align:left;
}
.box p.readmore {
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
	color: #FFFFFF;
	font-size: 93%;
	font-weight: normal;
	padding: 0 0 5px;
	text-align: right;
	text-decoration: none;
	margin-top:10px;
}
p.readmore span {
	background-color: #393939;
	font-size: 12px;
	padding: 3px 5px;
	text-align: right;
}
p.readmore span a {
	color:#FFFFFF;
}
/*************

メイン コンテンツ

*************/

div#mainContent {
    font-size: small;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 960px;
    padding-bottom: 302px;
}

p#breadcrumb {
    font-size: 90%;
    margin: 15px !important;
}



div.content div {
	padding:20px;
	margin-bottom:20px;
	border:1px solid #f1f1f1;
	overflow:hidden;
}

div.content2 div {
	padding:20px;
	margin-bottom:20px;
	overflow:hidden;
}


* html div.content div {
	height:1%;
}

* html div.content2 div {
	height:1%;
}

div.content p {
	margin-bottom:15px;
}

div.content2 p {
	margin-bottom:15px;
}

div.content2 div h5{font-size: 24px; margin: 0 0 15px 0;}


h3.heading {
	border-bottom: 3px double #EBEBEB;
	border-top: 3px double #EBEBEB;
	font-weight: normal;
	margin-bottom: 5px;
	padding: 10px 0;
}

h3.heading2 {
	font-weight:normal;
	padding:0 10px;
	line-height:36px;
	color:#000;
	background:#F0F0F0;
	font-size:18px;
}

div.content img {
	max-width:90%;
	height:auto;
}

div.content2 img {
	max-width:90%;
	height:auto;
}

.alignleft {
	float:left;
	clear:left;
	margin:3px 10px 10px 0;
}
.alignright {
	float:right;
	clear:right;
	margin:3px 0 10px 10px;
}
#gallery .grid img, .border, ul.list img {
	border:4px solid #f1f1f1;
}

.bnr img{width:100%;}
.bnr p{font-size: 197%; margin-bottom: 30px; font-weight: bold; text-align: center;}
/*************

テーブル

*************/

table.table {
    border-collapse: collapse;
    margin: 5px auto 15px;
    width: 100%;
}
table.table td {
    background-color: #f9f9f9;
    border: 1px solid #d6d6d6;
    border-collapse: collapse;
    line-height: 20px;
    padding: 8px;
    text-align: left;
}
table.table th {
    background-color: #f5f5f5;
    border-color: #d4d4d4;
    border-style: solid;
    border-width: 1px 4px 1px 1px;
    color: #151515;
    font-size: 13px;
    font-weight: normal;
    letter-spacing: 1px;
    padding: 8px;
    text-align: left;
}

.tbr {
    border-collapse: collapse;
    border-left: 1px solid #c7d0d9;
    border-top: 1px solid #c7d0d9;
    text-align: left;
}
.tbr th {
    background: none repeat scroll 0 0 #f0f0f0;
    border-bottom: 1px solid #c7d0d9;
    border-right: 1px solid #c7d0d9;
    color: #333;
    font-size: 100%;
    font-weight: bold;
    line-height: 1.5;
    padding: 10px;
    text-align: left;
	vertical-align: middle;
}
.tbr td {
    border-bottom: 1px solid #c7d0d9;
    border-right: 1px solid #c7d0d9;
    color: #666;
    font-size: 100%;
    line-height: 1.5;
    padding: 10px;
}
span.require {
    color: #ff0000;
    font-size: 77%;
    line-height: 1.3;
}



/*************

/* サイドバー

*************/

#sidebar ul {
	padding:10px;
}
#sidebar li {
	margin-bottom:10px;
	padding-bottom:10px;
	list-style:none;
	border-bottom:1px dashed #f1f1f1;
}
#sidebar li:last-child {
	border:0;
	margin-bottom:0px;
}
#sidebar li a {
	display:block;
}
#sidebar ul.list li {
	clear:both;
	margin-bottom:5px;
	padding:5px 0;
	overflow:hidden;
	border:0;
}
ul.list li {
	height:1%;
}
ul.list li img {
	float:left;
	margin-right:10px;
}
ul.list li {
	font-size:12px;
	line-height:1.35;
}
/*************

/* フッター

*************/

#footer {
	clear:both;
	overflow:hidden;
	padding:30px 10px 20px 10px;
	background:url(../img/common/ftr_bg.gif) repeat scroll 0 0;
}
* html #footer {
	height:1%;
}

#footer ul {
    float: left;
    margin-right: 20px;
    width: 130px;
}

#footer ul a {
    background:("../img/common/arrow1.png") no-repeat scroll 0 12px transparent;
    color: #333;
    display: block;
    font-size: 100%;
}

#footer ul ul a {
    background: url("../img/common/arrow2.png") no-repeat scroll 0 10px transparent;
    border-bottom: medium none;
    font-size: 93%;
    padding: 8px 0 0 10px;
}
#footer li {
    font-size: 95%;
    padding-left: 18px;
}
#footer li a {
    background: url("../img/common/footer_li.gif") no-repeat scroll 2px center transparent;
    padding-left: 18px;
}

#footer .grid {
	padding:10px 0 5px;
	margin:0;
	background:transparent;
}
#footer #info .logo, #footer #info .info {
	float:none;
}
#footer #info .info {
	clear:both;
	padding:10px 0 0 15px;
	text-align:left;
}
#footer .logo {
	font-size:18px;
}
#footer .info .tel, #footer .info .tel span, #footer #info .open {
	font-size:12px;
	color:#333;
}
ul.footnav {
	float:right;
	width:650px;
	padding:10px 0;
}
ul.footnav li {
	float:left;
	margin-bottom:10px;
	padding:0 7px 0 8px;
	font-size:11px;
	border-right:1px solid #b6b6b6;
}
#footer a {
	color:#333;
}
#footer a:hover {
	color:#888;
}
address {
	clear:both;
	padding:10px;
	text-align:center;
	font-style:normal;
	font-size:10px;
	color:#333;
	background:#72BE9A;
}



/* PC用
------------------------------------------------------------*/

@media only screen and (min-width: 960px) {

.sp{display:none;}
	
 #wrapper, .inner {
 width:960px;
 padding:0;
 margin:0 auto;
}
 #wrapper {
padding-bottom:20px;
}
 nav#mainNav {
 background:url(../img/header/gNavi_bg.jpg) repeat-x scroll transparent;
 clear:both;
 overflow:hidden;
 position:relative;
}
 nav#mainNav .inner {
 width:960px;
}
 nav#mainNav ul li {
 float: left;
 position: relative;
}
 nav#mainNav li:last-child {
border-right:1px solid #000000;
}
 nav#mainNav ul li a {
 display: block;
 text-align: center;
 _float:left;
 font-size:13px;
 width:190px;
 height:35px;
 padding-top:15px;
 color:#333;
 border-left:1px solid #000000;
}
 nav#mainNav ul li a span, nav#mainNav ul li a strong {
 color:#FFFFFF;
 display:block;
 text-shadow: 1px 1px 3px #000000;
}


.pr {
 background-image:url(../img/top/top_h2.png);
 background-position: 0 0;
 background-repeat: no-repeat;
 color: #222222;
 font-size: 27px;
 line-height: 1.2em;
 font-weight: bold;
 height: 94px;
 margin: 0 auto 10px;
 padding-left: 35px;
 padding-top: 20px;
 text-align: left;
 text-shadow: 0 1px 0 #E5E5EE;
 width: 960px;
}
nav div.panel {
 display:block !important;
 float:left;
}
a#menu {
display:none;
}


#mainBanner {
margin-left:15px;
}
 #subpage #mainBanner {
margin:17px auto;
}
 #main {
 float:right;
 width:667px;
 padding-right:15px;
}
 #sidebar {
 float:left;
 width:245px;
 padding:17px 0 0 15px;
 overflow:hidden;
}
 #sidebar div {
 padding:7px;
 margin-bottom:20px;
 border:1px solid #f1f1f1;
 overflow:hidden;
}

	
/* グリッド全体 */

.gridWrapper {
 width:960px;
 margin:0 0 0 -10px;
}
 #gallery div {
padding:10px 0 10px 10px;
}


/* グリッド */

.grid {
 float:left;
 width:300px;
 margin-left:20px;
}
 #subpage .grid {
width:auto;
}
 #gallery .grid {
 width:auto;
 margin:10px 0 2px 10px;
}
	
	
/*-----------------------------------------------
サービス案内
-----------------------------------------------*/

.serviceNavi {
 width: 100%;
 padding-top:5%;
 padding-bottom:5%;
}
 .idTabs ul {
 margin: 0;
 padding: 0;
 width: auto;
}
 .idTabs li {
 float: left;
 list-style: none outside none;
}
 .tab1 img {
 max-width: 171px;
}
 .tab2 img {
 max-width: 176px;
}
 #design {
 background: none repeat scroll 0 0 snow;
 clear:both;
 font: 10pt Georgia;
 padding: 10px 10px 8px;
 text-align: left;
}
 #system {
 background: none repeat scroll 0 0 snow;
 clear:both;
 font: 10pt Georgia;
 padding: 10px 10px 8px;
 text-align: left;
}
 .li1 {
 float: left;
 padding:2%;
 width: 20.8%;
 border-bottom:1px solid #e3e3e3;
 text-align: center;
 _padding: 6px;
 _width:224px;
}
 .li0 {
 float: left;
 padding: 2% 2% 2% 2%;
 width: 20.9%;
 border-left:1px solid #e3e3e3;
 border-bottom:1px solid #e3e3e3;
 text-align: center;
 _padding: 6px;
 _width:225px;
}
 .servicetab h2 {
 text-align:center;
 color:#9cd7bb;
 padding-top:3px;
 _padding-top:3px;
}
 .servicetab .text {
 font-size:75%;
 padding-top:3%;
 text-align:left;
 _padding-top:5px;
}




/* 個ページ */

#hedImg{width:100%; height:300px; position:relative; text-align:center; overflow:hidden;}

#hedImg.service {
    background: #c6c6c7 url(../img/etc/service_hed.jpg) no-repeat scroll center top;
}

#hedImg h3{width:960px; margin:70px auto 0;} 

.service_list{margin-left: 130px; margin-top:-150px; width:850px;}
.service_list li{float:left; width:165px;margin-right: 23px; }
.service_list li span{font-weight: bold; height: 2em; text-align: center; display:block; font-size: 138.5%; color:#78c0a8; padding-top: 180px;}
.pc_tab{display:block;}

a.corporate{display:block; width:165px; height:165px; background:url(../img/etc/icon_corporate.png); text-decoration: none;}
a.ec{display:block; width:165px; height:165px; background:url(../img/etc/icon_ec.png); text-decoration: none;}
a.lp{display:block; width:165px; height:165px; background:url(../img/etc/icon_lp.png); text-decoration: none;}
a.responsive{display:block; width:165px; height:165px; background:url(../img/etc/icon_responsive.png); text-decoration: none;}

a.corporate:hover{background-position:left bottom;}
a.ec:hover{background-position:left bottom;}
a.lp:hover{background-position:left bottom;}
a.responsive:hover{background-position:left bottom;}
.variation{margin-top:140px;}
.variation h4{font-size: 197%; margin-bottom: 30px; font-weight: bold; text-align: center;}
.follow{margin:100px 0 100px 0;}
.follow h4{font-size: 197%; margin-bottom: 30px; font-weight: bold; text-align: center;}
.follow img{height: auto; max-width: 100%;}

.contact_btn{color: #222 !important; font-size: 18px; margin: 0; text-align: center;}
.contact_btn a {
    background:url(../img/etc/contact_btn.jpg) no-repeat scroll left top;
    color: #fff;
    display: block;
    font-size: 16px;
    font-weight: bold;
    height: 82px;
    line-height: 82px;
    margin: 0 auto 30px;
    overflow: hidden;
    width: 637px;
    text-decoration:none;}

/*-----------------------------------------------
 制作実績
-----------------------------------------------*/

#pastWork_wrapper {
 float:left;
 width:65%;
 margin-right:5%;
 margin-bottom:8%;
 _width:624px;
 _margin-right:2.5%;
}
 .pastWork_pickup {
 border-color: #D5D5CE #FFFFFF #F4F4F0 #FFFFFF;
 border-style: solid;
 border-width: 1px;
 margin: 0 -1px;
 padding: 0;
 position: relative;
 width: 630px;
}
 #pastWork_wrapper h2 {
 background: none repeat scroll 0 0 transparent;
 padding: 0;
}

#nav h2 {
 background: none repeat scroll 0 0 transparent;
 padding: 0;
}

 .pastWork_navi img {
 border: 0 none;
 height: auto;
 line-height: 1;
 max-width: 100%;
 vertical-align: bottom;
}
 .pastWork_navi .li1 {
 float: left;
 padding: 8px 8px 0 8px;
 width: 30.5%;
 border-bottom:1px solid #e3e3e3;
 height:120px;
 text-align: center;
 _width: 199px;
 _padding: 4px 4px 0 4px;
}
 .pastWork_navi .li0 {
 float: left;
 padding: 8px 8px 0 8px;
 width: 30.5%;
 border-left:1px solid #e3e3e3;
 border-bottom:1px solid #e3e3e3;
 height:120px;
 text-align: center;
 _width: 199px;
 _padding: 4px 4px 0 4px;
}
 .pastWork_navi h5 {
 text-align:center;
 color:#9cd7bb;
 padding-top:5%;
 _padding-top:5px;
}
 .pastWork_navi .text {
 font-size:75%;
 padding-top:3%;
 text-align:left;
}

/*-----------------------------------------------
ピックアップ
-----------------------------------------------*/

#nav {
 float:right;
 width:30%;
 _width:288px;
}
 #nav ul li {
 margin-bottom: 15px;
}
 #nav ul li img {
 width:281px;
 height:74px;
}

}
 @media only screen and (max-width:959px) {

.sp{display:none;}

#header{width:100%;}	 
 * {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
}

.logo{float: none;
    margin: 0 auto;
    padding: 0;
    text-align: center;}
	
.logo img{float: none;}

p.tagline {
    color: #999999;
    font-size: 10px;
    padding: 0;
    text-align: center;
    width: 100%;
}


#header .info{padding:0 0 10px 10px;}

.button {
    background-color: #93d1b3;
    border-color: #66978c;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 -15px 15px 0 rgba(0, 0, 0, 0.25) inset, 0 1px 0 0 rgba(255, 255, 255, 0.5) inset;
    color: #ffffff !important;
    display: inline-block;
    float: right;
    font-size: 11px;
    font-weight: bold;
    line-height: 15px;
    margin: 5px 5px 0 0;
    padding: 11px 5px;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
}

 nav#mainNav {
 clear:both;
 width:100%;
 margin:0 auto;
 padding:0;
 background: -webkit-gradient(linear, left top, left bottom, color-stop(1, #5b5c57), color-stop(0.5, #62635e), color-stop(0.00, #6c6d67));
 background: -webkit-linear-gradient(top, #6c6d67 0%, #62635e 50%, #5b5c57 100%);
 background: -moz-linear-gradient(top, #6c6d67 0%, #62635e 50%, #5b5c57 100%);
 background: -o-linear-gradient(top, #6c6d67 0%, #62635e 50%, #5b5c57 100%);
 background: -ms-linear-gradient(top, #6c6d67 0%, #62635e 50%, #5b5c57 100%);
 background: linear-gradient(top, #6c6d67 0%, #62635e 50%, #5b5c57 100%);
 border:1px solid #e4e4e4;
}
 nav#mainNav a.menu {
 width:100%;
 display:block;
 height:40px;
 line-height:40px;
 font-weight: bold;
 text-align:left;
 text-decoration:none;
 color:#FFF;
}
 nav#mainNav a#menu span {
padding-left:10px;
}
 nav#mainNav a.menu span:before {
content: "→ ";
}
 nav#mainNav a.menuOpen span:before {
content: "↓ ";
}
 nav#mainNav a#menu:hover {
cursor:pointer;
}
 nav .panel {
 display: none;
 width:100%;
 position: relative;
 right: 0;
 top:0;
 z-index: 1;
}
 nav#mainNav ul li {
 float: none;
 clear:both;
 width:100%;
 height:auto;
 line-height:1.2;
}
 nav#mainNav ul li a, nav#mainNav ul li.current-menu-item li a {
 display: block;
 padding:15px 10px;
 text-align:left;
 border-bottom:1px dashed #ccc;
}
 nav#mainNav ul li a span {
padding-left:10px;
}
 nav#mainNav ul li:first-child a {
 border-top:1px solid #FFFFFF;
}
 nav#mainNav ul li:last-child a {
border:0;
}

 nav#mainNav ul li a {
color:#FFFFFF;
}
 nav#mainNav ul li.active a {
color:#FFFFFF;
}
 nav div.panel {
float:none;
}
 #subpage #mainBanner {
max-width:668px;
}
 #sidebar {
padding-bottom:30px;
}
 #sidebar div {
padding:7px 0;
}
 #footer .grid, #footer ul.footnav {
 float:none;
 width:100%;
 text-align:center;
}
 ul.footnav li {
float:none;
display:inline-block;
}
 .grid {
 width:32%;
 margin:10px 0 0 1%;
}
 #gallery .grid {
 float:left;
 width:31%;
 margin:0 0 0 1%;
}
 #footer .grid img, #footer .info {
float:none;
}
 #footer .grid p {
display:block;
}
 #footer #info .info {
float:none;
text-align:center;
}
 #footer .logo, #footer .info {
 width:100%;
 float:none;
}
 .pastWork_navi li {
float: left;
padding: 8px 8px 0 8px;
width: 50%;
text-align: center;
height: 100px;
}
 #footer .logo p {
float:none;
display:block;
}
 #footer .logo img {
float:none;
padding:0;
}

#footer ul {
    float: left;
    margin-right: 20px;
    width: 150px;
}
 .servicetab li {
border-bottom: 1px solid #e3e3e3;
padding: 2%;
text-align: center;
}
 .pastWork_navi li {
float: left;
padding: 8px 8px 0 8px;
width: 33%;
text-align: center;
margin-bottom:18px;
}
.idTabs ul {
margin: 0;
　padding: 0;
　width: auto;
}
.idTabs .tab1 {
float: left;
list-style:none outside none;
width: 50%;
}
.idTabs .tab2 {
float:right;
list-style:none outside none;
width: 50%;
}
.idTabs li img {
height:auto;
}
 .servicetab .text {
font-size:90%;
padding-top: 3%;
text-align: left;
}
 #pastWork_wrapper h2 {
 font-size: 178.571%;
 font-weight: bold;
 margin: 0 auto;
 padding: 40px 10px 15px;
}

#nav h2 {
 font-size: 178.571%;
 font-weight: bold;
 margin: 0 auto;
 padding: 40px 10px 15px;
}

 .pastWork_navi img {
border: 0 none;
height:auto;
line-height: 1;
vertical-align: bottom;
}

div#nav ul{text-align:center; padding-bottom:15px;}
div#nav ul li{display: inline;}

#footer .info .tel, #footer .info .tel span, #footer #info .open {
    color: #333;
    font-size: 12px;
    text-align: left;
}

/* 個ページ */

#hedImg{width:100%; height:370px; position:relative; text-align:center; overflow:hidden;}

#hedImg.service {
    background: #c6c6c7 url(../img/etc/service_hed.jpg) no-repeat scroll center top;
}

#hedImg h3{width:960px; margin:140px auto 0;} 

.service_list{margin-left: 130px; margin-top:-150px; width:850px;}
.service_list li{float:left; width:165px;margin-right: 23px; }
.service_list li span{font-weight: bold; height: 2em; text-align: center; display:block; font-size: 138.5%; color:#78c0a8; padding-top: 180px;}
.pc_tab{display:block;}

a.corporate{display:block; width:165px; height:165px; background:url(../img/etc/icon_corporate.png); text-decoration: none;}
a.ec{display:block; width:165px; height:165px; background:url(../img/etc/icon_ec.png); text-decoration: none;}
a.lp{display:block; width:165px; height:165px; background:url(../img/etc/icon_lp.png); text-decoration: none;}
a.responsive{display:block; width:165px; height:165px; background:url(../img/etc/icon_responsive.png); text-decoration: none;}

a.corporate:hover{background-position:left bottom;}
a.ec:hover{background-position:left bottom;}
a.lp:hover{background-position:left bottom;}
a.responsive:hover{background-position:left bottom;}
.variation{margin-top:140px;}
.variation h4{font-size: 197%; margin-bottom: 30px; font-weight: bold; text-align: center;}

.follow {
    margin: 100px 0;
}

.follow h4{font-size: 197%; margin-bottom: 30px; font-weight: bold; text-align: center;}
.follow img{height: auto; max-width: 100%;}
.contact_btn{color: #222 !important; font-size: 18px; margin: 0; text-align: center;}
.contact_btn a {
    background:url(../img/etc/contact_btn.jpg) no-repeat scroll left top;
    color: #fff;
    display: block;
    font-size: 16px;
    font-weight: bold;
    height: 82px;
    line-height: 82px;
    margin: 0 auto 30px;
    overflow: hidden;
    width: 637px;
    text-decoration:none;}


}





/* スマートフォン 横(ランドスケープ) */

@media only screen and (max-width:640px) {
	
.sp{display:block;}
	
#header{background:url(../img/common/ftr_bg.gif) repeat scroll 0 0; padding: 10px 0; height:auto;}	


.logo{float: none;
    margin: 0 auto;
    padding: 0;
    text-align: center;}

p.tagline {display:none;}

#header .info{display:none;}

.button {display:none;}

.box h3 {
padding-top:0;
}

.alignleft, .alignright {
 float:none;
 display:block;
 margin:0 auto 10px;
}

#gallery .grid {
float:left;
}

 .servicetab li {
border-bottom: 1px solid #e3e3e3;
padding: 2%;
text-align: center;
}
.idTabs ul {
margin: 0;
　padding: 0;
　width: auto;
}
.idTabs .tab1 {
float: left;
list-style:none outside none;
width: 50%;
}
.idTabs .tab2 {
float:right;
list-style:none outside none;
width: 50%;
}
.idTabs li img {
height:auto;
}

.servicetab .text {
font-size:90%;
padding-top: 3%;
text-align: left;
}



#pastWork_wrapper h2 {
 font-size: 178.571%;
 font-weight: bold;
 margin: 0 auto;
 padding: 40px 10px 15px;
}

.pastWork_navi li {
  float: left;
  padding: 8px 8px 0 8px;
  width: 50%;
　height:120px;
　text-align: center;
  height: 100px;
}

.pastWork_navi img {
border: 0 none;
height:auto;
line-height: 1;
max-width: 100%;
vertical-align: bottom;
}

div#nav ul{text-align:center; padding-bottom:15px;}
div#nav ul li{display: inline;}


#footer .info .tel, #footer .info .tel span, #footer #info .open {
    color: #333;
    font-size: 10px;
    text-align: left;
}
#footer ul {
    float: left;
    margin-right: 0px;
    width: 100px;
margin-bottom: 10px;}


/* 個ページ */

#hedImg{height: auto; position:relative; text-align:center; overflow:hidden;}

#hedImg.service {
    background: #c6c6c7 url(../img/etc/service_hed.jpg) no-repeat scroll left top / 100% auto;
}


#hedImg h3{height: auto; margin:30px auto; width:100%;} 
#hedImg h3 img{width:35%;} 

.service_list{margin: 0 auto 10px; width:95%;}
.service_list li{margin: 0 2% 0; width: 20%; float:left;}
.service_list a{background-image:none; width:100%; min-height:100%;}
.service_list li span{font-weight: bold; height: 2em; text-align: center; display:block; padding-top:10px; font-size: 110%; color:#78c0a8;}
.pc_tab{display:none;}

.service_list li em{ box-shadow: 0 6px 0 #ddd; width: 100%; background-color: #78c0a8;  border-radius: 50%;
cursor: pointer; display: block; position: relative; text-align: center; transition: all 0.5s ease 0;}
.service_list li em img{ width:100%;}	


.variation{margin-top:60px;}
.variation h4{font-size: 125%; margin-bottom: 30px; font-weight: bold; text-align: center;}
.follow{margin-top:60px;}
.follow h4{font-size: 125%; margin-bottom: 30px; font-weight: bold; text-align: center;}
.follow img{height: auto; max-width: 100%;}
.bnr p {
    font-size: 128%;
    font-weight: bold;
    margin: 10px 0 30px;
    text-align: center;
}
.contact_btn{color: #222 !important; font-size: 18px; margin: 0; text-align: center;}
.contact_btn a {
    background:url(../img/etc/contact_btn.jpg) no-repeat scroll left top;
    color: #fff;
    display: block;
    font-size: 16px;
    font-weight: bold;
    height: 82px;
    line-height: 82px;
    margin: 0 auto 30px;
    overflow: hidden;
    width: 90％;
    text-decoration:none;}
	
.contact_btn{color: #222 !important; font-size: 18px; margin: 0; text-align: center;}
.contact_btn a {
	background: -moz-linear-gradient(top,#f54047 0%,#f54047);
	background: -webkit-gradient(linear, left top, left bottom, from(#f54047), to(#f54047));
	border: 1px solid #DDD;
	color:#FFF;
	width: 90%;
}
}



/* スマートフォン 縦(ポートレート) */

@media only screen and (max-width:480px) {
#header{background:url(../img/common/ftr_bg.gif) repeat scroll 0 0; padding: 10px 0; }	
.logo, .info .tel {
margin-top: 0;
}

.logo{float: none;
    margin: 0 auto;
    padding: 0;
    text-align: center;}

 p.tagline {display:none;}
.info {display:none;}
.logo, .info .tel {
color: #72be9a;
font-size: 16px;
font-weight: bold;
}
 .button {display:none;}
 .grid {
width:100%;
}

.box{text-align: center;}
.box img {
max-width:200px;
}
 #mainBanner h2, #mainBanner p {
font-size:80%;
}
 .servicetab li {
border-bottom: 1px solid #e3e3e3;
padding: 2%;
text-align: center;
}
 .pastWork_navi li {
float: left;
padding: 8px 8px 0 8px;
width: 50%;
　height:120px;
　text-align: center;
height: 100px;
}
.idTabs ul {
margin: 0;
　padding: 0;
　width: auto;
}
.idTabs .tab1 {
float: left;
list-style:none outside none;
width: 50%;
}
.idTabs .tab2 {
float:right;
list-style:none outside none;
width: 50%;
}
.idTabs li img {
width:100%;
height:auto;
}
 .servicetab .text {
font-size:90%;
padding-top: 3%;
text-align: left;
}
 #pastWork_wrapper h2 {
 font-size: 178.571%;
 font-weight: bold;
 margin: 0 auto;
 padding: 40px 10px 15px;
}
 .pastWork_navi img {
border: 0 none;
width:95%;
height:auto;
line-height: 1;
max-width: 100%;
vertical-align: bottom;
}
#footer {
padding:0;
}

#footer #info .info {
padding:0;
}
#footer #info .tel, open {
font-size:80%;
}
ul.footnav li {
float:none;
display:inline-block;
margin-bottom:5px;
}
 #nav {
margin-top:10px;
margin:15px auto;
}
p.bnr img{display:none;}

/* 個ページ */

#hedImg{height: auto; position:relative; text-align:center; overflow:hidden;}

#hedImg.service {
    background: #c6c6c7 url(../img/etc/service_hed.jpg) no-repeat scroll left top / 100% auto;
}


#hedImg h3{height: auto; margin:20px auto; width:100%;} 
#hedImg h3 img{width:35%;} 

.service_list{margin: 0 auto 10px; width:90%;}
.service_list li{margin: 4%; width: 40%; float:left;}
.service_list a{background-image:none; width:100%; min-height:100%;}
.service_list li span{font-weight: bold; height: 2em; text-align: center; display:block; padding-top:10px; font-size: 110%; color:#78c0a8;}
.pc_tab{display:none;}


.service_list li em{ box-shadow: 0 6px 0 #ddd; width: 100%; background-color: #78c0a8;  border-radius: 50%;
cursor: pointer; display: block; position: relative; text-align: center; transition: all 0.5s ease 0;}
.service_list li em img{ width:100%;}	


.variation{margin-top:70px;}
.variation h4{font-size: 125%; margin-bottom: 30px; font-weight: bold; text-align: center;}
.follow{margin-top:70px;}
.follow h4{font-size: 125%; margin-bottom: 30px; font-weight: bold; text-align: center;}
.follow img{height: auto; max-width: 100%;}
.bnr p{font-size: 128%; font-weight: bold; margin: 10px 0 30px 0; text-align: center;}
.contact_btn{color: #222 !important; margin: 0; text-align: center;}
.contact_btn a {
	background: -moz-linear-gradient(top,#f54047 0%,#f54047);
	background: -webkit-gradient(linear, left top, left bottom, from(#f54047), to(#f54047));
	border: 1px solid #DDD;
	color:#FFF;
	width: 98%;


}

@media screen and (max-width: 320px) {
	
.logo img{ margin:0 auto; text-align:center; display:block;}
#footer ul {
    float: left;
    margin-right: 0px;
    width: 60%;
}

}