/*************************************************************************
 *.common styles
 *								encoding:utf-8   copyright:acari itagaki
 * resume: 1.00.00  2017-01-07  + create document.
 ************************************************************************/

/*************************************************************************
 *..Font styles
 ************************************************************************/

@font-face	{ font-family:'Serlio';/* 自分がわかる好きなフォント名つける */
				src:url('../fnt/SerlioLTStd.eot') format('embedded-opentype');/* IE用 */
				src:local('Serlio LT Std Regular'),/* フォント名入れる PCに元々このフォントがある人用*/
					url('../fnt/SerlioLTStd.eot?iefix') format('embedded-opentype'),/* IE用 */
					url('../fnt/SerlioLTStd.woff') format('woff'),/* firefox用 */
					url('../fnt/SerlioLTStd.otf') format('opentype'),/* googlecrome用 ttf truetype*/
					url('../fnt/SerlioLTStd.svg#svgFontName') format('svg'); }/* スマホ用 *
/*************************************************************************
 *..Plugin styles
 ************************************************************************/

/*a.pagetop			{ background-color:rgba(204,219,249,.8); 
					  color:#668cdb; padding-top:9px; font-size:1rem;
					  border-radius:50%; box-shadow:0 0 2px 1px rgba(255,255,255,1),0 0 1px 1px rgba(255,255,255,.7); }*/


/*************************************************************************
 *..Default styles
 ************************************************************************/
img					{ width:100%; }
.container       {/*margin:-20px auto 0;*/ /*border:1px solid #f00;*/} /*ハンバーガー母体*/

body	{font-family:/* 'Meiryo', */'Hiragino Kaku Gothic ProN',
		'MS P Gothic','Helvetica','Verdana','Arial',sans-serif;
        background-color:#f2f2f2;}
.master/*,.clearfix*/		{margin:auto;  /*border:1px solid #f00; */}
#header		{/*display: block;*/background-color:#c9f7ec;/*margin:0 auto; */
			/*text-align: left;*//*border:1px solid #ff0;*/}

#footer    {background-color:#dcdcdc;display:block;
			font-family:'Meiryo','Hiragino Kaku Gothic ProN','MS P Gothic','Helvetica','Verdana','Arial',sans-serif;/*border:1px solid #ff0;*/}
#footer>*	{vertical-align:middle;/*border:1px solid #f00;*/}
#footer1	{display:inline-block;/*border:1px solid #f0f;*/}/*横並びだからinline-block*/
#footer1>a	{display:inline-block;}
#footer2	{color: #fff;}	

#design,#art,#about	{background-color:rgba(201,247,236,0.8);}/*カーソルOffで出てきてない状態のバック色0.8=80％透明かける
*/
div #mo1 a,div #mo2 a,div #mo3 a 	{color: #898989;} 

/******************************************************
						 Desktop
*/
@media screen and (min-width:769px ){/*デスクトップサイズ 最大値のみ */
.large			{ display:block; }
.small,.tab,#trigger,.block	{ display:none; }    
/* img[src$=".svg"]		{width:100%;}IEのバグ回避 svg画像はめいっぱい伸ばす*/
.container       {width: 960px; margin:-20px auto 0; /*border:1px solid #f00;*/}    
    
.master		    {width:960px;margin:0 auto;/*border:1px solid #f00;*/}
#header		    {width:960px;height:150px;display:table; margin:0 auto;/*border:1px solid #ff0;*/}/*headerの幅*/ 
#header1        {display:table-cell;}
#header1 a		{width:256px;height:91px;margin:30px 0 10px 50px; text-align: left;/*border:1px solid #f00;*/ } 
#header2		{width:600px; text-align: left; display:table-cell; position:relative; /* border:1px solid #f00; */}
#header2>*		{position:absolute;vertical-align: top;/*border:1px solid #ff0;*/}/* inline-blockは効かない（負ける）*/    
    
#footer         {width:960px;height:110px;margin:0 auto;/*border:1px solid #ff0;*/}/* footer幅と高さとmargin*/
#footer1	    {width:960px;padding:10px 100px 5px 410px;/*border:1px solid #f0f;*/}/*横並びだからinline-block*/
#footer1>a	    {padding-left:10px;}
#footer2	    {padding:28px 160px 0 330px;font-size: 11px;letter-spacing: 1px;}	
      
/* 以下カーソルOff  出てきてない状態*/
#design>div	    {display:none;width:137px;height:200px;   /*border:1px solid #ff0; */}
    /* 隠れているグリーンのベースの大きさの基準になる。IEだとフォントの違いによりサイズが合わないのでchromeに合わせます。*/
#art>div	    {display:none;width:140px;height:140px;  /*border:1px solid #f00;*/ }
#about>div	    {display:none;width:75px;height:80px; /*border:1px solid #ff0;*/ }
    
#home	        {/*left:0; */top:75px; /*border:1px solid #ff0;*/}/* 左始まり */
#design	        {/*left:0;*/ top:75px; margin-left:95px; padding:0 30px 0 30px;/*border:1px solid #ff0;*/}
#art	        {/*left:0;*/ top:75px; margin-left:220px; padding:0 30px 0 30px;/*border:1px solid #ff0;*/}
#about	        {/*left:0;*/ top:75px; margin-left:310px; padding:0 30px 0 30px;/*border:1px solid #ff0;*/}
#contact	    {/*left:0;*/ top:75px; margin-left:450px; /*border:1px solid #ff0;*/}

/* 以下カーソルOn(hover)  出てきた状態*/
#design:hover>div,#art:hover>div,#about:hover>div	{display:block;font-size:15px; /*border:1px solid #ff0;*/}
/* display:none;にしているものがhoverすると○○menuが出る（display:block;により） */
#design:hover>div>ul,#art:hover>div>ul,#about:hover>div>ul
	{margin-top:30px;letter-spacing:1px;line-height:180%;color:#898989;/*border:1px solid #ff0;*/}/*行間*/
#gnav1:hover,#gnav2:hover,#gnav3:hover,#gnav4:hover,#gnav5:hover		
{border-bottom:2px solid #898989;padding-bottom:10px;/*border:1px solid #ff0;*/}/*アンダーバー*/
#design>div>ul>li		{width:130px;height:25px;margin-bottom:5px; /*border:1px solid #f00;*/ }/*隠れmenu文字の長さ*/
#art>div>ul>li		{width:150px;height:25px;margin-bottom:5px; /*border:1px solid #f00;*/ }
#about>div>ul>li		{width:115px;height:25px;margin-bottom:5px; 
                        font-family:/* 'Meiryo', */'Hiragino Kaku Gothic ProN',
		                'MS P Gothic','Helvetica','Verdana','Arial',sans-serif;/*border:1px solid #f00;*/ }
.nav>div>ul>li>a        {font-family:/* 'Meiryo', */'Hiragino Kaku Gothic ProN',
		                'MS P Gothic','Helvetica','Verdana','Arial',sans-serif;}
.nav>div>ul>li>a:hover		{color: #898989; border-bottom:0.14em solid #898989; padding-bottom:1px;
                            font-family:/* 'Meiryo', */'Hiragino Kaku Gothic ProN',
		                    'MS P Gothic','Helvetica','Verdana','Arial',sans-serif;/*border:1px solid #ff0; */}/*アンダーバー*/
   
#about>div>ul>li>a:hover		{color: #898989;border-bottom:0.14em solid #898989; 
                                padding-bottom:1px;/*border:1px solid #ff0; */}/*アンダーバー*/  
    
}
/******************************************************
						 Tablet 
*/
@media screen and (max-width:768px ) and ( min-width:481px ){/* タブレットサイズ 最大値最小値 */
.tab			{ display:block; }
.large,.small,#trigger,.block	{ display:none; } 
.container       {width: 100%; margin:-3% auto 0;/*border:1px solid #f00;*/}    
    
body		    {font-size:14px;}/*headerのfontサイズ*/
.master			{width:100%; margin:0 auto;/*border:1px solid #f00;*/ }
#header         {display: table;width:100%;height:120%; margin:0 auto;/*border:1px solid #f00;*/}     
#header1      {display: table-cell;width:120px;/*height:20%;*/padding: 15px 0 15px 10px ; text-align: left;                      /*border:1px solid #f00;*/} 
#header2    {display: table-cell;width:80%;height:10%;left: -13%;top:25px;                                                      position:relative; /*border:1px solid #f0f;*/} 
#header2>*		{position:absolute;/*height:100%;width:100%;*/vertical-align: top; /*border:1px solid #ff0;*/}/* inline-blockは効かない（負ける）*/     
#footer         {width:100%;height:100%;margin:0 auto;/*border:1px solid #f00;*/}
#footer1        {width:100%;padding:0 0 2% 38%;/*border:1px solid #f00;*/}
#footer1>a/*>:not(first-child)*/ 		{margin-right:1%;/*border:1px solid #ff0;*/}
                    /* ビューポート（表示サイズ）可変する時に一個だけぽこっと落ちるとかないかチェックしながら%決める */
#footer2	    {padding:3% 0 1% 32%;font-size:1.1vw;letter-spacing: 0.1vw;/*border:1px solid #f0f;*/}
    
/* 以下カーソルOff  出てきてない状態*/
#design>div	    {display:none;width:170px;height:200px;/*border:1px solid #ff0;*/}/* 隠れているグリーンのベースの存在が大事大きさここで決める */
#art>div	    {display:none;width:170px;height:140px;/*border:1px solid #ff0;*/}
#about>div	    {display:none;width:107px;height:80px;/*border:1px solid #ff0;*/}
#home	        {left:0; margin:8px 0 0 90px;padding-left:40px; height:140px; /*border:1px solid #0ff;*/} /* 左始まり */
#design	        {left:0; margin:8px 0 0 200px;padding-left:40px;}
#art	        {left:0; margin:8px 0 0 310px;padding-left:40px;}
#about	        {left:0; margin:8px 0 0 400px;padding-left:40px;}
#contact	    {left:0; margin:8px 0 0 510px;padding-left:40px;}
    
#gnav1 {height: 200%}
    
/* 以下カーソルOn(hover)  出てきた状態*/
#design:hover>div,#art:hover>div,#about:hover>div	{display:block;font-size:15px; /*border:1px solid #ff0;*/}
/* display:none;にしているものがhoverすると○○menuが出る（display:block;により） */
#design:hover>div>ul,#art:hover>div>ul,#about:hover>div>ul
	{margin-top:30px;letter-spacing:1px;line-height:180%;color:#898989;/*border:1px solid #ff0;*/}/*行間*/
#gnav1:hover,#gnav2:hover,#gnav3:hover,#gnav4:hover,#gnav5:hover		
{border-bottom:2px solid #898989;padding-bottom:10px;}/*アンダーバー*/
#design>div>ul>li		{width:160px;height:25px;margin-bottom:5px; /*border:1px solid #f00;*/ }/*隠れmenu文字の長さ*/
#art>div>ul>li		{width:215px;height:25px;margin-bottom:5px;/*border:1px solid #f00;*/ }
#about>div>ul>li		{width:115px;height:25px;margin-bottom:5px;
                        font-family:/* 'Meiryo', */'Hiragino Kaku Gothic ProN',
		                'MS P Gothic','Helvetica','Verdana','Arial',sans-serif;/*border:1px solid #f00;*/ }
.nav>div>ul>li>a        {font-family:/* 'Meiryo', */'Hiragino Kaku Gothic ProN',
		                'MS P Gothic','Helvetica','Verdana','Arial',sans-serif;}
.nav>div>ul>li>a:hover		{color: #898989; border-bottom:0.14em solid #898989; padding-bottom:1px;
                            font-family:/* 'Meiryo', */'Hiragino Kaku Gothic ProN',
		                    'MS P Gothic','Helvetica','Verdana','Arial',sans-serif;/*border:1px solid #ff0; */}/*アンダーバー*/
   
#about>div>ul>li>a:hover		{color: #898989;border-bottom:0.14em solid #898989; 
                                padding-bottom:1px;/*border:1px solid #ff0; */}/*アンダーバー*/    
    
 }   
    
    
/******************************************************
						 Smartphone 
*/

@media screen and ( max-width:480px ){
.large,.tab			{ display:none; }
.small,#trigger,.block		{ display:block; }
.container       {width: 100%; margin:-6% auto 0;  /*border:1px solid #f00;*/}
    
body		{font-size:100%;}   
.master			{width:100%;/*border:1px solid #f00;*/ }    
#header           {/*width:100%;height:120px;*/ /*display: block;*/ /*border:1px solid #f0f;*/}  
#header1 a       {width:30%;margin:1.5% 0 0 70%;/*border:1px solid #f00;*/} 
div#header1     {width:100%;height: 55px; background-color: #c9f7ec;position: absolute;}
#header2        {display:none;}    
#footer         {width:100%;height:100%;margin:0 auto;}
#footer1        {width:100%;padding:0 0 4% 3.5%;/*border:1px solid #f00;*/}
#footer1>a/*>:not(first-child)*/ 		{margin-right:4%;/*border:1px solid #ff0;*/}
                    /* ビューポート（表示サイズ）可変する時に一個だけぽこっと落ちるとかないかチェックしながら%決める */
#footer2	    {width:100%;padding:5% 0 2% 23%;font-size:2.1vw;letter-spacing: 0.1vw;/*border:1px solid #f0f;*/}  
    
    
    
}