@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
/* CSS Document */

a:link {  
    color:#333333;  
    text-decoration:none;  
}  
a:visited {  
    color:#333333;  
    text-decoration:none;  
}  
a:hover {  
    text-decoration:underline;  
}  
a:active {  
    color:#0055bb;  
}  

.mainbox {
    width:700px;
    text-align:left;
    border: solid 1px #cccccc;
    position: relative;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
	box-shadow:5px 5px 3px #efefef;
    -moz-box-shadow:5px 5px 3px #efefef;
    -webkit-box-shadow:5px 5px 3px #efefef;
    margin-top: 2em;
    padding: 1.5em;
    background-image : url("https://komuten.fujimaki.jp/img/slct.jpg");
    background-repeat: no-repeat;
    background-position:right bottom;
}

.mainbox h3 {
    position: absolute;
    top: -0.5em;
    left: 1em;
    margin: 0;
    padding: 0 0.5em;
    color: #0055bb;
	font-size:21px;
    font-weight: normal;
    background-color:#f7fdff; /*背景色にあわせます*/
    font-weight:bold;
}

#con {
	text-align:left;
	line-height:140%;
	font-size:15px;
}

#add {
	background-color:#ddeeff;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
	width:300px;
	text-align:left;
	margin:20px 0 0 0;
	padding:0 10px 0 10px;
	font-size:12px;
	height:80px;
}

#add_old {
	text-align:center;
	width:700px;
	margin:0 auto;
	padding:0;
}

#addl {
	float:left;
	text-align:left;
	background-color:#ddeeff;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
	width:310px;
	text-align:left;
	margin:60px 0 0 0;
	padding:0 10px 0 10px;
	font-size:12px;
	height:80px;
}

#slctr {
	float:right;
	text-align:left;
	margin:40px 0 0 0;
	padding:0;
}

#foot {
	text-align:center;
	width:700px;
	margin:0 auto;
	padding:0;
}

#footl {
	float:left;
	text-align:left;
	font-size:12px;
	margin:10px;
	padding:0;
}

#footr {
	float:right;
	text-align:left;
	margin:3px;
	padding:0;
}

#clear {
	clear:both;
	padding:0;
	margin:0;
	display: block; 
	visibility: hidden;
}


/* Menu */

ul {
list-style: none;
margin: 0px;
padding: 0px;
}

#con ul {
    list-style: circle;
    padding:5px 0 5px 0;
    margin:0 0 0 2em;
}

.menu {
  font-family: 'Raleway', Arial, sans-serif;
  text-align: left;
  text-transform: uppercase;
  font-weight: 500;
}
.menu * {
  box-sizing: border-box;
}

.menu li {
  display: inline-block;
  list-style: outside none none;
  margin: 1em 1em 1.5em 2px;
  padding: 0;
}
.menu a {
  padding: 0.5em 0;
//  color: rgba(255, 255, 255, 0.5);
  position: relative;
  letter-spacing: 1px;
  text-decoration: none;
}
.menu a:before,
.menu a:after {
  position: absolute;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.menu a:before {
  bottom: 0;
  display: block;
  height: 3px;
  width: 0%;
  content: "";
  background-color: #2980b9;
}
.menu a:after {
  left: 0;
  top: 0;
  padding: 0.5em 0;
  position: absolute;
  content: attr(data-hover);
  color: #222222;
  white-space: nowrap;
  max-width: 0%;
  overflow: hidden;
}
.menu a:hover:before,
.menu .current a:before {
  opacity: 1;
  width: 100%;
}
.menu a:hover:after,
.menu .current a:after {
  max-width: 100%;
}

/* button */
input#btn {
	background: -moz-linear-gradient(top,#0099CC 0%,#006699);
	background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699));
	background: linear-gradient(to bottom, #0099CC, #006699);
	border: 1px solid #DDD;
	color:#FFF;
	width: 100px;
	padding: 10px 0;
}

input#btn:hover {
	background: -moz-linear-gradient(top,#00B3EE 0%,#006699);
	background: -webkit-gradient(linear, left top, left bottom, from(#00B3EE), to(#006699));
	background: linear-gradient(to bottom, #00B3EE, #006699);
	border: 1px solid #DDD;
	color:#FFF;
	width: 100px;
	padding: 10px 0; 
	transition: all 0.5s; 
}