@charset "utf-8";
/* CSS Document */

header {
	position: absolute;
	top: 0;
}

footer {
	padding: 8px;
}

#all {
  position: relative;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-image: url(../images/background.jpg);
  background-size: cover;
  width: 100%;
  height: 100vh;
  padding-top: 33.5%;
}

#wrapper {
  width: 100%;
  max-width: 1100px;
  margin: 50px auto 0;
}

#content {
  width: 750px;
  margin: 0 45px 0 0;
  float: left;
}

.top_first {
  width: 330px;
  height: 350px;
  padding: 35px 25px 40px;
  position: absolute;
  background: #fff;
  text-align: center;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 8px;
  box-shadow: 0 4px 8px 0px rgb(177, 183, 182);
}

.top_first img {
  width: 60%;
  display: block;
  margin: 10px auto 10px;
}

.top_first p {
  margin: 0 0 10px;
}

/*トップページ(ログイン前)*/

.top_first h1 {
	font-size: 20px;
}

.top_first img {
	width: 60%;
	display: block;
	margin: 8px auto 10px;
}

.top_first p {
	margin: 0 0 10px;
	font-size: 15px;
}

.top_btn {
	padding: 5px 0 0;
	text-align: center;
}

.login,.tweeter_login,.mail_login {
	box-sizing: border-box;
  width: 100%;
  margin: 0 auto 12px;
  padding: 12px 10px;
  display: block;
  border-radius: 5px;
  clear: both;
  text-align: center;
  text-decoration: none;
  border: none;
  font-size: 15px;
	color: #fff;
}
.login {background: #68bab3}
.tweeter_login {background: #63b5c8}
.mail_login {background: #eea4a4}

.tweeter_login i {
	display: inline-block;
	margin: 0 5px 0 0;
}

.top_first .small {
	margin: 0 0 5px;
	font-size: 13px;
	display: block;
}

.header_search {
	position: absolute;
	right: 10px;
	z-index: 1;
}

.header_search.hs_pc {
	width: 290px;
	text-align: left;
}

.search_list {
	background: #fff;
	border: 1px solid #d6d6d6;
}

.search_list li {
	padding: 2px 5px;
	font-size: 14px;
}
 
@media screen and (max-width:1095px){ /*1095pxまでの幅の場合に適応される*/

	.top_first {
		width: 330px;
		height: 365px;
		position: absolute;
		background: #fff;
		text-align: center;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.top_content h1 {
		font-size: 25px;
	}
 
}

@media screen and (max-width:750px){ /*750pxまでの幅の場合に適応される*/
	#all {
		position: relative;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		background-image: url(../images/background_sp.jpg);
		background-size: cover;
		width: 100%;
		height: 100vh;
		padding-top: 33.5%;
	}

	#wrapper {
		width: 100%;
		max-width: 100%;
		margin: 0 auto 0;
	}
	
	.center {
		width: 100%;
		max-width: 1100px;
		margin: 0 auto;
	}

	.top_first {
		width: 330px;
		height: 330px;
		padding: 20px;
		position: absolute;
		background: #fff;
		text-align: center;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		border-radius: 8px;
		box-shadow: 0 4px 8px 0px rgb(177, 183, 182);
	}
	
	.top_first img {
		width: 55%;
		display: block;
		margin: 8px auto 10px;
	}

}

@media screen and (max-width:480px){ /*480pxまでの幅の場合に適応される*/

	.top_first {
		width: 80%;
		height: 335px;
		padding: 20px;
		position: absolute;
		background: #fff;
		text-align: center;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		border-radius: 8px;
		box-shadow: 0 4px 8px 0px rgb(177, 183, 182);
	}
}

@media screen and (max-width:320px){ /*320pxまでの幅の場合に適応される*/
}