@charset "utf-8";

/* style.css
* * * * * * * * * * * * * * * * * * * * */

/***** reset *****/

/* @group @viewport
--------------------------------------------------------*/

@-webkit-viewport{width:device-width;}
@-moz-viewport{width:device-width;}
@-ms-viewport{width:device-width;}
@-o-viewport{width:device-width;}
@viewport{width:device-width;}

/* @end @viewport */

/* @group nomalize.css */

/*! normalize.css v2.0.1 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/* Corrects `block` display not defined in IE 8/9. */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary {display: block}

/* Corrects `inline-block` display not defined in IE 8/9. */
audio,canvas,video {display: inline-block}

/* Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices. */
audio:not([controls]) {display: none;height: 0}

/* Addresses styling for `hidden` attribute not present in IE 8/9. */
[hidden] {display: none}

/* ==========================================================================
   Base
========================================================================== */

/* 1. Sets default font family to sans-serif.
 * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom. */

html {
    font-family: sans-serif; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/* Removes default margin. */

body {margin: 0}


/* ==========================================================================
   Links
========================================================================== */

/* Addresses `outline` inconsistency between Chrome and other browsers. */
a:focus { outline: thin dotted}

/* Improves readability when focused and also mouse hovered in all browsers. */
a:active, a:hover {outline: 0}

/* ==========================================================================
   Typography
========================================================================== */

html { font-size: 80%; }

/* Addresses `h1` font sizes within `section` and `article` in Firefox 4+, Safari 5, and Chrome. */
h1 {font-size: 2em;}

p,li,dt,dd,th,td,pre{
-ms-line-break: strict;
line-break: strict;
-ms-word-break: break-strict;
word-break: break-strict}

/*
 * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {border-bottom: 1px dotted}

/* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.*/
b,strong {font-weight: bold}

/*Addresses styling not present in Safari 5 and Chrome.*/
dfn { font-style: italic}

/*Addresses styling not present in IE 8/9.*/
mark { background: #ff0;
color: #000}


/* Corrects font family set oddly in Safari 5 and Chrome.*/
code, kbd, pre, samp {
font-family: monospace, serif;
font-size: 1em}

/*Improves readability of pre-formatted text in all browsers.*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word}

/*Sets consistent quote types.*/
q {quotes: "\201C" "\201D" "\2018" "\2019";}

/*Addresses inconsistent and variable font size in all browsers.*/
small {font-size: 80%;}

/*Prevents `sub` and `sup` affecting `line-height` in all browsers.*/
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline}

sup {top: -0.5em}
sub {bottom: -0.25em}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/*Removes border when inside `a` element in IE 8/9.*/
img {
    max-width :100%;
    vertical-align: middle;
    border: 0}

/* .ie8 img{width: auto; height: auto} */

/* Corrects overflow displayed oddly in IE 9.*/
svg:not(:root) {overflow: hidden}


/* ==========================================================================
   Figures
   ========================================================================== */

/*Addresses margin not present in IE 8/9 and Safari 5.*/

figure {margin: 0}


/* ==========================================================================
 @end normarize.css */




/* ==========================================================================
  @base setting
   ========================================================================== */

body {
	margin: 0 auto;
	color: #51656f;
	background-size: 10% auto;
	width:100%;
	font-family: "Helvetica Neue",  Arial,
	"Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,
   	 sans-serif;
}

/* ==========================================================================
  @group HOME
   ========================================================================== */

#topimage{
	background: url(../img/topimage.jpg) no-repeat left top;  
	background-size: cover;
	width: 110%; 
	height: 560px;
	}

		#topimage .logo img{
			padding-top: 0.6em;
			padding-left: 0.6em;
			width:50%;
			}
			
	#introduction{
		font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; 
		}
	
	#introduction h1{
		margin-top: 0;
		padding-left: 1em;
		font-size: 150%;
		letter-spacing: 1em;
		width: 100%;
		height: 40px;
		background: linear-gradient(#d5eadc, #ffffff);
		border-left: solid 20px #006933;
		}
		
	#introduction p{
		padding-left: 2em;
		font-size: 120%;
		width: 80%;
		line-height: 1.5;
		}
		
#exsample{
	padding-left: 4em;
	width: 90%;
	}
	
	#exsample .sentence{
		width: 60%;
		font-size: 100%;
		padding: 0 1em 1em 0;
		}
		
	.info{
		  width: 80%;
		  margin: 0 auto;
		}
		
		.info .box{
			padding: 1em;
			border: solid 2px #006933;
			text-align: center;
		}
		
		.info .box p {
			margin-top: 0.3em; 
			padding: 0;
			font-size: 125%;
			}
			
		.info .box p.form{
			text-align: left;
			font-size: 100%;
			}
	
	.google{
		padding-top: 2em;
		text-align: center;
		}
			
	.bus{
		width: 100%;
		text-align:center;
		}
			
	.info hr .normal{
		padding: 0.5em 1em;
		margin: 2em 0;
		font-weight: bold;	
        border: 1px solid #006933;
		}

	.info hr .dott{	
    	border-top: 1px dotted #006933;
		}	
	
#company{
	clear: both;
	width: 100%;
	padding: 1.5em 0;
	}
	
	#company .title{
		text-align:center;
		font-size: 125%;
		margin: 0.5em;
		}
			
		#company .gaiyo .unit_01{
			margin: 0 0 0 2em;
			border-top: solid 1px #006933;
			padding-top: 0.8em;
			}
			
		#company .gaiyo .unit{
			margin: 2em 0 0 2em;
			border-top: dashed 1px #006933;
			padding-top: 0.8em;
			}
			
		#company .gaiyo .unit_last{
			margin: 2em 0 0 2em;
			border-bottom: solid 1px #006933;
			padding-bottom: 1.8em;
			}
			
			#company .gaiyo .unit_01 .sub{
				width: 24%;
				float: left;
				}
			
			#company .gaiyo .unit_01 .conts{
				width: 75%;
				float: left;
				}
				
			#company .gaiyo .unit .sub{
				width: 24%;
				float: left;
				}
			
			#company .gaiyo .unit .conts{
				width: 75%;
				float: left;
				}
				
			#company .gaiyo .unit_last .sub{
				width: 24%;
				float: left;
				}
			
			#company .gaiyo .unit_last .conts{
				width: 75%;
				float: left;
				}
		

#footer{
	clear: left;
	font-size: 100%;
	text-align: center;
	margin: auto;
	}



/* ==========================================================================
  Groupe BREAK POINT
   ========================================================================== */

/* min-width: 481px
* * * * * * * * * * * * * * * * * * * * */

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


/*  @group HOME
----------------- */

#topimage{
	background: url(../img/topimage.jpg) no-repeat left top;  
	background-size: cover;
	width: 60%;
	height: 650px;
	margin: 0;
	float: left;	
	}

		#topimage .logo img{
			padding: 1em;
			width:40%;
			}

#contents{
	float: left;
	width: 40%;
	}

	#introduction{
		width: 80%;
		}

		#introduction h1{
			font-size: 170%;
			padding:0.5em;
			}
		
	#introduction p{
			font-size: 120%;
			width: 95%;
			}
		
	#exsample{
		padding: 0 0 0 2em;
	}
			
#profile{
	width: 90%;
	padding: 0.5m;
	}
	
	#profile .info{
		float: left;
		width: 40%;
		font-size: 130%;
		margin: 1em 2em 0 1em;
		}
		
#access{
	width: 90%;
	padding: 1em;
	}
	
	#access .bus{
		width: 100%;
		font-size: 100%;
		}
		
	#profile .google{
		float: left;
		width: 40%;
		margin: 1.3em 0 0 0;
		}
		
		#profile .google iframe{
		width: 300px;
		height:300px;
			}	
	

#company{
	width: 80%;
	margin: 2em;
	padding: 1.5em;
	font-size: 130%;
	}
	
	#company .title{
		text-align:center;
		}
		
		#company .title img{
			width: 25%;
			padding: 0;
			}
			
#footer{
	font-size: 110%;
	text-align: center;
	}

}

/* min-width: 769px
* * * * * * * * * * * * * * * * * * * * */

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

#naka{
  max-width: 1200px;
  margin: 0 auto;
}

#topimage{
	background: url(../img/topimage.jpg) no-repeat left top;  
	background-size: cover;
	width: 620px;
	height: 900px;
	}
	
#contents{
	float: left;
	width: 400px;
	}

#exsample{
	padding-left: 6em;
	}
		
#profile{
	float: left;
	width: 380px;
	padding: 0;
	}
	
	#profile .info{
		float: left;
		width: 45%;
		font-size: 90%;
		}

		.info .box{
			padding: 1em;
			border: solid 2px #006933;
			text-align: center;
		}
		
	#profile .google{
		float: left;
		}
		
		#profile .google iframe{
		width: 140px;
		height: 260px;
			}
	
#profile .bus{
		float: left;
		width: 45%;
		font-size: 120%;
		}
		
#company{
	width: 40%;
	font-size: 100%;
	}
			
		#company .title img{
			width: 180px;
			padding: 0;
			}
				
}