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

/******************************************************
						 Desktop
*/
@media screen and (min-width:769px){  

#gnav1		{background-image:url(../img/com/home.png);width:55px;height:27px;background-repeat:no-repeat;text-align:right;padding-right:55px;margin-left:10px;border-bottom:2px solid transparent;/* border:1px solid #f00; */}
#gnav2		{background-image:url(../img/com/design2.png);width:100px;height:29px;background-repeat:no-repeat;text-align:right;padding:0 65px 5px 0;border-bottom:2px solid transparent;/* border:1px solid #f00; */}
#gnav3		{background-image:url(../img/com/art.png);width:29px;height:27px;background-repeat:no-repeat;text-align:right;padding-right:30px;border-bottom:2px solid transparent;}
#gnav4		{background-image:url(../img/com/about.png);width:58px;height:27px;background-repeat:no-repeat;text-align:right;padding-right:60px;border-bottom:2px solid transparent;}
#gnav5		{background-image:url(../img/com/contact.png);width:74px;height:27px;background-repeat:no-repeat;text-align:right;padding-right:74px;border-bottom:2px solid transparent;background-position:0 -27px;}	

#back		{background-color:#fff;width:960px; margin:0 auto;/* border:1px solid #f00; */}    
    
form		{width:520px;height:550px;margin:0 auto;padding-top:100px; /*border:1px solid #f00;*/}
#data		{width:100%;}
#data th,#data td		{padding-bottom:10px;text-align:right;vertical-align:middle;}
#data th		{/*font-weight:bold;*/font-size: 14px;color:#898989;letter-spacing:.04em;padding-right:10px;}
#data td		{width:200px;font-size:12px;letter-spacing:.05em;color:#1b142c;/*border:1px solid #f00;*/}
#data .row>th,#data .row>td		{color:#1b142c;}
#data .row>td		{font-weight:bold;font-size:13px;letter-spacing:.09em;text-align: left;/* border:1px solid #f00; */}
#data input		{width:200px;float: left;}
#data textarea		{width:400px;float:left; margin-top: 10px;resize:none;}
#data .message		{vertical-align:top; padding-top: 10px;/*border:1px solid #f00;*/}
#submit>input		{width:60px;height:32px;float:right;color:#1b142c;letter-spacing:.04em;
                    /*border:1px solid #f00;*/}
#logo {width:566px; height:110px; padding:200px 0 320px;} 
}

/*************************************************************************
 *..Tablet Portrait and SmartPhone Landscape styles
 ************************************************************************/
@media screen and (max-width:768px) and (min-width:481px) {
img				{ width:100%; } 

#gnav1		{background-image:url(../img/com/home.png);width:55px;height:27px;background-repeat:no-repeat;text-align:right;padding-right:55px;margin:30px 0 0 10px;border-bottom:4px solid transparent; /*border:1px solid #f00;*/ }
#gnav2		{background-image:url(../img/com/design2.png);width:100px;height:29px;background-repeat:no-repeat;text-align:right;padding:0 65px 5px 0;border-bottom:2px solid transparent;/* border:1px solid #f00; */}
#gnav3		{background-image:url(../img/com/art.png);width:29px;height:25px;background-repeat:no-repeat;text-align:right;padding-right:30px;border-bottom:4px solid transparent;}
#gnav4		{background-image:url(../img/com/about.png);width:58px;height:27px;background-repeat:no-repeat;text-align:right;padding-right:60px;border-bottom:4px solid transparent;}
#gnav5		{background-image:url(../img/com/contact.png);width:74px;height:27px;background-repeat:no-repeat;text-align:right;padding-right:74px;border-bottom:4px solid transparent;background-position:0 -27px;}	
    
#back		{background-color:#fff;width:100%;height:100%;}    
    
form        {width:80%;height:40%;margin:0 10%;padding:10% 0 18% 0;/*border:1px solid #f00;*/}
#data		{width:100%;}
#data th,#data td		{padding-bottom:1.2%;text-align:right;vertical-align:middle;}
#data th		{/*font-weight:bold;*/font-size: 14px;color:#898989;letter-spacing:.04em;padding-right:10px;}
#data td		{width:80%;font-size:12px;letter-spacing:.05em;color:#1b142c;}
#data .row>th,#data .row>td		{color:#1b142c;}
#data .row>td		{font-weight:bold;font-size:13px;letter-spacing:.09em;text-align: left;/* border:1px solid #f00; */}
#data input		{width:50%;float: left;}
#data textarea		{width:80%;float:left; margin-top: 1.5%;resize:none;}
#data .message		{vertical-align:top; padding-top: 1.5%;}
#submit>input		{width:10%;height:30%;float:right;margin:1% 16%;padding:1% 0;color:#1b142c;
                    letter-spacing:.04em;/*border:1px solid #f00;*/} 
#logo {width:70%; height:20%; padding:30% 0 32%;}    
 
  }   
 

/*************************************************************************
 *..SmartPhone Portrait styles
 ************************************************************************/
@media screen and (max-width:480px) {     
    
#back		{background-color:#fff;width:100%;height:100%;}    
form        {width:120%;height:40%;padding:20% 10% 18% 0%;/*border:1px solid #f00;*/}
#data		{width:80%;}
#data th,#data td		{padding-bottom:2%;text-align:right;vertical-align:middle;}
#data th		{/*font-weight:bold;*/width:30%;font-size: 14px;color:#898989;letter-spacing:.04em;
                padding-right:2%;}
#data td		{width:50%;font-size:12px;letter-spacing:.05em;color:#1b142c;}
#data .row>th,#data .row>td		{color:#1b142c;}
#data .row>td		{font-weight:bold;font-size:13px;letter-spacing:.09em;text-align: left;/* border:1px solid #f00; */}
#data input		{width:100%;float: left;}
#data textarea		{width:100%;float:left; margin-top: 3.5%;resize:none;}
#data .message		{vertical-align:top; padding-top: 1.5%;}
#submit>input		{width:15%;height:30%;float:right;margin:1% 20%;padding:2% 2%;color:#1b142c;
                    letter-spacing:.04em;}    
#logo {width:70%; height:20%; padding:40% 0 32%;}
}