*{
	margin:0px; 
	padding:0;
}

body{
	margin:0 auto;
	background-color:#000;
	background:url('img/topa.jpg');
}

#wrapper{
	width:980px;
	margin:0 auto;
}

#ti{
	float:left;
	color:#fff;
	font-size:26px;
	padding:20px 60px 20px 60px;
	font-weight:bold;
}

#tel{
	text-align:right;
	color:#fff;
	font-size:26px;
	padding:20px 60px 20px 60px;
}
.tel2{
	float:right;
	color:#fff;
	font-size:30px;
	padding:20px 60px 20px 60px;
}


#btn_wrap{
	margin:50px 0 0px 0;
	overflow:auto;
	border-radius:10px;]
	position:absolute;
	top:50px;
}

#btn_wrap li{
	width:16.5%;
	float:left;
	list-style-type:none;

}
li{
	list-style-type:none;
}
#btn_wrap li a{
	margin-top:20px;
	text-decoration:none;
	display:block;
	text-align:center;
	width:16.5%;
	line-height:50px;
	color:#fff;
	list-style-type:none;
}

#contents{
	width:980px;
	margin-bottom:20px;

}


h1{
	padding:200px 0 0 100px;
	color:#fff;
	}



.btn_wrap {
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

a {
  display: block;
  margin: 0 10px;
  padding: 15px 0;
  width: 130px;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  text-decoration: none;
  position: relative;
  transition: .2s ease-in-out;
}

a:active {
  background: rgba(255, 255, 255, .5);
}


#footer{
	position:absolute;
	top:850px;
	left:450px;
	clear:both;
	color:#fff;
	font-size:12px;
}


/* ==============================================
* Lazer Effect 
==============================================*/

.lazer:before {
  content: "";
  width: 100%;
  height: 1px;
  background: #FFF;
  position: absolute;
  top: -1px;
  right: 0;
  transition: .1s ease-in-out .1s;
}

.lazer:after {
  content: "";
  width: 1px;
  height: 100%;
  background: #FFF;
  position: absolute;
  bottom: 0;
  right: -1px;
  transition: .1s ease-in-out .2s;
}

.lazer span:before {
  content: "";
  width: 100%;
  height: 1px;
  background: #FFF;
  position: absolute;
  bottom: -1px;
  left: 0;
  transition: .1s ease-in-out .3s;
}

.lazer span:after {
  content: "";
  width: 1px;
  height: 100%;
  background: #FFF;
  position: absolute;
  top: 0;
  left: -1px;
  transition: .1s ease-in-out;
}

.lazer:hover span:after {
  height: 0;
}

.lazer:hover:before {
  width: 0;
}

.lazer:hover:after {
  height: 0;
}

.lazer:hover span:before {
  height: 5px;
}


#d{
	padding:20px 0 20px 0;
	margin:90px auto;
	background:rgba(255,255,255,0.6);
	line-height:25px;
	width:600px;
	border-radius:10px;
}

.spans{
	background-color:yellow;
	color:red;
}


dl{
	padding:0px 0 0 100px;
	border-bottom:1px rgba(000,000,000,0.5) dashed;
	width:980;
	margin:0 0 10px 0;
	
}

dd, dt{
	color:rgba(000,000,000,0.7);
}

dd{
	padding-left:30px;
}


.n{
	color:blue;
	text-decoration:underline;
}



/* ==============================================
レスポンシブ
==============================================*/

@media screen and ( max-width:680px )
{
body{
	margin:0 auto;
	background-color:#000;
}
h1{
	color:fuchsia;
}
	
li{
	width:50%;
}	
	
	
	}



@media screen and ( max-width:479px )
{
body{
	margin:0 auto;
	background-color:#000;
}
h1{
	color:aqua;
}

li{
	width:100%;
}	
	
	
	
	
	
	}