@charset "UTF-8";

body {
  background: #fff;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif ;
  color:#6c6c6c;
  font-size:18px;
  line-height: 24px;}

h1,h2,h3,h4,h5,h6 {font-weight:normal;}
h1{font-size: 36px;color:#fff;}
h2{font-size: 42px;margin-bottom:70px;}
h3{font-size:32px;margin: 0 auto 10px;}
h4 {width:200px; padding:10px 20px;text-align:center;background: #fff;color: #007dd5;border:1px solid #007dd5;margin-top: 10px;}
p{ margin:10px 0;}
li{list-style:none;}
hr {border-top: 1px solid #e5e5e5;border-bottom: 1px solid #fff;}

.btn{margin-top:50px;float:right;}
.btn-primary {padding: 15px 50px;background: #fff;color: #007dd5;border:1px solid #007dd5;margin-top: 10px;}
.btn-primary:hover, 
.btn-primary:focus{background-color: #007dd5;border-color: #007dd5;color: #fff;} 
.btn-transparent {border: 3px solid #fff;background: transparent;color: #fff;}
.btn-transparent:hover {border-color: rgba(255, 255, 255, 0.5);}

a:hover,
a:focus {color: #111;text-decoration: none;outline: none;}

.dropdown-menu {margin-top: -1px;min-width: 180px;}
.media>.pull-left{margin-right: 20px;}
.media>.pull-right{margin-left: 20px;}

body > section {margin-top:130px;}
.center {text-align: center;}
.scaleIn {-webkit-animation-name: scaleIn;animation-name: scaleIn;}

.lead{font-size: 16px;line-height: 24px;font-weight: 400;}

.transparent-bg {background-color: transparent !important;margin-bottom: 0;}

@-webkit-keyframes scaleIn {
  0% {opacity: 0;-webkit-transform: scale(0);transform: scale(0);}
  100% {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}
  }
@keyframes scaleIn {
  0% {opacity: 0;-webkit-transform: scale(0);-ms-transform: scale(0);transform: scale(0);}
  100% {opacity: 1;-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}
}

#page-top {position: fixed;bottom: 20px;right: 20px;font-size: 30px;font-weight: bold;   }
#page-top a {background: #666666;filter:alpha(opacity=60); -moz-opacity:0.6;-khtml-opacity: 0.6;opacity:0.6; text-decoration: none;
color: #fff;width: 45px; padding: 10px; text-align: center;display: block;border-radius: 50px; font-size:17px;}
#page-top a:hover {border-style: none;background: #999999;}


/***************** heder *****************/
.navbar {
  border-radius: 0;
  margin-bottom: 0;
  background: #003f6b;
  opacity:0.7;
  padding: 10px 0;
  margin:0 auto;
  display:block;
  font-size:15px;}
.navbar-nav .top a{
	width:40px;
	text-indent:-9999px;
	background:url(../images/home.png) no-repeat 0 5px;}
.navbar-inverse .navbar-nav > li > a {
  color: #f7f7f7;
  line-height: 24px;
  display: inline-block;}
.navbar-inverse .navbar-nav > li > a:hover{
	border-bottom:2px solid #f7f7f7;
	margin-bottom:-2px;}
.navbar-inverse {
  border: none;}
.navbar-inverse .navbar-brand {
  font-size: 36px;
  line-height: 50px;
  color: #f7f7f7;}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
	border-bottom:2px solid #f7f7f7;
	margin-bottom:-2px;}
.navbar-inverse .navbar-nav .dropdown-menu {
 background-color: rgba(0,0,0,.85);
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  border: 0;
  padding: 0;
  margin-top: 0;
  border-top: 0;
  border-radius: 0;
  left: 0;}
.navbar-inverse .navbar-nav .dropdown-menu:before{
  position: absolute;
  top:0;}
.navbar-inverse .navbar-nav .dropdown-menu > li > a {
  padding: 8px 15px;
  color: #fff;}
.navbar-inverse .navbar-nav .dropdown-menu > li:hover > a,
.navbar-inverse .navbar-nav .dropdown-menu > li:focus > a,
.navbar-inverse .navbar-nav .dropdown-menu > l.current a{
	border-bottom:2px solid #f7f7f7;
	margin-bottom:-2px;}
.navbar-inverse .navbar-nav .dropdown-menu > li.divider {
  background-color: transparent;}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-top: 0;
  padding-bottom: 0;}


/***************** Home *****************/

#main{
	position:relative;
	background:url(../images/head/bg1.jpg) no-repeat center center;
	background-size:cover;
	width:100%;
	height:100%;}
.no-margin {
  margin: 0;
  padding: 0;}
#main h1 img{
		width:40%;
		margin:0 auto;
		padding-top:80px;
		padding-bottom:70px;}
#feature {
  background:url(../images/sec_bg.jpg) no-repeat 0 0;
  background-size:cover;
  padding:50px 0;}
#recent-works .col-xs-12.col-sm-4.col-md-3{padding: 0;}
#recent-works{padding-bottom: 70px;}


/***************** table *****************/

#recent-works .table-wrap, #about2 .table-wrap{overflow:scroll;}
#recent-works .time, #about2 .time{font-size:18px;}
#about2 .time, #about2 p{ width:95%; margin:0 auto;}
#about2 p{ margin-top:10px; text-align:left;}
#recent-works .time td, #about2 .time td{padding:3px;}
		
/***************** table *****************/
		
.map {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;}
 
.map iframe,
.map object,
.map embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;}
.head-img{
	position:relative;
	background-size:cover;
	width:100%;
	height:100%;}

/***************** info *****************/

.info-list{
	padding-left:0;
	margin-top:20px;}
.info-list li{
	position:relative;
	padding-left:1.2em;}
.info-list span{
	position:absolute;
	top:0;
	left:0;}
.attention{ padding-left:0; margin-top:20px;}
.attention li{
	font-size:13px;
	line-height:17px;
	position:relative;
	padding-left:1.2em;}
.attention span{
	position:absolute;
	top:0;
	left:0;}
.title{margin-top:30px;}

/***************** staff *****************/
#introduce1 h3{margin-top:250px;}
#introduce1 h3 span{
		display:block;
		font-size:20px;
		line-height:25px;}
#introduce1 p{margin-top:30px;}
.intro-list{
	padding-left:0;
	margin-top:20px;}
.intro-list li{
	position:relative;
	padding-left:3.5em;
	line-height:1.5em;}
.intro-list span{
	position:absolute;
	top:0;
	left:0;}
#introduce2 .sports{
		margin-top:20px;
		margin-left:0.5em;}

/***************** about *****************/

#about1 h3 span{
		display:block;
		font-size:18px;
		line-height:30px;}
#about1 .about-list,
#recruit .about-list{
		padding-left:0;}

/***************** recruit *****************/
#recruit h4{margin-top:30px;}
#recruit .about-list li a{ text-decoration:underline;}


/***************** footer *****************/

#footer {
  margin-top:130px;
  padding:30px 0;
  background:#f1f1f1;}
#footer a{
		color:#6c6c6c;
		letter-spacing:1;}
#footer div p{ 
	font-size:13px;
	font-weight:bold;
	margin-bottom:0;}

#footer div ul{
		padding-left:5px;}
#footer div li{
		font-size:12px;
		line-height:18px;
		list-style:disc inside;
		margin-bottom:0;}
#footer divt a:hover{text-decoration:underline;}
#footer .name{font-size:30px;}
#footer .tel{
		font-size:32px;
		font-weight:bold;}
#footer .add{ line-height:16px;}
#footer .copy{
		font-size:11px;
		text-align:center;
		margin:30px auto 0;
		width:100%;}
	
.mt0{ margin-top:0 !important;}
.mt10{ margin-top:10px !important;}
.mt20{ margin-top:20px !important;}
.ls0{ letter-spacing:-1px !important;}