@charset "utf-8";

/*===============================================================
	For Tablet	画面の横幅が989px以下
===============================================================*/
@media screen and (max-width: 1100px){
img{
    max-width: 100%;
    height: auto;
    width /***/:auto;　
}
.main_visual,
.page_w { width:90%;}

h1 {
	color:#fF0;
}


.main_container .main_section,
.main_container .sub_section {
	width:95.833%;
}


.thumblist .gridwrp_4 {
	width:103.33%;
}
.thumblist .gridwrp_4 .grid_2 {
	width:46.77%;
	margin-right:3.22%;
}

.thumblist .gridwrp_4 { width:106.667%;}
.thumblist .gridwrp_4 .grid_2 { width:18.750%; margin-right:6.250%; }


.thumblist .gridwrp_4 { width:102.326% }
.thumblist .gridwrp_4 .grid_2 { width:22.727%; margin-right:2.273%; }


.single_container {
	width:90%;
	margin:0 auto;
	margin-top:50px;
}

/*===============================================================
	サービス詳細ページ
===============================================================*/
.service_title {
}
.service_title .main_section,
.service_title .sub_section {
	width:95.833%;
}
.service_title .service_category p {
	padding-top:10px;
	font-size:150%;
	letter-spacing:5px;
}
.service_title .service_category p strong {
	display:inline;
	font-size:100%;
}
/* nav */


	/*
	
.header .nav {
	width:65%;
}
.header .nav li {
	text-align:left;
	float:left;
	width:31%;
	background:#ddd;
	margin-left:2%;
}
*/
}
/*===============================================================
	For SP	画面の横幅が640pxまで
===============================================================*/
@media only screen and (max-width:640px) {
:focus { outline:0; }
	
* {
	/* タッチ時のハイライト：非表示 */
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
	tap-highlight-color:rgba(0, 0, 0, 0);
	
	/* 背面の表示：非表示　*/
	-webkit-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	
	/*　文字サイズを固定　*/
	-webkit-text-size-adjust:none;
}
body {
	top:-80px
}

.cf {
	width:100%;
	overflow:hidden;
}
h1 {
	color:#000;
}
p {
	line-height:1.4;
}

h1,h2,h3,h4,h5,h6,p,li,th,td {}

.page_w {
	width:100%;
}
img{
    max-width: 100%;
    height: auto;
    width /***/:auto;　
}
.page_w { width:100%;}

.gridwrp_12 .grid_1, 
.gridwrp_12 .grid_2,
.gridwrp_12 .grid_3, 
.gridwrp_12 .grid_4, 
.gridwrp_12 .grid_5, 
.gridwrp_12 .grid_6, 
.gridwrp_12 .grid_7, 
.gridwrp_12 .grid_8, 
.gridwrp_12 .grid_9, 
.gridwrp_12 .grid_10, 
.gridwrp_12 .grid_11,
.gridwrp_12 .grid_12,
.main_section,
.sub_section {
	margin:0 auto;
	width:90%;
	float:none;
}

.single_container {
	width:90%;
	margin:0 auto;
	margin-top:30px;
}

.headline {

}
.gridwrp_12 {
	width:100%;
}
.gridwrp_8 {
	width:100%;
	padding-bottom:50px;
}
.gridwrp_8 .grid_4 {
	width:100%;
	margin:0;
}

.grid_12_col4 {
	width:100%;
}

.ph img {
	width:100%;
}

.pc {
	display:none;
}

.flol {
	margin-top:10px;
}

.outline_container {
	background:#00f;
}

/*　header　*/
.header_container {
	padding:0;
}
.header {
	position:relative;
	text-align:left;
	height:auto;
	border-left:solid 0px rgba(255,255,255,0.1);
	border-right:solid 0px rgba(0,0,0,0.5);
}
.header .logodesign {
	position:relative;
	width:100%;
	height:50px;
	line-height:40px;
	text-align:center;
	/*background:url(../images/header_logo_bg.gif) repeat-x 0 0;*/
	left:0;
}
.header .logodesign img {
	width:84px;
	height:30px;
	margin-top:10px;
}
.header .logodesign a {
	display:block;
	width:100%;
	height:50px;
	border-left:solid 0px rgba(255,255,255,0.1);
	border-right:solid 0px rgba(0,0,0,0.5);
}

/* nav */
.header .nav {
	width:100%;
	height:auto;
	position:relative;
	border:0px;
	border-top:solid 1px #000;
}
.header .nav li {
	position:static;
	float:left;
	width:25%;
	margin:0;
	font-size:12px;
	line-height:40px;
	height:50px;
	text-align:center;
	top:0;
}

.header .nav li a {
	display:block;
	color:#fff;
	font-weight:bold;
	text-decoration:none;
}

.header .nav li.onfocus a,
.header .nav li a:hover {
	display:block;
	color:#fff;
	font-weight:bold;
	text-decoration:none;
	background:#D4145A;
}

.nav-about {
	left:0;
}
.nav-service {
	left:25%;
}
.nav-information {
	left:50%;
}
.nav-contact {
	left:75%;
}


.header .nav li .sub {
	position:absolute;
	top:50px;
	left:0;
	width:100%;	
	z-index:1000;

	display:none;
}
.header .nav li .sub .inner {
	background:#D4145A;
	width:100%;
	overflow:hidden;
	margin:0 auto;
}

.header .nav li .sub ul {
	margin:0 10px;
	
}
.header .nav li .sub ul li {
	position:static;
	width:100%;
	overflow:hidden;
	height:auto;
	margin:0;
	float:none;
	text-align:left;
	font-size:100%;
}
.header .nav li .sub ul li a {
	display:block;
	width:100%;
	margin:0 auto;
	padding:10px 0;
	border:0;
	line-height:1.2;
}

.header .nav li .sub ul li a img {
	width:100%;
	height:auto;
	margin-bottom:10px;
	background:url(../images/service_main_btns_off_01.jpg) no-repeat 0 0;
	background-size:contain;
}
.header .nav li .sub ul li.webdesign a img {
	background-image:url(../images/service_main_btns_off_01.jpg);
}
.header .nav li .sub ul li.cms a img {
	background-image:url(../images/service_main_btns_off_02.jpg);
}
.header .nav li .sub ul li.programming a img {
	background-image:url(../images/service_main_btns_off_03.jpg);
}
.header .nav li .sub ul li.graphic a img {
	background-image:url(../images/service_main_btns_off_04.jpg);
}






/* サブヘッダ用
----------------------------------------------------------------*/
.fixed {
	position:fixed;
}

#subHeader {
	position:fixed;
	width:100%;
	height:100px;
	background:#fff;
	z-index:99999;
	top:0px;
	left:0px;
	background:#4b3c3a;
	zoom:1;
}

#subHeader .nav {
	width:100%;
	height:100px;
	background:#4b3c3a;
	overflow:hidden;
	margin:0;
}

/* hnav */
#subHeader .nav .hnav {
	/*
	width:942px;
	height:42px;
	margin:-3px auto 0 auto;
	*/
}

/*　pagetop
----------------------------------------------------------------*/
#btn_pagetop {
	width:100%;
	overflow:hidden;
}
#btn_pagetop a {
	display:block;
	position:absolute;
	right:-300px;
	top:-100px;
	width:100px;
	height:50px;
	color:#fff;
	background:#000 url(../images/pagetop_arw.png) no-repeat 0 0;
	background-size:50px 50px;
	text-indent:100%;
	overflow:hidden;
	white-space:nowrap;
	z-index:10000;
	opacity:0;
	position:fixed;
	/*bottom:200px;*/
}


/*　リード
----------------------------------------------------------------*/

/* read　*/
.read {
	padding-top:15px;
}
.top .read{
	margin:0 auto;
	margin-bottom:-30px;
	width:90%;
	height:auto;
	text-align:left;
}
.top .read h2 {
	font-size:90%;
	line-height:1.3;
	font-weight:bold;
	height:auto;
}
.read h2 span {
	display:inline;
}

/* main visual */
.main_visual {
	padding-top:0;
	width:100%;
}
.main_visual .grid_12_col4 .grid_3 {
	width:100%;
	float:none;
	margin:0;
}
.main_visual .section {
	width:100%;
	overflow:hidden;
	margin:0;
	margin-top:30px;
	background:url(../images/midashi_bar_bg.gif) repeat-x left top;
	background:none;
}
.main_visual h3 {
	border:0;
	font-size:130%;
	line-height:1.2;
	margin:0 0 8px 0;
}
.main_visual h3 a {
	display:block;
	text-decoration:none;
	background:url(../images/icon/arw_red.gif) no-repeat 0 center;
	padding-left:20px;
}

.main_visual p {
	font-size:90%;
	line-height:1.4;
	margin:0;
	padding-bottom:10px;
	/*background:url(../images/noize_bar_1px.gif) repeat-x top left;
	background:url(../images/noize_bar_1px.gif) repeat-x top left;*/
	background-image:url(../images/noize_bar_1px.gif),url(../images/noize_bar_1px.gif);
	background-repeat:repeat-x,repeat-x;
	background-position:top left,bottom left;
}
.main_visual .ph {
	width: 100%;
	height: auto;
	text-align:center;
	margin:0;
}
.main_visual .ph img {
	width:80%;
}



.to_contact_btn {
	width:auto;
	margin:20px 10px;
}
.to_contact_btn a {
	display:block;
	text-decoration:none;
	font-size:16px;
	line-height:20px;
	font-weight:bold;
	padding:15px 20px;
	border-radius:5px;
}
.page .to_contact_btn {
	width:auto;
	margin:10px 10px;
}

/*　メイン
----------------------------------------------------------------*/
.main_container h3 {
	font-size:150%;
	margin-bottom:10px;
}
.main_container .sub_section {
	margin-top:50px;
}

/*===============================================================
	エントリ用
===============================================================*/

.main_container .gridwrp_12 .gridwrp_8,
.main_container .gridwrp_12 .gridwrp_8 .grid_3,
.main_container .gridwrp_12 .gridwrp_8 .grid_5 {
	width:100%;
}

.entry {
	padding-top:10px;
	padding-bottom:10px;
	
	background:url(../images/noize_bar_1px.gif) repeat-x bottom left;
	margin-bottom:20px;
}

.entry .ph {
	border:solid 1px #fff;
	background:rgba(255,255,255,0.4);
	padding:10px;
	margin-top:0;
}

.entry .title {
	
	margin-top:10px;
}
.entry p {
	margin-top:10px;
	line-height:1.4;
}

.entry .date p {
	font-weight:bold;
	color:#756C61;
	font-size:12px;
	line-height:25px;
	margin:0;
	padding-top:0px;
}

.entry .gridwrp_8 {
	padding-bottom:10px;
}

.detail h2.headline {
	margin-top:15px;
	font-size:150%;
	line-height:1.3;
}

.enrtybody {
	margin-top:30px;
}
.entry_detail {
}


.entry_detail p {
	line-height:1.4;
}
.entry_detail h3 {
	font-size:120%;
}



/* 詳細写真ギャラリー */
#photocontainer {
	padding-bottom:60px;
}

#photocontainer .caption {
	width:100%;
	height:auto;
	position:absolute;
	bottom:37px;
	left:0;
	text-align:center;
	background:#000;
}
#photocontainer .caption p {
	font-size:90%;
	line-height:1;
	color:#fff;
	padding:3px 0 8px 0;
	margin:1px 0 0 0;
}
#photocontainer .selecter {
	width:100%;
	height:40px;
	position:absolute;
	bottom:-10px;
	left:0;
}
#photocontainer .selecter ul li {
	display:block;
	width:40px;
	height:40px;
	float:left;
	margin-right:5px;
	line-height:40px;
}
#photocontainer .selecter ul li a {
	width:40px;
	height:40px;
}

/* 提供サービス項目 */
.servicelist {
	width:100%;
}
.servicelist li {
	float:none;
	width:100%;
}
.servicelist li a {
	margin-top:1px;
}

.page_foot_link {
	width:100%;
	overflow:hidden;
	margin:0 auto;
}
.page_foot_link .btn {
	width:100%;
	clear:both;
	margin-top:10px;
}



/* sub_nav
----------------------------------------------------------------*/
.sub_nav ul li {

}


/*	thumblist
----------------------------------------------------------------*/
.thumblist .gridwrp_4,
.main_container .gridwrp_12 .gridwrp_8 .thumblist {
	width:102.564%;
}
.thumblist .gridwrp_4 .grid_2,
.main_container .gridwrp_12 .gridwrp_8 .thumblist .grid_2 { 
	margin:0;
	width:47.500%; margin-right:2.500%;
	float:left;
}

.thumblist li {
	float:left;
}

.thumblist .ph {
	border:solid 1px #fff;
	background:rgba(255,255,255,0.4);
	padding:5px;
	margin-top:10px;
}

/*	service
----------------------------------------------------------------*/
.service_main_nav {
	margin-top:10px;
	margin-bottom:20px;
}
.service_main_nav .grid_6 {
	float:none;
	clear:both;
	width:100%;
	margin:10px 0 0 0;
	padding:0;
}
.service_main_nav p {
	margin:0 auto;
	margin-top:10px;
	width:90%;
}
.service_main_nav li img {
	margin-bottom:0;
}

.service .service_list .gridwrp_12 {
	margin:0 auto;
}
.service .service_list .gridwrp_12 .grid_4 {
	float:none;
	margin:0 auto;
}
.service .service_list .gridwrp_12 .grid_4 .service_item {
	width:100%;
	overflow:hidden;
	margin:0;
	margin-top:1px;
}
.service .service_list .gridwrp_12 .grid_4 .ph {
	width:50px;
	float:left;
	margin:0;
	padding:5px 0;
}
.service .service_list .gridwrp_12 .grid_4 a {
	margin:0;
	padding:0;
	color:#2D89DC;
	font-weight:bold;
}
.service .service_list .gridwrp_12 .grid_4 .ph img {
	margin:0;
	padding:0;
}
.service .service_list .gridwrp_12 .grid_4 p {
	text-align:left;
	margin:0;
	margin-left:60px;
	line-height:1.2;
	padding:13px 10px 7px 0;
}

/* サムネイル　*
.service_detail .grid_12_col6,
.service_detail .gridwrp_4,
.service_detail .gridwrp_8 {
	width:102%;
}

.service_detail .grid_12_col4 .grid_3,
.service_detail .grid_12_col6 .grid_2 ,
.service_detail .gridwrp_4 .grid_2 ,
.service_detail .grid_2,
.service_detail .grid_3 {
	width:48%;
	margin-right:2%;
	float:left;
}

/* yoko *
.landscape .grid_12_col6 .grid_2 ,
.landscape .gridwrp_4 .grid_2 ,
.landscape .service_detail .grid_2,
.landscape .service_detail .grid_3  {
	width:30.5%;
	margin-right:3%;
	float:left;
}



/*===============================================================
	トップページ
===============================================================*
.top .read {
	margin:20px auto 10px auto;
	background:url(../images/read_bg_700x80.gif) no-repeat center center;
	height:80px;
}
.top .read h2 {
	line-height:30px;
}



/*===============================================================
	サービス一覧
===============================================================*/
.service_main .read {
	
	background:none;
	width:90%;
	margin:0 auto;
	height:auto;
	text-align:left;
	padding-bottom:10px;
	padding-top:15px;
	
}
.service_main .read h2 {
	font-size: 150%;
	line-height:1.2;
}
.service_main .read p {
}
.service_main p {
	margin:5px 0 0 0 ;
}

/*===============================================================
	サービス詳細 メインビジュアル
===============================================================*/

.service .main_visual {
	margin-top:20px;
}

.service .main_visual .layer01 {
	position:absolute;
	top:0;
	left:0;
}
/*===============================================================
	サービス詳細ページ
===============================================================*/

.headline {
	margin-top:30px;
}


.service .item {
	padding:5px;
	margin:0;
}

.service .item h4 {
	font-size:90%;
	line-height:1.2;
	margin-bottom:2px;
	padding-top:10px;
	font-weight:bold;
	text-align:center;
	color:#999;
}

.service_read {
	padding-bottom:50px;
}
.service_read h2 {
	font-size: 170%;
	line-height:1.2;
	font-weight:bold;
	padding-top:15px;
	padding-bottom:0;
}

.skill {
	font-size:50%;
	line-height:1;
}

.service_read p {
	padding-top:0px;
}

.service_read .headline p {
	font-size:14px;
	line-height:20px;
	padding-top:10px;
}


.service_detail {
	padding-bottom:50px;
}
.service_detail .headline {
	background:url(../images/midashi_bar_bg.gif) repeat-x left top;
	background-size:100% 2px;
	padding-bottom:10px;
	padding-top:0px;

}

.service_detail .headline h3 {
	font-size: 130%;
	line-height:1.2;
	padding-top:20px;
	padding-bottom:0px;
	margin:0;
	
}
.service_detail .headline p {
}
.service_detail .caption {
	margin-top:20px;
	padding-bottom:20px;
	font-size: 100%;
	line-height:1.4;
}

.service_detail .gridwrp_12 .gridwrp_8,
.service_detail .gridwrp_12 .gridwrp_6,
.service_detail .gridwrp_12 .gridwrp_4 {
	width:102.564%;
}
.service_detail .gridwrp_12 .gridwrp_8 .grid_2,
.service_detail .gridwrp_12 .gridwrp_6 .grid_2,
.service_detail .gridwrp_12 .gridwrp_4 .grid_2 { 
	margin:0;
	width:47.500%; margin-right:2.500%;
	float:left;
}

.service_category p {
	margin:0;
	padding-bottom:20px;
}
.service_category p strong {
	display:block;
	font-size:200%;
}
.webdesign .service_category p {
	font-family: 'Monoton', cursive;
	padding-top:10px;
}
.webdesign .service_category p strong {
	font-size:250%;
}
.cms .service_category p {
	padding-top:0px;
	font-size:200%;
	font-family: 'Caesar Dressing', cursive;
}
.cms .service_category p strong {
	font-size:100%;
}
.programming .service_category p {
	padding-top:5px;
	font-size:270%;
	font-family: 'Faster One', cursive;
	line-height:0.7;
}
.programming .service_category p strong {
	font-size:200%;
}

.graphic .service_category p {
	padding-top:10px;
	font-size:150%;
	line-height:1;
	font-family: 'Nosifer', cursive;
}
.graphic .service_category p strong {
	font-size:160%;
}

/*===============================================================
	テーブル
===============================================================*/


.datatable dt {
	padding:10px 0 0 0;
	float:none;
	width:100%;
	font-size:130%;
}
.datatable dd {
	padding:5px 0 10px 0;
	float:left;
	width:100%;
}
.datatable input ,
.datatable textarea {
	width:100%;
	box-sizing:border-box;
}
.datatable dl .red {
	font-size:11px;
	color:#FF6283;
	font-weight:normal;
}

.datatable .radio li {
	line-height:1.2;
	padding-bottom:10px;
	width:100%;
	overflow:hidden;
	background:#4A3B3A;
	color:#F8F5EF;
	padding:10px;
	box-sizing:border-box;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.datatable .radio li label {
	box-sizing:border-box;
}
/*
.datatable .radio li label input {
	display:block;
	float:left;
	width:8%;
	margin:0;
	padding:0;
}
.datatable .radio li label span {
	float:right;
	width:88%;
	display:block;
}
*/
.datatable .radio li label input {
	display:block;
	float:left;
	width:8%;
	margin:0;
	padding:0;
}
.datatable .radio li label span {
	display:block;
	margin-left:20px;
}


.datatable .submit input {
	width:50%;
	margin:1em auto;
}

.entry_detail {
	padding:10px;
	background:url(../images/entry_detail_bg.gif) repeat 0 0;
}


}
/*===============================================================
	For SP	ここまで
===============================================================*/