@charset "UTF-8";
/* CSS Document */


/*上部の余白を消して初期化*/

*{
	margin:0;
	padding:0;
}

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

ページ全体の設定

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

html {
	overflow: scroll;
}

/*
google chorome対策　ホバー時のマウスポインタを指へ変更
*/
a  {
	text-decoration: none;
	border:none;
	color:inherit;
	cursor:url("../img/GnaviCursor.png"),pointer;
}
/*
ここまで
*/


/* マウスオーバー */
a:hover img {
opacity: .5;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);	/* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}
 
a img {
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}

/* テキストリンクカラー設定 */
a {
	color:#601986;
}


/* 反転背景設定 */
::selection {
    background: #ffff00; /*背景色*/
}
::-moz-selection {
    background: #ffff00; /*背景色*/
}


body{
	background-color:#FFFFFF;
}

/*画像立て並べ　マージン削除*/
img { vertical-align: bottom;}

input[type="text"] {
  outline: none;
 }

input[type="email"] {
  outline: none;
 }

input[type="submit"] {
 	cursor: pointer;
 	outline: none;
 }

input[type="textarea"]{
 	cursor: pointer;
 	outline: none;
 }

input[type="checkbox"]{
 	cursor: pointer;
 	outline: none;
 }

input[type="text"]:focus {
  outline: none;
 }

input[type="email"]:focus {
  outline: none;
 }

input[type="submit"]:focus {
  outline: none;
 }

input[type="textarea"]:focus {
 	outline: none;
 }

input[type="checkbox"]:focus {
 	outline: none;
 }


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

Typography

****************************/
.typo01{
	font-family:
	YuGothic,    	/* Mac */
	'Yu Gothic', 	/* Win */
	sans-serif;
	font-size: 13px;
	font-weight:100;
	letter-spacing:1px;
	line-height:18px;
}	

.typo02{
	font-family: Rockwell,Courier Bold,Courier,Georgia,Times,Times New Roman,serif;
 	font-size: 11px;
	font-weight:100;
	letter-spacing:1px;
	line-height:22px;
}	

.typo03{
	font-family: Rockwell,Courier Bold,Courier,Georgia,Times,Times New Roman,serif;
 	font-size: 12px;
	font-weight:700;
	letter-spacing:16px;
	line-height:17px;
}	

.typo04{
	font-family: Rockwell,Courier Bold,Courier,Georgia,Times,Times New Roman,serif;
 	font-size: 9px;
	font-weight:100;
	letter-spacing:1px;
	line-height:14px;
}	

.typo05{
	font-family:
	YuGothic,    	/* Mac */
	'Yu Gothic', 	/* Win */
	sans-serif;
	font-size: 13px;
	font-weight:100;
	letter-spacing:1px;
	line-height:25px;
}	

.typo06{
	font-family: Rockwell;
 	font-size: 11px;
	font-weight:100;
	letter-spacing:1px;
	line-height:26px;
}	


.typo07{
	font-family: Rockwell;
 	font-size: 11px;
	font-weight:700;
	letter-spacing:2px;
	line-height:17px;
}	


.typo_caption{
	font-family:
	YuGothic,    	/* Mac */
	'Yu Gothic', 	/* Win */
	sans-serif;
	font-size: 11px;
	font-weight:100;
	letter-spacing:1px;
	line-height:20px;
}	


.typo_sns{
	font-family: Rockwell,Courier Bold,Courier,Georgia,Times,Times New Roman,serif;
 	font-size: 11px;
	font-weight:100;
	letter-spacing:1px;
	line-height:30px;
}	



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

ローディング画像

****************************/
#loader-wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #FFF;
    z-index: 10000;
	display: flex;
	justify-content: center;
	align-items: center;
}

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

レイアウトデザイン

****************************/
header{
	margin:0 auto;
	width:100%;
	height:90px;
/*	background-color:blue;
*/}

#contents{
	margin:0 auto;
	width:1180px;
	height:auto;
	/*background-color:green;*/
}

#contents:after{
	content: "";
	display:block;
	clear:both;
}


#left{
	position:fixed;
	z-index:100;
	margin:0 auto;
	width:160px;
	height:auto;
	float:left;
	/*background-color:blue;*/
}

#center{
	margin:0 auto;
/*	width:700px;*/
	width:880px;
	height:auto;
	margin-right:80px;
	margin-left:240px;
	float:left;
	font-size:0;
/*	background-color:red;
*/}

#right{
	margin:0 auto;
	width:160px;
	height:auto;
	float:left;
/*	background-color:blue;
*/}




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

arrow u.i. start

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

/* ボタン共通設定 */
.btn06{
    /*矢印の基点とするためrelativeを指定*/
	position: relative;
	/*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	color:#000000;
	outline: none;
	/*アニメーションの指定*/
	transition: ease 1s;
}

.btn06:hover{
	opacity: .5;
	-webkit-opacity: .5;
	-moz-opacity: .5;
	filter: alpha(opacity=50);	/* IE lt 8 */
	-ms-filter: "alpha(opacity=50)"; /* IE 8 */
}


/* 矢印が右に移動 */

.btnarrow1::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
	  position: absolute;
    top:20%;
    right: -33px;
	
    /*矢印の形状*/
    width: 5px;
    height: 5px;
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    transform: rotate(45deg);
    /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow1:hover::after{
    right: -63px;
}



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

arrow u.i. end

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



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

レフトエリア

****************************/
/*
logoエリア
*/
.logoArea{
	margin:0 auto;
	height:auto;
	text-align:center;
}

.logoArea img {
	width:75%;
}

/* ハンバーガーメニューは、PCサイズは非表示（1024px以上）*/
@media screen and (min-width: 1024px){
	#gnav{
		display:none;
	}
}

/*
Gナビデザイン
*/
#GnaviNomal{
	margin:0 auto;
	width:160px;
	height:auto;
	margin-top:40px;
	text-align:center;
/*	background-color:red;
*/}

li{ 
	display: inline; 
	padding: 0px; 
	margin: 0px; 
}

.height_edit {
	padding-bottom:5px;
}


#left_media{
	position:relative;
	width:160px;
	padding-top:0px;
	/*margin-top:15px;*/
	margin:0 auto;
}

#right_media{
	padding-top:10px;
	/*margin-top:15px;*/
}

#media_area_margin {
/*		padding-bottom:120px;	
*/		
	margin-top:40px;	

}


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

線が飛び出すu.i.

**************/
#media_area_margin a::after {
	position: absolute;
	left: 40px;
	content: '';
	width: 50%;
	height: 1px;
	background: #000000;
	bottom: 34px;               /*アンダーラインがaタグの下端から現れる*/
	transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
	transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
	transition: transform 1s; /*変形の時間*/
}

#media_area_margin a:hover::after {
	transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
}



#SNSdesign01 a::after {
	position: absolute;
	left: 48px;
	content: '';
	width: 40%;
	height: 1px;
	background: #000000;
	
	bottom: 35px;               /*アンダーラインがaタグの下端から現れる*/
	
	transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
	transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
	transition: transform 1s; /*変形の時間*/
}

#SNSdesign01 a:hover::after {
	transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
}



#SNSdesign02 a::after {
	position: absolute;
	left: 46px;
	content: '';
	width: 43%;
	height: 1px;
	background: #000000;
	
	bottom: 4px;               /*アンダーラインがaタグの下端から現れる*/
	
	transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
	transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
	transition: transform 1s; /*変形の時間*/
}

#SNSdesign02 a:hover::after {
	transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
}



/*
GナビSNS部分
*/
/*
#naviSNS{
	position:relative;
	width:160px;
	padding-top:20px;
	margin-top:15px;
	margin:0 auto;
	text-align:center;
	display: flex;
	align-items: center;
	justify-content: center;
}

#naviSNS:after {
	content: "";
	display:block;
	clear:both;
}

#sns01,#sns02,#sns03,#sns04{
	width:35px;
	
	float:left;
	background-color:red;
}

#sns01{
	padding-left:14px;
}

#sns01,#sns02,#sns03{
	padding-right:15px;
}
	
#SNSiconFBSize{
	width:10px;
}

#SNSicon_note_Size{
	width:23px;
	height:26px;
}

#SNSiconInstaSize{
	width:20px;
	
}

#SNSicon_twitter_Size{
	width:20px;
}
*/


/*
Gナビsnsはすべてテキストへ変更
*/
#typeSNSdesign {
/*	margin-top : 30px;*/
}

/*
Gnaviホバー時のマウスポインタを変更
*/
/*#GnaviNomal li a:hover{
	cursor:url("../img/GnaviCursor.png"),pointer;
}
*/

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

センターエリア

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

/* 制作事例エリア上部マージン */
#common_result_area {
	margin-top:180px;
}


/* 制作事例横並び処理start */
#list-box {
	overflow: hidden;
/*	margin-top:50px;
*/
/*	margin-top:20px;*/
	margin-top:5px;
}
 
#list-box ul {
	margin: -5px -5px 0 0; /*ネガティブマージン*/
	padding: 0;
}
 
#list-box li {
	overflow: hidden;
	float: left;
/*
	width: 230px;
	height: 230px;
*/
	width: 290px;
	height: 290px;
	margin: 5px 5px 0 0;
	position: relative;
	transition: .6s;
}

#list-box li img {
	width: 100%;
}
/* 制作事例横並び処理end */


 /* 事例コンテンツ効果的js -start- */
.list-mv{
	transform: scale(0, 0) rotateY(180deg);
	-webkit-transform: scale(0, 0) rotateY(180deg);
}
.mv{
	transform: scale(1, 1) rotateY(360deg);
	-webkit-transform: scale(1, 1) rotateY(360deg);
}
 /* 事例コンテンツ効果的js -end- */


/* 制作事例キャプション Start */
#list-box li .caption {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    width: 100%;
	height:100%;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
	-webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
	justify-content: center; /* 横方向中央揃え */
	text-align:center;
	color:#FFFFFF;
	background:#902829;	
	opacity:		0;	/* 表示させない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transform:	rotateY(-180deg);
	transform:		rotateY(-180deg);
	-webkit-transition:	all 0.6s ease;
	transition:	all 0.6s ease;
 }

#list-box li:hover .caption {
	-webkit-transform:	rotateY(0deg);
	transform:		rotateY(0deg);
	opacity:		1;	/* ホバーで表示する */
}	
	
/* 制作事例キャプション End */

/* お問い合わせエリア */
#FlowArea{
	margin:0 auto;
	width:700px;
	height:auto;
	margin-top:220px;
/*	background-color:green;
*/}


#FlowArea:after{
	content: "";
	display:block;
	clear:both;
}

#FlowAreaL{
	width:490px;
	float:left;
}

#FlowAreaCdummy{
	width:70px;
	height:20px;
/*	background-color:red;
*/	float:left;
}

#FlowAreaR{
	width:140px;
	heght:auto;
/*	background-color:green;
*/	float:left;
}

#FlowTt{
	height:60px;
/*	background-color:red;
*/}

#FlowTt img {
	width:65%;
}

#flow_pc {
	display:inline;
}

#flow_sp{
	display: none;	
}

#Flow img {
	width:490px;
}

#FlowTxt {
	height:auto;
	/*	background-color:red;
	*/	
	padding-top:60px;
	/*	縦書き	*/
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
  }

.BtnArea{
	margin:0 auto;
	margin-top:60px;
	width:100%;
/*	background-color:blue;
*/	text-align:center;
}


/*	
各サイト内リンクボタン
*/


#pagerarea_branding, #pagerarea_greeting, #pagerarea_about, #pagerarea_brandingimage, .pagerarea_designworks {
	display:flex;
	border-bottom:solid #000000 1px;
	padding-bottom:10px;
	margin-top:90px;	
}

#pagerarea_branding {
    width: 215px;
}

#pagerarea_greeting {
	width: 148px;
}

#pagerarea_about {
	width: 260px;
}

#pagerarea_brandingimage{
	width:265px;
	margin-top: 50px;
}


.pagerarea_designworks {
	width:185px;
	margin-top: 50px;
	margin-bottom: 60px;
}

.pagericon{
	position: relative;
	margin-right:10px;
	bottom:5px;
}




/*	
各カテゴリピクトグラムエリア
*/

.category_area {
/*	margin: 0 auto;*/
	width:100%;		
	height:auto;
	margin-bottom:60px;
}

.category_area:after{
	content: "";
	display:block;
	clear:both;
}

.categorybox {
	width:165px;
/*	width:160px; なぜかうまく3カラムにならないのでwidthを調整することでデバッグ */
	height:auto;
	float: left;
	margin-top:60px;
	margin-right:20px;	
	text-align: center;
}

.categorybox img {
	width:60%;
}

.category_icon_margin {
	margin-bottom: 10px;
}

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

固定バナー類

****************************/
#ContactFloat{
	position: fixed;
	right: 0px;
	top:90px;
	z-index:1000;
}

#SPFloat{
	position: fixed;
/*	right: 20px;
*/
	right: 25px;
	top:30px;
	z-index:1000;
	visibility:hidden;
/*	width:40px;
*/
	width:25px;
	text-align:center;
}

.space{
	width:auto;
	height:30px;
}

/* topへ */
#pagetop {
	position: fixed;
	right: 30px;
	bottom:30px;
	z-index:2;
}


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

フッターエリア

****************************/
footer{
	margin:0 auto;
	width:100%;
	height:auto;
	margin-top:140px;
	margin-bottom:80px;
/*	background-color:blue;
*/}

#footertxtArea {
	margin:0 auto;
	height:auto;
	text-align:center;
	/*background-color:red;*/
}

#Copylight{
	margin:0 auto;
	width:700px;
	text-align:center;
	height:auto;
	margin-top:60px;
/*	background-color:red;
*/ 	
	
}

#thanks_letter_margin {
	margin-top:20px;
}





/***************************
ライトエリア
****************************/
	
	#PressArea li {
		width:160px;
		height:160px;
		overflow:hidden;
	}
	
	#Pressbtn img {
		width:160px;
	}


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

レスポンシブタブレット

****************************/
@media screen and (min-width: 768px) and (max-width: 1023px){

	
	.typo_sns{
		line-height:10px;
	}		

	
	/****************************
	レフトエリア
	****************************/
	header{
		margin:0 auto;
		width:100%;
		height:60px;
	/*	background-color:blue;
	*/}
	
	#left{
		margin:0 auto;
		position:relative;
		width:100%;
		height:auto;
/*		background-color:yellow;
*/		text-align:center;
	}
		
	.logoArea{
		margin:0 auto;
		height:auto;
/*		background-color:yellow;
*/	}
	
	.logoArea img{
		width:15%;
	}
	
	#GnaviNomal{
		display:none;
	}
	
	.GnaviData {
		margin-top:20px; 
	}
	
	.height_edit {
		padding-bottom:12px;
	
	}
	
	#media_area_margin {
		margin-top:50px;
	}
	
	#right_media{
		padding-top:20px;
		/*margin-top:15px;*/
	}

	#left_media{
		padding-top:0px;
		/*margin-top:15px;*/
	}
	
	/*
	GナビSNS部分
	*/
	#typeSNSdesign {
/*		margin-top : 25px;*/
	}

	/****************************
	センターエリア
	****************************/
	#center{
		margin:0 auto;
		width:100%;
		height:auto;
/*		background-color:red;
*/		
	}
	
	#contents{
		margin:0 auto;
		width:100%;
		height:auto;
	/*	background-color:blue;
	*/}
	
	
	/* 制作事例横並び処理start */
	#list-box {
/*		padding-top:50px;
*/
		padding-top:30px;
		width:700px;
/*		width:auto;*/
		margin:0 auto;
	}

	#list-box li {
		width: 230px;
		height: 230px;
	}	
	/* 制作事例横並び処理end */
	
	
	#FlowAreaCdummy{
		width:30px;
	}

	#FlowAreaR{
		width:180px;
	}

	.BtnArea{
		margin-top:40px;
	}
	
	
	
	
	
	/*	
	各カテゴリピクトグラムエリア
	*/
	
	.category_area {
		width:auto;
		height:auto;
		margin-top:0px;
		margin-bottom: 60px;
	}	
	
	.categorybox {
		width:165px;
/*		width:160px; なぜかうまく3カラムにならないのでwidthを調整することでデバッグ*/		
		margin-top: 40px;
		margin-right: 20px;
	}

	
	
	/****************************
	ライトエリア
	****************************/
/*
	#right{
		margin:0 auto;
		width:100%;
		height:auto;
		font-size:0;
		margin-top:50px;
		text-align:center;
	}
*/


	#right{
		display:none;
	}

	
	#PressArea{
		margin:0 auto;
		width:100%;
		height:auto;
	}
			
	#PressTt{
		margin:0 auto;
		width:100%;
		height:40px;
		height:auto;
		text-align:center;
		background-color:#f7f8f8;
	}
	
	#PressArea img {
		display: inline-block;  
		margin:0;  
		padding:0;  
		width:80%;
		margin-top:10%;
	}

/*	#instafeed img {
		display: inline-block;
		margin:0;  
		padding:0;
		width:20%;
		height:auto;

	}
*/
	
	/* 固定バナー */
	#ContactFloat{
		display: none;
	}

	#SPFloat{
		visibility:visible;
		margin-top:30px;
		margin-right:30px;
		text-align:center;	
	}	
	
	/****************
	
	ハンバーガー設定
	
	*****************/
	ul,
	li {
	  margin: 0;
	  padding: 0;
	}
	
	img {
	  max-width: 100%;
	  height: auto;
	}
		
	#gnav {
		overflow: hidden;
		position: fixed;
		top: 0;
		width: 100%;
		height:100%;
		z-index: 99;
		list-style-type: none;
		background-color: #FFFFFF;
	
			/*　z-indexは.wrapper部分でpositionを使用した場合は適切な数字（一番大きい値）に変更*/
		padding-top:50px;
		padding-bottom:50px;
		margin:0 auto;
/*		background-color:blue;
*/	}
	
	#gnav li {
		display:block;
		border:none;
/*		height:50px;*/
		height:40px;
		width:100%;
		margin:0 auto;
		padding-left:1px;
/*		background-color:red;
*/	}
	
	#gnav li a {
	  display: block;
	  text-decoration: none;
	  /* (44-16)/2=14px */
	  padding: .875rem 1rem;
	}
	
	.twocol_tuning_gnavi_margin_sptab{
		margin-bottom:16px;					
	}
	
	
	/*ハンバーガーボタン*/
	.icon-animation {
	  width: 180px;
	  height: 180px;
	  display: block;
	  cursor: pointer;
	  float: right;
	  position: fixed;
	  left: .0;
	  text-align: center;
	  top: 0;
	  z-index:100;
/*	  background-color:red;
*/	}
	
	.icon-animation span {
	  width: 50px;
	  height: 2px;
	  display: block;
	  background: #000000;
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  margin-left: -30px;
	  -webkit-transition: all 0.3s;
	  transition: all 0.3s;
	  -webkit-transform: rotate(0deg);
	  -ms-transform: rotate(0deg);
	  transform: rotate(0deg);
	}
	
	.icon-animation .top {
	  -webkit-transform: translateY(-20px);
	  -ms-transform: translateY(-20px);
	  transform: translateY(-20px);
	}
	
	.icon-animation .bottom {
	  -webkit-transform: translateY(20px);
	  -ms-transform: translateY(20px);
	  transform: translateY(20px);
	}
	
	.is-open .middle {
	  background: rgba(51, 51, 51, 0);
	}
	
	.is-open .top {
	  -webkit-transform: rotate(-45deg) translateY(0px);
	  -ms-transform: rotate(-45deg) translateY(0px);
	  transform: rotate(-45deg) translateY(0px);
	}
	
	.is-open .bottom {
	  -webkit-transform: rotate(45deg) translateY(0px);
	  -ms-transform: rotate(45deg) translateY(0px);
	  transform: rotate(45deg) translateY(0px);
	}
	
}


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

レスポンシブスマホ

****************************/
@media screen and (max-width: 767px){
	header{
		margin:0 auto;
		width:100%;
		height:30px;
	/*	background-color:blue;
	*/}
	
	
	/*************
	Typography
	*************/
	.typo01{
		font-size: 11px;
	}	
	
	.typo02{
		font-size: 9px;
		line-height:18px;
	}	

	.typo03{
		font-size: 10px;
		font-weight: bold;
		letter-spacing:10px;
		line-height:17px;
	}	

	
	.typo04{
		font-size:8px;
		line-height:16px;
	}	
	
	.typo05{
		font-size: 11px;
		line-height:22px;
	}	
	
	.typo_caption{
		font-size: 10px;
		line-height:18px;
	}
	
	.typo_sns{
		font-size: 9px;
		line-height:0px;
	}		
	
	/****************************
	レフトエリア
	****************************/
	#left{
		margin:0 auto;
		position:relative;
		width:100%;
		height:auto;
/*		background-color:blue;
*/		text-align:center;
	}
	
	.logoArea{
		margin:0 auto;
		width:100%;
		height:auto;
	}
	

	.logoArea img{
		width:25%;
	}
	
	
	.GnaviData {
		margin-top:5px; 
	}
	
	#GnaviNomal{
		display:none;
	}
	
	.twocol_tuning_gnavi_margin_sptab{
		margin-bottom:18px;			
	}
/*
	#media_area_margin {
		margin-top:40px;	
	}
*/

	#right_media{
		padding-top:30px;
		/*margin-top:15px;*/
	}

	#left_media{
		padding-top:0px;
		/*margin-top:15px;*/
	}

	
	/*
	GナビSNS部分
	*/
	#typeSNSdesign {
/*		margin-top : 15px;*/
	}


	
	/****************************
	センターエリア
	****************************/
	#center{
		margin:0 auto;
		width:100%;
		height:auto;
/*		background-color:red;*/
		
	}
	
	#contents{
		margin:0 auto;
		width:100%;
		height:auto;
	/*	background-color:blue;
	*/
	}

	/* 制作事例エリア上部マージン */
	#common_result_area {
		margin-top:120px;
	}
	
	/* 制作事例横並び処理start */
	#list-box {
		width:100%;
		margin:0 auto;
/*		background-color:red;
*/	}
	
	#list-box ul {
		margin: 0; /*ネガティブマージン*/
		padding: 0;
	}
	
	#list-box li {
		overflow: hidden;
		float: left;
		width: 50%;
		height: 50%;
		margin: 0;
/*		background-color:green;
*/	}
	
	#list-box li img {
		width: 200%;
	}
	
	/* お問い合わせの流れエリア*/
	#FlowArea{
		margin:0 auto;
		width:100%;
		height:auto;
		margin-top:120px;
/*		background-color:blue;
*/	}
		
	#FlowAreaL{
		width:auto;
		margin:0 auto;
		height:50%;
/*		background-color:red;
*/	}
	
	#FlowAreaCdummy{
		display:none;
	}
	
	#FlowAreaR{
		width:100%;
		margin:0 auto;
/*		background-color:green;
*/		
	}
		
	#FlowTt{
		width:auto;
		height:40px;
		padding-left: 30px;
		padding-right: 30px;
	/*	background-color:red;
	*/}
	
	#Flow{
		width:auto;
		height:auto;
		padding-right:30px;
		padding-left:30px;
	}
	
	#flow_pc {
		display:none;
	}

	#flow_sp {
		display:inline;
	}
	
	
/*
	#Flow img {
		width:100%;
	}
*/
	
	#FlowTxt {
		margin:0 auto;
		writing-mode: lr-tb;
		text-align: justify;
		text-justify: inter-ideograph;
		-ms-text-justify: inter-ideograph;
/*		background-color:red;
*/		padding-top:40px;
		padding-right:30px;
		padding-left:30px;
	}
			
	.BtnArea{
		margin-top:40px;
	}

	
	/*	
	各サイト内リンクボタン
	*/	
	#pagerarea_branding, #pagerarea_greeting, #pagerarea_about, #pagerarea_brandingimage, .pagerarea_designworks {
		margin-top:40px;			
		padding-bottom:8px;
	}
		
	#pagerarea_branding p, #pagerarea_greeting p, #pagerarea_about p, #pagerarea_brandingimage, .pagerarea_designworks p {
		font-size:9px;
	}
	
	#pagerarea_branding {	
		width: 185px;
	}

	#pagerarea_greeting {
		width: 126px;
	}		
	
	#pagerarea_about {
		width: 228px;
	}

	#pagerarea_brandingimage{
		width:230px;
		margin-top: 30px;
		margin-left:30px;
	}
	
	.pagerarea_designworks{
		width:160px;
		margin-bottom: 40px;
	}
	
	.pagericon img{
		width:75%;
	}
	
	.pagericon{
		margin-right:2px;
		bottom:2px;		
	}
	

	
	
	
	/*	
	各カテゴリピクトグラムエリア
	*/
	
	.category_area {
		margin-bottom:50px;		
	}	
	
	.categorybox {
		width: 40%;
		margin-top:30px;
		margin-right:10px;
	}

	.categorybox img {
		width:50%;
	}
	
	
	.categorybox p {
		font-size:10px;
		line-height:18px;		
	}	

	
	
	
		
	/****************************
	ライトエリア
	****************************/
/*
	#right{
		margin:0 auto;
		width:100%;
		height:auto;
		font-size:0;
		margin-top:50px;
		text-align:center;
	}
*/


	#right{
		display:none;
	}

	
	#PressArea{
		margin:0 auto;
		width:100%;
		height:auto;
	}
			
	#PressTt{
		margin:0 auto;
		width:100%;
		height:40px;
		height:auto;
		text-align:center;
		background-color:#f7f8f8;
	}
	
	#PressArea img {
		display: inline-block;  
		margin:0;  
		padding:0;  
		width:80%;
		margin-top:10%;
	}
	
	#Pressbtn {
		margin:0 auto;
		width:100%;
		text-align:center;
		margin-top:20px;
	}
	
	#Pressbtn img {
		width:276px;
	}

	/* 固定バナー */
	#ContactFloat{
		display: none;
	}

	#SPFloat{
		visibility:visible;
	}

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

	フッターエリア
	
	****************************/	

	
	footer	{
		margin-top:60px;
		margin-bottom:60px;
	}
	
	#footertxtArea {
		padding-left:30px;
		padding-right:30px;	
	}
	
	#thanks_letter_margin {
		margin-top:15px;		
	}
	
	#Copylight{
		margin:0 auto;
		width:100%;
		text-align:center;
		height:auto;
		margin-top:40px;

	/*	background-color:red;
	*/ 	
		
	}

	
	
	/****************
	
	ハンバーガー設定
	
	*****************/
	ul,
	li {
	  margin: 0;
	  padding: 0;
	}
	
	img {
	  max-width: 100%;
	  height: auto;
	}
	
	#gnav {
		overflow: scroll;
		position: fixed;
		top: 0;
		width: 100%;
		height:100%;
		/*　z-indexは.wrapper部分でpositionを使用した場合は適切な数字（一番大きい値）に変更*/
		z-index: 99;
		list-style-type: none;
		background: #FFFFFF;
		padding-top:30px;
		padding-bottom:300px;
		margin:0 auto;
/*		background-color:blue;
*/	}
	
	#gnav li {
		display:block;
		border:none;
/*		height:38px;
*/
		height:40px;
		width:100%;
		margin:0 auto;
		padding-left:2px;
	}
	
	#gnav li a {
	  display: block;
	  text-decoration: none;
	  /* (44-16)/2=14px */
	  padding: .875rem 1rem;
	}
	
	
	/*ハンバーガーボタン*/
	.icon-animation {
	  width: 130px;
	  height: 130px;
	  display: block;
	  cursor: pointer;
	  float: right;
	  position: fixed;
	  left: .0;
	  text-align: center;
	  top: 0;
	  z-index:100;
/*	  background-color:red;
*/	}
	
	.icon-animation span {
	  width: 40px;
	  height: 2px;
	  display: block;
	  background: #000000;
	  position: absolute;
	  left: 50%;
	  top: 40%;
	  margin-left: -35px;
	  -webkit-transition: all 0.3s;
	  transition: all 0.3s;
	  -webkit-transform: rotate(0deg);
	  -ms-transform: rotate(0deg);
	  transform: rotate(0deg);
	}
	
	.icon-animation .top {
	  -webkit-transform: translateY(-15px);
	  -ms-transform: translateY(-15px);
	  transform: translateY(-15px);
	}
	
	.icon-animation .bottom {
	  -webkit-transform: translateY(15px);
	  -ms-transform: translateY(15px);
	  transform: translateY(15px);
	}
	
	.is-open .middle {
	  background: rgba(51, 51, 51, 0);
	}
	
	.is-open .top {
	  -webkit-transform: rotate(-45deg) translateY(0px);
	  -ms-transform: rotate(-45deg) translateY(0px);
	  transform: rotate(-45deg) translateY(0px);
	}
	
	.is-open .bottom {
	  -webkit-transform: rotate(45deg) translateY(0px);
	  -ms-transform: rotate(45deg) translateY(0px);
	  transform: rotate(45deg) translateY(0px);
	}
	
}



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

レスポンシブスマホ

****************************/
@media screen and (max-width: 320px) {

	.categorybox {
		width:45%;	
	}
	
	.categorybox p {
		font-size:8px;
		line-height:16px;		
	}

}