@charset 'utf-8';

/* BODY
--------------------------------------------------	*/
body{
	margin:0;
	padding:0;
	text-align:center;
	background-image:url('../image/background.jpg');
}

/* HEADER
--------------------------------------------------	*/
#header{
	height:20px;
	margin:0px;
	padding:6px;
	background:#000000;
	font-weight:bold;
	text-align:right;
}
#header img{ border-style:none; vertical-align:bottom; margin:0px 0px 0px 10px; }
#header a{ text-decoration:none; color:#ffffff; }
#header a:hover{ color:#9cceff; }

/* FOOTER
--------------------------------------------------	*/
#footer{
	text-align:center;
	color:#ffffff;
	background-color:#3f8dc7;
}
#footer a:link{ color:#ffffff; text-decoration:none; }
#footer a:visited{ color:#ffffff; }
#footer a:hover{ color:#87cefa; text-decoration:none; }

#footer ul{ margin-top:0; padding:10px; }
#footer li { display:inline; }

/* A
--------------------------------------------------	*/
a{ text-decoration:none; }
a:hover{ color:crimson; }

/* IMG
--------------------------------------------------	*/
img{ border-style:none; vertical-align:middle; }

/* FORM
--------------------------------------------------	*/
form{ margin:0px; padding:0px; }

/* BUTTON
--------------------------------------------------	*/
.button{
	cursor:pointer;
	padding:10px 20px;
	background:linear-gradient(to bottom, #555555,#222222);
	border:0px solid #222222;
	border-radius:5px;
	color:#ffffff;
}

.button:hover{
	background:linear-gradient(to bottom, #666666,#333333);
}

/* TABLE-OPTION
--------------------------------------------------	*/
.table-option{
	border-collapse:collapse;
	vertical-align:middle;
}

.table-option td {
	padding:0px;
	border:2px solid #ffffff;
	background-color:#f9f9f9;
}
 
.table-option th {
	padding:8px;
	background: #438dcb;
	border:2px solid #ffffff;
	color:#ffffff;
	white-space:nowrap;
}

/* CLEAR
--------------------------------------------------	*/
.clear { clear:both; }

/* H1
--------------------------------------------------	*/
h1 {
	margin-top:0;
	border-bottom: solid 3px skyblue;
	position: relative;
	font-size:1.4em;
	font-weight:normal;
}
h1:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #ffc778;
	bottom: -3px;
	width: 30%;
}

/* H2
--------------------------------------------------	*/
h2 {
  margin:0 0 10px 0;
  position: relative;
  display: inline-block;
  padding: 0 15px;
  font-size:1.0em;
  font-weight:normal;
}

h2:before, h2:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 10px;
  height: 1px;
  background-color: black;
}

h2:before {
  left:0;
}
h2:after {
  right: 0;
}

/* box-question */
.box-question{ margin-bottom:10px; padding:10px; background-color:#e1f2ff; border-radius:10px; }

/* レスポンシブPC&タブレット
--------------------------------------------------	*/
@media screen and (min-width:1010px){
	#wrapper{
		width:990px;
		margin:auto;
		overflow: hidden;
	}

	#contents{
		margin:10px;
		padding:15px;
		background-color:#ffffff;
		text-align:left;
		border-radius:15px;
	}

	#footer li{
		padding-left:10px;
		padding-right:5px;
		border-left:2px solid #888888;
	}
	#footer li.first {
		border-left:none;
	}

	.box-question img{ max-width:300px; }
}

/* レスポンシブSP
--------------------------------------------------	*/
@media screen and (max-width:1009px){
	#wrapper{
		margin-left:auto;
		margin-right:auto;
	}

	#contents{
		margin:10px;
		padding:15px;
		background-color:#ffffff;
		text-align:left;
		border-radius:15px;
	}

	#footer{ padding-bottom:10px; }
	#footer ul { padding-left:2%; margin:auto; line-height:250%; }
	#footer li {
		display:inline-block;
		float:left;
		width:48%;
		margin:1px;
		background:#62a3d3;
		border:1px solid #ffffff;
	}
	#footer li a {
		display:block;
		width:100%;
	}
	#footer li a:hover {
		background-color:#75b4e3;
	}

	.box-question img{ max-width:100%; }
}