html,body{
	width: 100%;
	height: 100%;
	min-height: 100%;
	font-family:'Lucida Grande', Meiryo, sans-serif;
}

section{
	display: inline-block;
	min-width: 450px;
}

section > p {
	margin:15px;
}

.new-office	{
	margin: 15px;
}

/*===========================*/
/*========= ヘッダー ===========*/
/*===========================*/
#header{
	background: url('../bg_main2.jpg') 30% 50% no-repeat;
/*	background-position: 100% -100px;
	background-attachment: fixed;
	vertical-align: middle;
	height: 300px;*/
		background-position: center top;
	background-attachment: fixed;
	vertical-align: middle;
	height: 300px;
}
	#header:before{
		content: "";
		z-index: 0;
		position: absolute;
		width: 100%;
		height: 100px;
		margin: 0;
		padding: 0;
	}

header{
	margin: 0 auto;
	display: table;
	height: 100%;
	width: 100%;
	max-width:960px;
	margin: 0 auto;
	text-align: left;
	vertical-align: middle;
	color: white;
	padding:0px;
	padding-top:30px;

}
header > section {
	width:100%;
	text-align: left;
	max-width:960px;
	background: rgba(255,255,255,0.6);
	filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#64ffffff,endcolorstr=#64ffffff,gradienttype=0);
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#64ffffff,endColorstr=#64ffffff)";
zoom:1;
	border-top: none;
	border-bottom: none;
	font-size:14px;
	color:black;
	font-weight:bold;
	box-sizing:border-box;
}

#header address{
	font-weight:bold;
	font-size: 16px;
	text-shadow:2px 2px 1px #333333;
	color:#ffffff;
	display: inline;
}

@media only screen and (max-width: 850px){
	#header address{
		display: block;
	}
}

header > *{
	padding: 10px;
	vertical-align: middle;
}

/*===========================*/
/*========== フッター ==========*/
/*===========================*/
#footer{
	margin-top:50px;
	background: #7ecef4;
	text-align:center;
	padding: 20px;

}
footer{
	background: none;
	color:#ffffff;
	max-width:960px;
	text-align:left;
	margin-left:auto;
	margin-right:auto;

}

/*===========================*/
/*========= セクション ==========*/
/*===========================*/
section {
	margin-top:10px;
	margin-bottom: 10px;
	width: 100%;
	text-align: left;
	line-height:150%;
	position: relative;
}
section > h1{
	text-align: left;
	text-shadow:3px 3px 1px #d9d9d9;
	font-size: 25px;
	color: #7ecef4;
	padding: 10px;
	margin: 10px 10px 20px 10px;
	border-bottom: solid #7ecef4 3px;
}

section > h2{
	text-align: left;
	text-shadow:3px 3px 1px #d9d9d9;
	font-size: 20px;
	color: #7ecef4;
	padding: 10px;
	margin: 10px 10px 20px 10px;
	border-bottom: dotted #7ecef4 2px;
}

/*===========================*/
/*======= トップコンテンツ ========*/
/*===========================*/
h1#top{
	display: inline-block;
	font-size: 40px;
	text-shadow:3px 3px 3px black;
	border-radius: 10px;
	padding: 10px;
	margin-right:20px;
}

/*===========================*/
/*======= メインコンテンツ ========*/
/*===========================*/
#main{
	margin: 0 auto;
	padding-top:20px;
	max-width:960px;
}

#main section{
	counter-increment: section;
}

#main section::before {
	position: absolute;
	z-index: -1;
	top: -80%;
	left: 105%;
	content: ' ';
	width: 3px;
	height: 200%;
	/*opacity: 0.5;*/
	background: #7ecef4;
}

#main section:after{
	position: absolute;
	display: inline;
	z-index: 100;
	top: 0;
	left: 100%;
	content: ' ';
	width: 100px;
	height: 100px;
	background: white;
	border: solid #7ecef4 3px;
	border-radius: 50px;
	color: white;
	content: counter(section);
	text-align: center;
	vertical-align: middle;

}

#wrapper{
	/*background:url("../Patterns1-06.png");*/
}
#main{
	/*background: white;*/
}


/*===========================*/
/*========== リスト ===========*/
/*===========================*/
.aqua{
	margin: 15px;
	display: inline-block;
	vertical-align: top;
	zoom: 1; /* Fix for IE7 */
	/* display: inline; */ /* Fix for IE7 */
	list-style: none;
	border: solid #7ecef4 3px;
	border-radius: 10px;
	padding: 10px;
	max-width: 500px;
	width: 100%;
	background: white;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.aqua li{
		border-bottom: dotted 1px #7ecef4;
}

.aqua li:before {
	content: " ";
	display: inline-block;
	zoom: 1; /* Fix for IE7 */
	width: 15px;
	height: 15px;
	background: #7ecef4;
	margin-right:5px;
}
.aqua > *{
	text-align: left;
	margin: 10px 0;
	font-size: 14px;
}
.aqua > h1{
	font-size: 18px;
	font-weight: bold;
	background: #7ecef4;
	color: white;
	padding: 6px;
	margin: 0;
}
.aqua > dt{
	border-bottom: dotted 1px #7ecef4;
}
.aqua > dd{
	text-align: left;
	margin-left:20px;
}
.aqua > dt:before{
	content: " ";
	display: inline-block;
	zoom: 1; /* Fix for IE7 */
	width: 15px;
	height: 15px;
	background: #7ecef4;
	margin-right:5px;
}

.thin{
	color: #c9c9c9;
}

.left {

	text-align:left;
}
.center {

	text-align:center;
}
.right {

	text-align:right;
}

.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}

.none{
	display: none !important;
}

/*===========================*/
/*======== "上へ"ボタン ========*/
/*===========================*/
#to_top{
	background: #5eaef4;
	cursor: pointer;
	opacity: 0.8;
	color: white;
	font-weight: bold;
	border-radius: 25px;
	width: 50px;
	height: 50px;
	display: none;
	position: fixed;
	bottom:60px;
	right: 60px;
	text-align: center;
	vertical-align: middle;
	border: none;
	font-size: 20px;
	-webkit-transition: all 100ms linear;
	   -moz-transition: all 100ms linear;
	    -ms-transition: all 100ms linear;
	     -o-transition: all 100ms linear;
	        transition: all 100ms linear;
}
	#to_top:hover{
		box-shadow: 10px 10px 3px black;
	}

/*===========================*/
/*====== レスポンシブメニュー =======*/
/*===========================*/
#menu-box{
	background: white;
	-webkit-transition: all 500ms;
	   -moz-transition: all 500ms;
	    -ms-transition: all 500ms;
	     -o-transition: all 500ms;
	        transition: all 500ms;
}
#menu{
  display: block;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
}
#menu ul{
	max-width: 960px;
}
#menu li{
  display: block;
  float: left;
  width: 20%;
  margin: 0;
  padding: 0;
  /*box-shadow: 1px 1px 3px black;*/
}
#menu li::first{
  /*box-shadow: -10px 1px 3px black;*/
}
#menu li a{
  display: block;
  padding: 12px 0 10px;
  background: #7ecef4;
  /*background: rgba(126,206,244,1.0);*/
  color: #fff;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all 100ms linear;
     -moz-transition: all 100ms linear;
      -ms-transition: all 100ms linear;
       -o-transition: all 100ms linear;
          transition: all 100ms linear;
          -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
                  box-sizing: border-box;
}
#menu li a:hover{
  background: #8edef4;
  z-index:1000;
  border-right: 5px solid white;
  border-left: 5px solid white;
  /*background: rgba(126,206,244,0.8);*/
}
#toggle{
 display: none;
}

/*@media only screen and (max-width: 1100px){*/
	#main section::before {
		display: none;
		top: 10%;
		left: 90%;
		opacity: 0.5;
	}

	#main section:after{
		z-index: -1;
		top: 0;
		left: -75px;
		width: 150px;
		height: 150px;
		border-radius: 75px;
		opacity: 0.2;
	}
/*}*/

/* 2017.05.15追記 */
@media(min-width: 1000px){
	.new-office:after{
		content: "";
		display: block;
		clear: both;
	}
	
	.no-info{
		float: left;
		width: 50%;
	}
	
	.left{
		float: left;
		width: 50%;
	}
}


@media only screen and (max-width: 600px){
	#header:after{
		opacity: 0;
	}
	#header{
		/*background-size: 1500px 450px;*/
	}
}
@media only screen and (max-width: 550px) {
  #header:after{
  	display: none;
  }
  #menu{
    display: none;
  }
  #menu li{
    width: 100%;
  }
  #menu li a:hover{
  border-top: none;
  border-right: 5px solid white;
  /*background: rgba(126,206,244,0.8);*/
}
  #toggle{
    display: block;
    position: relative;
    width: 100%;
    background: #7ecef4;
    /*background: rgba(126,206,244,0.8);*/
  }
  #toggle a{
    display: block;
    position: relative;
    padding: 12px 0 10px;
    border-bottom: 1px solid #444;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }
  #toggle:before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #fff;
  }
  #toggle a:before, #toggle a:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 4px;
    background: #8edef4;
    /*background: rgba(126,206,244,0.8);*/
  }
  #toggle a:before{
    margin-top: -6px;
  }
  #toggle a:after{
    margin-top: 2px;
  }
  .aqua{
  	max-width: 95%;
  }
	#to_top{
		bottom: 10px;
		right: 10px;
	}
}